Ir para conteúdo
zetabyte00

Ícones de Redes Socias

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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???

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por rafabook
      Olá, preciso de uma ajuda URGENTE!
      Tenho um site no Wordpress, uso o tema NewsPaper, quando abro o meu site, os ícones não aparecem, o que aparece no lugar são quadrinhos.
      Já tentei de tudo, mas não consigo resolver.
      Quando dou f12 na página, o console apresentam alguns erros, segue o erro:
       
       
       
      Uncaught Imessage: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page."name: "TagError"stack: "TagError: adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.↵    at Qh (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:69642)↵    at Ph (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:69372)↵    at Uh (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:72491)↵    at b (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:72534)↵    at Vh (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:72738)↵    at bi (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:76170)↵    at Xh (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:73942)↵    at https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:73105↵    at kd (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:17122)↵    at ud (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:19943)"__proto__: Error
      newspaper.woff:1 Failed to load resource: the server responded with a status of 404 ()
      newspaper-icons.woff:1 Failed to load resource: the server responded with a status of 404 ()
      newspaper.ttf:1 Failed to load resource: the server responded with a status of 404 ()
      newspaper-icons.ttf:1 Failed to load resource: the server responded with a status of 404 ()
      index.html?e=69&renderingType=2&leftOffset=0&topOffset=0&c=hxr3FxQCkt&t=1:73 [Deprecation] document.registerElement is deprecated and will be removed in M73, around March 2019. Please use window.customElements.define instead. See https://www.chromestatus.com/features/4642138092470272 for more details.
      (anonymous) @ index.html?e=69&renderingType=2&leftOffset=0&topOffset=0&c=hxr3FxQCkt&t=1:73
       
       
      Já abri o site em vários navegadores, mas o erro dá em todos.
       
      Segue o print dos erros.
       
      Caso alguém puder me ajudar por favor, agradeço.
       
       
       


    • Por rachelvillaradm
      Olá galera, a quem possa interessar...   Recomendo o Curso de Marketing Digital Intensivo no Rio da MPE Marketing Digital.    - O menor valor do mercado para Curso de Marketing Digital Presencial (R$ 200). Além disso, ingresso pode ser comprado por cartão de crédito (parcelado em até 10x), boleto bancário ou débito online; - Ótima localização no Centro do Rio - RJ. O prédio EDX Coworking fica esquina com a Rua 7 de setembro, a 5 minutos das barcas, a 2 minutos do metrô estação carioca e em frente ao VLT (Veículo leve sobre trilhos);  - Internet Wi-fi de alta velocidade; - Coffee & Snacks Grátis; - Apostila do Curso de Marketing Digital (formato digital) e certificado digital de participação enviado via e-mail.   Mais informações e pagamento na plataforma Sympla: https://www.sympla.com.br/curso-de-marketing-digital-no-rio-intensivo-de-8hs__249513
    • Por marcossantana10
      Olá galera, eu gostaria usar esse efeito no meu projeto, quando o usuário passa o mouse, a foto recebe essa camada por cima com as opções de alguns botões dentro (que serão como o exemplo, as redes sociais).
      O problema é que não sei como faz, nem sequer sei o nome do efeito. O exemplo de como eu quero tá no link abaixo, na sessão "OUR TEAM" na home mesmo, ou clicando no menu superior em "TEAM":
      http://creativelycoded.com/demos/eDental/
    • Por Motta
      Criador do Orkut abre nova rede social
       
      Ele devia , na minha opinião , dar uma atenção especial ao Brasil , sua rede "pegou" mais aqui afinal.
    • Por @gilsones
      Estou criando um sistema e preciso de ícones e cursores de mouse para as ferramentas de desenho, assim como no Photoshop, FireWorks, CorelDraw, AutoCad...
       
      Procurei no Google mas não nenhum pacote com as ferramentas lápis, linha, "polígono", "vetor" etc...
       
      Alguém sabe onde posso encontrar ou como posso "pegar" dos softwares que citei acima?
       
      Obrigado.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.