Ícones de Redes Socias

[zetabyte00 0]

Como vocês adicionam ícones de redes sociais página de vocês? É uma imagem para cada ícone de rede de social (Twitter, Facebook, Youtube e etc)??? Você usam alguma coisa como SVG. Se puderem me fornecer um overview a esse respeito, eu agradeceria.

[Omar~ 87]

Existem muitas formas desde a adesão de imagens a uso de vetores.

Eu prefiro vetor pelo fato que imagens consomem mais net para ser processada.

 

Bem existem muitos arquivos de font-icon que é mais viável de utilizar.

Veja alguns:

https://icomoon.io/

http://www.webhostinghub.com/glyphs/

http://fontawesome.io/

 

Além desse existem vários outros.

[Public2004 79]

N formas de se chegar ao objetivo.

Em geral, um svg terá mais qualidade que um raster e se você utilizá-lo inline, terá a vantagem de economizar requisições, além de poder modificá-lo ou animá-lo com css/js.

No caso do raster, sugiro criar uma imagem única com todos os ícones e eventuais estados "hover, focus, etc." (o que pode ser feito também com um svg). Utilize esta imagem como background e no css, trabalhe com o posicionamento de cada ícone, assim como seus estados. A vantagem aqui é que você faz uma única requisição. Lembro também que a qualidade raster vs svg em gráficos pequenos é pouco perceptível, quanto ao tamanho (KB) depende, um svg complexo ou mau construído pode pesar muito mais que um raster.

A utilização de um icon-font pode ser uma boa, desde que você já esteja utilizando algum pacote no seu projeto, caso contrário, não indico apenas para esta finalidade.

 

Att.

[zetabyte00 0]

@Public2004

 

É esse processo que quero entender:  "No caso do raster, sugiro criar uma imagem única com todos os ícones e eventuais estados "hover, focus, etc." (o que pode ser feito também com um svg). Utilize esta imagem como background e no css, trabalhe com o posicionamento de cada ícone, assim como seus estados. A vantagem aqui é que você faz uma única requisição"

 

Onde posso obter mais informações a respeito???

[Public2004 79]

6 horas atrás, zetabyte00 disse:

@Public2004

 

É esse processo que quero entender:  "No caso do raster, sugiro criar uma imagem única com todos os ícones e eventuais estados "hover, focus, etc." (o que pode ser feito também com um svg). Utilize esta imagem como background e no css, trabalhe com o posicionamento de cada ícone, assim como seus estados. A vantagem aqui é que você faz uma única requisição"

 

Onde posso obter mais informações a respeito???

 

Boas... Para ser mais preciso, o nome dessa técnica é "CSS Image Sprites".

Um bom início: http://www.maujor.com/tutorial/css-sprites.php

 

Att.

[zetabyte00 0]

Ok. Mas eu quero entender como ler uma único ícone em uma imagem que tem todos os ícones, entendeu?

[Public2004 79]

Exemplo: Você tem uma única imagem com cinco ícones, esses ícones estão posicionados em linha. Cada ícone possui 20 x 20px totalizando na imagem 100px de largura. Na linha de baixo, os mesmos cinco ícones mas diferenciados pelo estado hover. Então no total, sua imagem ficará com 100 x 40px (uma espécie de grid).

Para apresentar cada ícone, criamos por exemplo uma lista desordenada <ul> e declaramos que o <li> que irá conter cada ícone, terá altura e largura de 20px, declaramos também o background com a nossa imagem, e o truque vem no posicionamento deste background, no primeiro ícone, top e left em 0px, no segundo, top 0px e left -20px, no terceiro, top 0 e left -40px e assim por diante. A mesma lógica para o estado hover, só que com top em -20px.

 

Att.