Tutorial de ícones

Como adicionar ícones
Para inserir um ícone, adicione o nome da classe de ícone a qualquer elemento HTML embutido.

Os elementos e 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.)

Fonte Impressionante 5 ícones
Para usar os ícones do Free Font Awesome 5, adicione a seguinte linha dentro da seçãoda sua página HTML:

Nota: Nenhum download ou instalação é necessária!

Exemplo

<! DOCTYPE html>
<html>
<cabeça>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.0/css/all.css" integridade = "sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S + oqd12jhcu + A56Ebc1zFSJ" crossorigin = "anônimo">
</ head>
<body>

<i class = "fas fa-band-aid"> </ i>
<i class = "fas fa-cat"> </ i>
<i class = "fas fa-dragon"> </ i>
<i class = "far-clock distante"> </ i>
<i class = "fas fa-clock"> </ i>

</ body>
</ html>

Fonte impressionante 4 ícones
Para usar os ícones Font Awesome 4, adicione a seguinte linha dentro da seçãoda sua página HTML:

Nota: Nenhum download ou instalação é necessária!

Exemplo

<! DOCTYPE html>
<html>
<cabeça>
<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 inicialização
Para usar os glifos do Bootstrap, adicione a seguinte linha dentro da seçãoda sua página HTML:

Nota: Nenhum download ou instalação é necessária!

Exemplo

<! DOCTYPE html>
<html>
<cabeça>
<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 usuário de glifo"> </ 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çãoda sua página HTML:

Nota: Nenhum download ou instalação é necessária!

Exemplo

<! DOCTYPE html>
<html>
<cabeça>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</ head>
<body>

<i class = "material-icons"> nuvem </ i>
<i class = "material-icons"> favorito </ i>
<i class = "material-icons"> anexo </ i>
<i class = "material-icons"> computador </ i>
<i class = "material-icons"> tráfego </ i>

</ body>
</ html>