Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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.
@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???
>
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.
Ok. Mas eu quero entender como ler uma único ícone em uma imagem que tem todos os ícones, entendeu?
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.
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.