n4zun • 05.05.18 13:07
「tutorial」 Font Awesome 05.05.18 13:07
Existem várias maneiras de exibir ícones em seu site. As mais comuns são através da utilização de imagens ou ícones .svg. Porém, estes métodos nem sempre representam a solução mais adequada. Pra isso, criaram fontes compostas exclusivamente de ícones como o FontAwesome. Ele funciona como uma fonte, porém, ao invés de letras, existem ícones.
Isso permite que você altere cores, tamanhos, planos de fundo e realize qualquer personalização possível com um texto plano. Pra instalar, siga os passos:
1. Acesse o site https://fontawesome.com
2. Clique em Download Free
3. Depois, extraia e copie todas pastas presentes no arquivo .zip (scss, less, fonts e css) para a pasta do seu site.
4. Entre as tags <head> do seu site, adicione o seguinte código:
Porém, existe uma outra forma de instalar essa galeria em seu site sem fazer o download do pacote, utilizando a código abaixo:
Pronto! O FontAwesome já está preparado para o seu site. Agora é só adicionar os ícones. Para fazer isso, copie o código do ícone que deseja utilizar diretamente na página de exemplos e o aplique da seguinte maneira:
Para acessar a página de exemplo clique aqui!
Vale lembrar que o tamanho e o estilo do ícone é definido pelo elemento que contém a tag I. Ou seja, se eu criar uma div e definir um tamanho de fonte de 50px dentro dela, o tamanho do ícone será esse. Você também pode adicionar uma classe personalizada para definir o estilo do seu ícone, por exemplo:
Até o próx. :)
Isso permite que você altere cores, tamanhos, planos de fundo e realize qualquer personalização possível com um texto plano. Pra instalar, siga os passos:
1. Acesse o site https://fontawesome.com
2. Clique em Download Free
3. Depois, extraia e copie todas pastas presentes no arquivo .zip (scss, less, fonts e css) para a pasta do seu site.
4. Entre as tags <head> do seu site, adicione o seguinte código:
- Spoiler:
- <link rel="stylesheet" href="css/font-awesome.min.css">
Porém, existe uma outra forma de instalar essa galeria em seu site sem fazer o download do pacote, utilizando a código abaixo:
- Spoiler:
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
Pronto! O FontAwesome já está preparado para o seu site. Agora é só adicionar os ícones. Para fazer isso, copie o código do ícone que deseja utilizar diretamente na página de exemplos e o aplique da seguinte maneira:
- Spoiler:
- <i class="fa fa-bus"></i>
Para acessar a página de exemplo clique aqui!
Vale lembrar que o tamanho e o estilo do ícone é definido pelo elemento que contém a tag I. Ou seja, se eu criar uma div e definir um tamanho de fonte de 50px dentro dela, o tamanho do ícone será esse. Você também pode adicionar uma classe personalizada para definir o estilo do seu ícone, por exemplo:
- Spoiler:
- <style>
.icone{
font-size:500px;
color:red;
margin-left:30px;
}
</style>
<i class="fa fa-bus icone"></i>
Até o próx. :)
