Como adicionar ícones
Para inserir um ícone, adicionar o nome da classe ícone para qualquer elemento HTML de inline.
A <i> e <span> elementos são amplamente utilizados para adicionar ícones.
Todos os ícones nas bibliotecas de ícone abaixo, são ícones vetoriais escaláveis que podem ser personalizados com CSS (size, color, shadow, etc.)
Ícones impressionantes Font
Para usar os ícones impressionantes da fonte, adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Nota: Não precisa fazer download ou instalação é necessária!
Exemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.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>
Tente você mesmo " Ícones Bootstrap
Para usar os glyphicons Bootstrap, adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Nota: Não precisa fazer download ou instalação é necessária!
Exemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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>
Tente você mesmo " Google Icons
Para usar os ícones do Google, adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: Não precisa fazer download ou instalação é necessária!
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>
Tente você mesmo " Para uma lista completa de todos os ícones impressionantes da fonte, visite o de referência impressionante ícone Font .
Para obter uma lista completa de todos os Glyphicons Bootstrap, visite o de referência Bootstrap Glyphicon .
Para uma lista completa de todos os ícones do Google, visite o de referência ícone do Google .