Como adicionar ícones
A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como o 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 escalonáveis que podem ser personalizados com CSS (tamanho, cor, sombra etc.)
Ícones impressionantes de fontes
Para usar os ícones Fontes impressionantes, acesse https://fontawesome.com , entre e obtenha um código para adicionar na <head>seção da sua página HTML:
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <!--Get your own code at fontawesome.com--> </head> <body> <p>Some Font Awesome icons:</p> <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> <p>Styled Font Awesome icons (size and color):</p> <i class="fas fa-cloud" style="font-size:24px;"></i> <i class="fas fa-cloud" style="font-size:36px;"></i> <i class="fas fa-cloud" style="font-size:48px;color:red;"></i> <i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i> </body> </html>
Ícones de inicialização
Para usar os glyphicons 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!
<!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>
Ícones do Google
Para usar os ícones do Google, adicione a seguinte linha dentro da <head>seção da 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!
<< Anterior Fontes CSS – Abreviar e Propriedade da fonte CSS
Deixe um comentário