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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *