Como Adicionar Ícones

Para inserir um ícone, adicione o nome da classe de ícone a qualquer elemento HTML embutido. Os elementos <i> e <span> 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.).

Font Awesome 5 Ícones

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

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

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>

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

</body>
</html>

Font Awesome 4 Ícones

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

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

html

<!DOCTYPE html>
<html>
<head>
<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 Bootstrap

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

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

html

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

Google Icons

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

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

html

<!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">attach_file</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Agora você está pronto para adicionar ícones aos seus projetos de forma fácil e rápida! Use a biblioteca de ícones que melhor se adequa às suas necessidades e customize-os com CSS para garantir que se integrem perfeitamente ao design do seu site.

Era isso que estava procurando?
SimNão

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Close Search Window