n4zun n4zun  • 05.05.18 13:07

「tutorial」 Font Awesome Empty 「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:
Spoiler:

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:

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:

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:

Até o próx. :)

pedxz pedxz  • 05.05.18 15:25

Super administradorMembro da Equipa

「tutorial」 Font Awesome Empty Re: 「tutorial」 Font Awesome 05.05.18 15:25

Depois dá para usar um selector para adicionar os icons ( font awesome), por exemplo:
Código:
p::before {
     font-family: FontAwesome;
     content: '\f044';
}
é só um extra, nós usamos aqui do ppf do editor ou dos botões de edição/remoção/citação do comentário.

Bom tutorial!
Obrigado pela partilha/explicação :D

n4zun n4zun  • 05.05.18 16:09

「tutorial」 Font Awesome Empty Re: 「tutorial」 Font Awesome 05.05.18 16:09

pedxz escreveu:Depois dá para usar um selector para adicionar os icons ( font awesome), por exemplo:
Código:
p::before {
     font-family: FontAwesome;
     content: '\f044';
}
é só um extra, nós usamos aqui do ppf do editor ou dos botões de edição/remoção/citação do comentário.

Bom tutorial!
Obrigado pela partilha/explicação :D
Excelente, não sabia dessa informação! Genial.

pedxz pedxz  • 05.05.18 17:10

Super administradorMembro da Equipa

「tutorial」 Font Awesome Empty Re: 「tutorial」 Font Awesome 05.05.18 17:10

Para saberem mais sobre os selectors,
Leiam: Selectors ::after/::before.

____

@n4zun
Botei uma tag no tópico - Tutorial para ser mais fácil identificar :p
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.