Como Adicionar Ícones
Para inserir um ícone, adicione o nome da classe de ícone a qualquer elemento HTML embutido. Os elementos <i> e <span> são amplamente usados para adicionar ícones. Todos os ícones nas bibliotecas de ícones abaixo são ícones vetoriais escaláveis que podem ser personalizados com CSS (tamanho, cor, sombra, etc.).
Font Awesome 5 Ícones
Para usar os ícones do Free Font Awesome 5, adicione a seguinte linha dentro da seção <head> da sua página HTML:
Nota: Nenhum download ou instalação é necessária!
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
Font Awesome 4 Ícones
Para usar os ícones do Font Awesome 4, adicione a seguinte linha dentro da seção <head> da sua página HTML:
Nota: Nenhum download ou instalação é necessária!
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Ícones de Bootstrap
Para usar os glifos do Bootstrap, adicione a seguinte linha dentro da seção <head> da sua página HTML:
Nota: Nenhum download ou instalação é necessária!
<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>
Google Icons
Para usar os ícones do Google, adicione a seguinte linha dentro da seção <head> da sua página HTML:
Nota: Nenhum download ou instalação é necessária!
<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">attach_file</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Agora você está pronto para adicionar ícones aos seus projetos de forma fácil e rápida! Use a biblioteca de ícones que melhor se adequa às suas necessidades e customize-os com CSS para garantir que se integrem perfeitamente ao design do seu site.