Ícones CSS
Ícones podem ser facilmente adicionados à sua página HTML, usando uma biblioteca de ícones.
Como adicionar ícones
A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como Font Awesome.
Adicione o nome da classe de ícone especificada a qualquer elemento HTML embutido (como <i>ou
<span>).
Todos os ícones nas bibliotecas de ícones abaixo são vetores escaláveis que podem ser personalizados com CSS (tamanho, cor, sombra, etc.)
Ícones incríveis de fonte
Para usar os ícones do Font Awesome, acesse
fontawesome.com , faça login e obtenha um código para adicionar na <head>seção de sua página HTML:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Leia mais sobre como começar a usar o Font Awesome em nosso tutorial Font Awesome 5 .
Nota: Não é necessário fazer download ou instalação!
Exemplo
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Resultado:
Para obter uma referência completa de todos os ícones do Font Awesome, visite nossa Referência de ícones .
Ícones de inicialização
Para usar os glifos do Bootstrap, adicione a seguinte linha dentro da <head>seção da sua página HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Nota: Não é necessário fazer download ou instalação!
Exemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Resultado:
Ícones do Google
Para usar os ícones do Google, adicione a seguinte linha dentro da <head>seção de sua página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: Não é necessário fazer download ou instalação!
Exemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Resultado:
Para obter uma lista completa de todos os ícones, visite nosso Tutorial de ícones .