Jump to content
FabianoSouza

Qual é a maneira mais indicada para implementar ícones?

Recommended Posts

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á.

 

Share this post


Link to post
Share on other sites
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<?php
$color= '#000000';
?>

<i class="fa fa-facebook-f" style="font-size:36px"></i>
<i class="fa fa-facebook-f" style="font-size:48px;color:<?= $color; ?>"></i>

 

Share this post


Link to post
Share on other sites

So passando pra dar uma opinião, como foi dito o mais aceitavel hoje é o uso de font-icon por ser leve e bem padronizado, mas dependendo do tipo de projeto e se houver nicho alguns UXs usam icones em formato svg, então fica havendo uma mescla entre font-icon e svg icon, mas o mais indicado continua sendo o font-icon

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Motta
      Prezados ,
      Onde tenho um Banco de Imagens de ícones Público disponível para dowmload.
       
      Coisa básica
    • By 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.
       
       
       


    • By zetabyte00
      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.
    • By @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.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.