Ícones W3.CSS
Bibliotecas de ícones
Com W3.CSS você pode usar a biblioteca de ícones que você gosta, como:
- Ícones incríveis de fonte
- Ícones do Google Material Design
- Ícones de inicialização
Usando uma biblioteca de ícones
Para inserir um ícone:
- Inclua a biblioteca de ícones de uma CDN (Content Delivery Network) na seção <head>.
- Adicione o nome da classe de ícone a qualquer elemento HTML embutido.
Dica: Os elementos <i> e <span> são amplamente usados para adicionar ícones.
Para controlar o tamanho do ícone, altere a propriedade font-size do ícone ou use uma das classes w3 - size :
- w3-minúsculo
- w3-pequeno
- w3-grande
- w3-xxgrande
- w3-xxxgrande
- w3-jumbo
Alguns ícones impressionantes de fontes
fa fa-casa
fa-bares
fa fa-seta-esquerda
fa fa-seta-direita
fa fa-busca
fa fa-perto
fa fa-refresh
fa fa-lixo
machuca
fa fa-carro
fa fa-caminhão
fa fa-plano
Exemplo
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Para obter uma lista completa de ícones: Visite nossa referência de ícones
Alguns ícones do Google Material Design
casa
casa
casa
cardápio
cardápio
cardápio
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
procurar
procurar
procurar
Fechar
Fechar
Fechar
atualizar
atualizar
atualizar
excluir
excluir
excluir
pessoa
pessoa
pessoa
direções_carro
direções_carro
direções_carro
local_shipping
local_shipping
local_shipping
aeroporto_local
aeroporto_local
aeroporto_local
Exemplo
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Alguns ícones do Bootstrap
casa
menu de hambúrguer
arrow_back
arrow_forward
procurar
remover
atualizar
lixo
do utilizador
Arquivo
imprimir
avião
Exemplo
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>