Os desenvolvedores da Web estão muito acostumados a usar ícones para representar uma ação específica ou o ícone pode representar graficamente qualquer comando ou ação ou um indicador 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 podem ser selecionados.
Para facilitar o design e a programação de sites, foram desenvolvidas algumas bibliotecas de ícones de fontes, ou seja, ícones que podem ser inseridos como se fossem texto e ficam disponíveis para serem usados nas páginas HTML de um site, economizando muito trabalho para usuários, designers e programadores.
Neste tutorial, veremos algumas bibliotecas como Font Awesome, Bootstrap Glyphicons e Material Design Google, que são bibliotecas com fontes de ícone predefinidas frequentemente usadas por desenvolvedores da web.
Ferramentas e biblioteca impressionantes de fontes
Font Awesome é uma biblioteca de fontes que renderiza ícones usando um conjunto de ferramentas baseadas em CSS. Esta ferramenta foi desenvolvida para uso com o Twitter Bootstrap, mas pode ser usada individualmente como folhas de estilo em qualquer site.
A vantagem de ser uma biblioteca CSS é que funciona em qualquer navegador e dispositivo e até se adapta a qualquer resolução de tela.
Você pode baixar a biblioteca do site Font Awesome. Outra opção é usar o link direto para a biblioteca:
Vamos ver um exemplo de como implementar ícones para redes sociais com Font Awesome, criamos um arquivo html e adicionamos o seguinte código:
Font Awesome - Ícones de mídia social
Cada ícone é representado por um ícone de classe fa, por exemplo, o ícone do YouTube será fa-youtube, o resultado quando exibido no navegador será o seguinte:
Em seguida, podemos adicionar nossas próprias classes CSS ou modificar a predefinida para se adaptar ao nosso design, por exemplo, entre as tags head, adicionamos o seguinte código CSS.
Decoração de ícones via CSS
Em seguida, executamos no navegador e o resultado será o seguinte:
Podemos ver que aplicamos CSS a cada ícone e não adicionamos nenhuma imagem. Outra opção para melhorar a visibilidade é alterar o aula de pairar, ou seja, quando o mouse estiver passando sobre um ícone, altere a cor da letra.
Para fazer isso, mudamos a cor na seguinte linha:
.social-icons .fa: hover {color: green; } O resultado ao passar o mouse sobre um ícone será o seguinte:
Também podemos fazer isso com o fundo de cada ícone, mudando a propriedade background para uma cor que gostamos.
Todos os ícones disponíveis podem ser vistos no site do Font Awesome, os ícones são organizados por categorias.
Usar este tipo de fonte de ícone para nossos designs web nos permite acelerar o carregamento da página, uma vez que não precisamos de imagens e oferecemos uma qualidade superior (especialmente em dispositivos móveis ao fazer zoom)
Biblioteca e ferramentas de bootstrap da Glyphicons
Glyphicons Bootstrap é uma biblioteca de ícones de fontes. Ele oferece uma grande variedade de ícones em formato de fonte. Esses ícones são gratuitos e você também pode estender a biblioteca com ícones pagos. Ícones gratuitos podem ser usados em projetos baseados em web design sem a necessidade de comprá-los. Esta biblioteca é orientada para ícones para botões que executam alguma função, como imprimir, pesquisar, salvar, etc.
Esta biblioteca está incluída como folhas de estilo no Bootstrap, para usá-la podemos baixar o Bootstrap de sua página oficial ou usar o seguinte link:
Também podemos ver os ícones por categorias na página Glyphicons.
A seguir, vamos ver um exemplo em que usamos esta biblioteca para ícones para botões e elementos de entrada de dados para um formulário:
Bootstrap Glyphicon - BotõesTestamos em um dispositivo móvel como seria:Bootstrap Glyphicon - Botões
Pesquisa Imprimir Login Comprar
Nós aplicamos o ícone de lista a uma seleção
Carros motos
As vantagens de usar ícones de fonte ou ícones de fonte é que isso evita a necessidade de invocar uma imagem ou ícone, uma vez que as imagens estão no formato SVG no arquivo css da biblioteca e essas imagens são escalonáveis.
Uma biblioteca completa pode ter entre 10Kb e 40Kb, o que aumenta a velocidade de carregamento do site.
Os ícones são texto portanto podemos manipulá-los com CSS e responderá a qualquer evento que programarmos com Jquery.
Se na propriedade CSS Font indicamos um tamanho de fonte em em por exemplo, font-size: 4em o ícone será responsivo e se adaptará a qualquer dispositivo. Eles também podem ser usados para programar aplicativos responsivos com frameworks como visto no tutorial, programando aplicativos móveis com Ionic Framework, esses ícones também são usados.
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
