Google Fonts adiciona Ícones
Google Fonts recebeu uma atualização significativa que passa a permitir o uso de ícones, além de fontes. Os ícones estão disponíveis em cinco estilos: outlined (delineado), filled (preenchido), rounded (arredondado), sharp (acentuado/realçado) e two-tone (dois tons). Possui uma variedade de tamanhos e densidades para download. Os ícones são criados com base nos princípios básicos de design e nas métricas das diretrizes de design de materiais. Os ícones são free e open-source.
Como usar?
1. Inclua dentro da tag head o estilo de ícone que deseja trabalhar:
<!-- Outlined --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet"> <!-- Filled --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"> <!-- Rounded --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet"> <!-- Sharp --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet"> <!-- Two tone --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet"> |
2. Localize o ícone que você deseja usar, conforme o estilo, em https://fonts.google.com/icons e clique para mais detalhes.
3. Na janela a direita selecione o código e pressione CTRL + C para copiar.
4. Cole o código no arquivo do seu projeto. Exemplo:
<h3><span class="material-icons-outlined">lightbulb</span> Outlined</h3> <h3><span class="material-icons">lightbulb</span> Filled</h3> <h3><span class="material-icons-round">lightbulb</span> Roudend</h3> <h3><span class="material-icons-sharp">lightbulb</span> Sharp</h3> <h3><span class="material-icons-two-tone">lightbulb</span> Two Tone</h3> |
É possível adicionar outros estilos aos ícones, leia a documentação clicando aqui.