🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【HTML】Adicionar e Exibir Ícones | Usando FontAwesome e Material Icons

Este artigo explica como exibir ícones e caracteres especiais no HTML usando FontAwesome e Material Icons.

🔹 Código Parcial

<span class="fa fa-camera"></span> Tirar uma foto

💻 Código Completo em Funcionamento (Este código funciona apenas copiando e colando no HTML)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Exibição de Ícones</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <span class="fa fa-camera"></span> Tirar uma foto
</body>
</html>

📚 Fontes de Ícones: Mecanismo e Usos Práticos

O método de exibir ícones usando o elemento <span> é amplamente adotado no desenvolvimento web moderno. Com um código simples como <span class="fa fa-camera"></span>, você pode exibir uma rica coleção de ícones.

Essência das Fontes de Ícones

FontAwesome e Material Icons utilizam uma tecnologia chamada "Fontes de Ícones". Isso significa que cada ícone é tratado como um caractere de uma fonte especial. Isso funciona especificando a propriedade font-family com uma fonte específica. Em alguns casos, o pseudo-elemento ::before e a propriedade content do CSS também são usados para renderizar os ícones.

Aplicação Prática em Projetos

Em menus de navegação, você pode usar algo como <span class="fa fa-home"></span> Home. Além disso, ao adicionar <span class="material-icons">send</span> a um botão, você pode facilmente embutir o ícone de envio. Para design responsivo, definindo o font-size em unidades de % ou vw, o ícone vai escalar bem com o tamanho da tela.

Observe que usar a tag <i> está ficando menos comum hoje em dia, e o <span> é a escolha preferida para exibir ícones. Quando usar CDNs para carregar ícones, é necessário ter uma conexão com a rede. Para uso offline, é necessário baixar os arquivos localmente.

Para alcançar uma UI consistente em um projeto, recomenda-se definir o tamanho dos ícones em unidades de rem e gerenciar as cores com variáveis CSS. Por exemplo, você pode defini-lo assim: .icon { font-size: 1.2rem; color: var(--primary-color); } para aplicar facilmente as mudanças a todos os ícones.

Copiado!