Ícones da Web - Introdução

Um ícone é um símbolo usado para representar uma ação específica ou um recurso em uma página da web. Os ícones são usados ​​em documentos e também em aplicativos e podem ser selecionáveis ​​ou não selecionáveis. Por exemplo, as imagens que vemos nos botões de um aplicativo são todas ícones e esses botões são selecionáveis. Da mesma forma, quando usamos um ícone como logotipo da empresa, normalmente não é selecionável.

No ambiente Windows, se silenciarmos o volume do sistema, ele será representado com a ajuda de um ícone, conforme mostrado abaixo.

Usando ícones da web, podemos representar uma página de carregamento, uma opção desabilitada, um link, um redirecionamento, etc. Esses ícones podem ser invertidos, girados, redimensionados, com bordas, invertidos e coloridos.

Fontes de ícone

As fontes de ícone contêm símbolos e glifos. Depois de carregar uma fonte desejada, você pode usar qualquer um dos ícones fornecidos por essa fonte usando o nome da classe do ícone. Também podemos aplicar cores diferentes aos ícones e redimensioná-los usando as propriedades CSS. Existem várias bibliotecas de ícones (fontes) que fornecem ícones. Este tutorial se concentra em três fontes principais, a saber -

  • Fonte incrível
  • Glificons bootstrap
  • Ícones de materiais do Google

Fonte incrível

Esta fonte fornece 519 ícones vetoriais escaláveis ​​gratuitos. Esta biblioteca é totalmente gratuita, tanto para uso pessoal como comercial. Esses ícones podem ser personalizados facilmente. Originalmente, eles foram desenvolvidos para Bootstrap.

Glificons bootstrap

Esta é uma biblioteca de ícones monocromáticos disponíveis em formatos de imagem raster, formatos de imagem vetorial e como fontes. Ele fornece mais de 250 glifos em formato de fonte. Você pode usar essas fontes em seus projetos da web. Esses ícones não são gratuitos, no entanto, você pode usá-los em projetos baseados no Bootstrap sem ter que comprá-los.

Ícones de materiais do Google

O Google fornece cerca de 750 ícones projetados sob "diretrizes de material projetado" e são conhecidos como Material Designícones. Esses ícones são simples e oferecem suporte a todos os navegadores modernos. Como esses ícones são baseados em vetores, eles também são escalonáveis. Para usar esses ícones, temos que carregar a fonte (biblioteca)material-icons.