[TUTORIAL] Instalação do Font Awesome no fórum
Página 1 de 1
[TUTORIAL] Instalação do Font Awesome no fórum
![]() | Tópicos & Mensagens |
Introdução
O "Font Awesome" é na verdade um pequeno pacote de ícones criados com o mais simples código CSS, para que seja substituído as imagens pelos ícones do serviço. Com Font Awesome, você pode determinar ícones incríveis em CSS, e se for especialista, criar o seu próprio ícone.--> Tutoriais, dicas e astúcias <--
Instalação do Font Awesome no fórum
1º - Uso do Font Awesome:
Com as diversas técnicas especiais aplicadas no mundo do webdesign hoje em dia, o Font Awesome facilita muito o trabalho de criadores de sites. Uma de suas vantagens, é que a aplicação é fácil e o seu uso é prático. Além do mais, ao usar os ícones do Font Awesome em seu fórum, a velocidade será muito superior do que se usasse ícones em forma de imagens, pois, em poucas palavras, os ícones são criados com CSS.
![[TUTORIAL] Instalação do Font Awesome no fórum GikR2HJ](https://i.imgur.com/gikR2HJ.png)
Ao acessar o site https://fortawesome.github.io/Font-Awesome/ você poderá baixar a última versão dos ícones lançados pelo serviço. Os ícones funcionam a partir de uma TAG HTML, logo, a baliza "META" do CSS de ligação, precisa estar direcionada ao arquivo CSS do site, ou se preferir, poderá optar por hospedá-lo.
2º - Aplicação do recurso:
Existem quatro formas conhecidas para realizar com sucesso essa aplicação, isto é, estamos descartando a ideia do uso do Javascript, que não deixa de ser um recurso para incluir dentro do HTML a meta do Font Awesome.
- Adicionar via Painel de Controle >> Geral >> Promoção do fórum >> Motores de busca >> Balizas adicionais (em caso de dúvidas, leia este FAQ: Gerenciamento das balizas adicionais);
- Adicionar via Painel de Controle >> Geral >> Configuração >> Descrição do site;
- Adicionar via Painel de Controle >> Visualização >> Templates >> Geral >> overall_header;
- Usando o @import url("fonts.css").
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Caso você queira usar o 1º caso, basta incluir este código na descrição do site:
- Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Se deseja o terceiro recurso, basta adicionar o @import:
- Código:
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css") print;
3º - Uso dos ícones em HTML e BBcode:
Caso seu fórum aceite HTML nas mensagens, você pode seguir as dicas que o próprio site oferece, mas, se preferir, poderá apenas incluir o HTML composto por uma class:
O nome NOME_ICONE corresponde ao nome do ícone que deseja aplicar ao itálico. Por exemplo:<i class="fa fa-NOME_ICONE"></i> NOVO TÓPICO
- Código:
<i class="fa fa-camera-retro"></i> fa-camera-retro
Resultado:
![[TUTORIAL] Instalação do Font Awesome no fórum ReNdsI8](https://i.imgur.com/ReNdsI8.png)
Caso queira aumentar o tamanho dos ícones:
- Código:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
![[TUTORIAL] Instalação do Font Awesome no fórum 27HEmRm](https://i.imgur.com/27HEmRm.png)
Caso seu fórum só use o BBcode, será preciso usar outro método! O único conhecido e mais viável é as tabelas. É nas tabelas, que você poderá incluir um CLASS. Segue o exemplo:
- Código:
[table][tr][td class="fa fa-firefox fa-5x"][/td][td]Conteúdo[/td][/tr][/table]
Perguntas & Respostas
- Por que devo usar o Font Awesome?
O "Font Awesome" facilita a navegação do usuário, pois, ao invés de usar pequenas imagens que podem, por ventura, parar de funcionar devido ao servidor de hospedagem, os ícones se mantém pelo uso do CSS mais puro, sendo executado rapidamente. Além do mais, se você preferir baixar o Font Awesome e hospedá-lo em um servidor externo, a atualização dos ícones e recursos só depende de você! - Quantos ícones estão disponíveis?
Existem milhares de ícones que podem ser usados. Para conhecê-los, de acordo com a nova versão lançada pelo site, basta acessar http://fortawesome.github.io/Font-Awesome/icons/ ! - Font Awesome funciona para Mobile?
O uso do Font Awesome para a versão móvel ainda não é confirmado pelos desenvolvedores, mas, sim, você pode usá-los em seu modelo de template para dispositivos Móveis.
© Fórum dos Fóruns
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Instalação do Font Awesome no fórum |
Última edição por Shek Crowley em 10.12.16 14:16, editado 1 vez(es)
Vídeo tutorial - Cana TV Forumeiros no Youtube #Forumeiros
Vídeo tutorial :: Canal TV Forumeiros
Ainda tem dúvidas? Consulte nosso vídeo tutorial no canal TV Forumeiros e aprenda as técnicas especiais com poucas palavras!Assista em HD: Disponível em 720p HD
Link: https://youtu.be/wo0M4TnbIrw
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Instalação e uso do Font awesome
» Instalação de Font Awesome
» Font Awesome
» Font awesome no menu
» Utilização de Font Awesome
» Instalação de Font Awesome
» Font Awesome
» Font awesome no menu
» Utilização de Font Awesome
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos