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>
