[TUTORIAL] Instalação do Font Awesome no fórum

[Shek]

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.

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.

1. 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);
   
2. Adicionar via Painel de Controle >> Geral >> Configuração >> Descrição do site;
   
3. Adicionar via Painel de Controle >> Visualização >> Templates >> Geral >> overall_header;
   
4. Usando o @import url("fonts.css").

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

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" />

Caso seja o 2º caso, procure em seu template a variável {CSS}, e abaixo dela, cole o mesmo código mencionado acima.
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;

LEMBRE-SE, adicione o import por cima de todo o seu CSS.


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:

<i class="fa fa-NOME_ICONE"></i> NOVO TÓPICO

O nome NOME_ICONE corresponde ao nome do ícone que deseja aplicar ao itálico. Por exemplo:

Código:

<i class="fa fa-camera-retro"></i> fa-camera-retro

Resultado:

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

Quanto maior for o valor fa-x, maior a letra será. Por exemplo: fa-5x

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

[Shek]

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