Ícones CSS

Índice

    Mostrar índice

Os ícones podem ser facilmente adicionados à sua página HTML, usando uma biblioteca de ícones.

Como adicionar ícones

A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como Fonte incrível.

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 escaláveis que podem ser personalizado com CSS (tamanho, cor, sombra, etc.)

Ícones impressionantes de fontes

Para usar os ícones Font Awesome, vá para fontawesome.com, faça login e obtenha um código para adicionar na seção <head> da sua página HTML:

<script; src="https://kit.fontawesome.com/seucódigo.js" crossorigin="anonymous"></script>

Leia mais sobre como começar a usar o Font Awesome em nosso Fonte Incrível 5 tutorial.

Observação: nenhum download ou instalação é necessário!

Exemplo

<!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<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>

</body>
</html>

Resultado:

Experimente você mesmo →

<!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" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<h1>Font Awesome icon library</h1>

<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>

Para uma referência completa de todos os ícones Font Awesome, visite nossa Referência de ícones.

Ícones de inicialização

Para usar os glifos Bootstrap, adicione a seguinte linha dentro da seção <head> da sua página HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Observação: nenhum download ou instalação é necessário!

Exemplo

 <!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>

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<h1>Bootstrap icon library</h1>

<p>Some Bootstrap icons:</p>
<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>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Ícones do Google

Para usar os ícones do Google, adicione a seguinte linha dentro da seção <head> da sua página HTML:

Observação: nenhum download ou instalação é necessário!

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>

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<h1>Google icon library</h1>

<p>Some Google icons:</p>
<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>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Para obter uma lista completa de todos os ícones, visite nosso Tutorial de ícones.