Fórum | tutoriais mais recente desenvolvimento web
 

Icons Tutorial



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 .