Utilizando pictogramas para otimizar seu site

Utilizando pictogramas para otimizar seu site

Você sabe o que são Icon Fonts (ou pictogramas, ou fonte de ícones)? Se não sabe, ao menos é provável que descansou bastante seus dedos de programador em alguma caverna no Himalaia pelos últimos 5 anos.

Até o início de 2012, o único modo conhecido de ilustrar seu querido website seria adquirindo imagens em renomados fornecedores de conteúdo gráfico, gerando os vetores manualmente à base de café e paciência, ou copiando descaradamente de seus vizinhos da Internet.

Atualmente, é possível escolher entre uma gama de bibliotecas online que, ao ser carregada em seu código fonte, se comporta como uma nova fonte (alguém aí ainda usa Wingdings?) , só que no lugar de letras, números e símbolos duvidosos, encontra-se uma coleção abundante de ícones e pictogramas dos mais variados temas, tudo codificado em linguagem CSS, o que agiliza seu carregamento e facilita sua customização visual a qualquer momento.

Segue abaixo uma pequena lista das bibliotecas mais conhecidas:

  • Font-Awesome (http://fontawesome.io)
  • Dashicons (https://developer.wordpress.org/resource/dashicons)
  • Google (https://material.io/icons)
  • IcoMoon (https://icomoon.io)

Eexmplo de utilização

Feita a vinculação no código, basta utilizar as tags especiais próprias para as chamadas dos símbolos. Vamos utilizar para fins de exemplo o Font-Awesome:

  • <i class=”fa fa-taxi”>
  • <i class=”fa fa-tags”>
  • <i class=”fa fa-cog fa-spin”>
  • e muitos outros…

O resultado é a possibilidade de utilizar ilustrações trabalhadas e dinâmicas para agilizar a criação do seu website. Ganha-se de brinde um aumento na velocidade de carregamento, já que não existem imagens pesadas sendo recuperadas.

Estes ícones, como qualquer boa fonte, podem ser utilizados praticamente em qualquer lugar de seu código. Basta exercitar sua criatividade! Ok?

Fechar Menu