Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por FabianoSouza
      Sei que há uma infinidade  de maneira para aplicar ícones em aplicação web.
       
      Mas antes de eu me aprofundar em estudar alguma delas, eu gostaria de saber dos colegas qual a forma mais adequada para os padrões web atuais.
      1) Qual o melhor tipo de imagem? SVG ou PNG?
      2) Qual a melhor técnica? Sprite de ícones? Aplicar ícones individualmente inline? Usar ícones como fontes?
       
      Outro ponto importante é que eu gostaria de poder mudar a cor do conjunto de ícones sempre que precisar (ícones monocromáticos). Deixar tudo Cinza, Preto, Azul e etc.
       
      Agradeço desde já.
       
    • Por Motta
      Prezados ,
      Onde tenho um Banco de Imagens de ícones Público disponível para dowmload.
       
      Coisa básica
    • Por rachelvillaradm
      A MPE Marketing Digital é um blog de conteúdo que ajuda Micro e Pequenos Empresários e Empreendedores autônomos a alcançarem sucesso no Marketing Digital. Também selecionei os melhores Cursos de Marketing Digital Presencial no Rio e Cursos de SEO Presencial no Rio. Estude, planeje e aplique ações de Marketing Digital em seu negócio. SUCESSO!
    • 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 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/
×

Informação importante

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