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

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Principal Contribuidor
  • 0

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

Mensagem por Shek 26.12.15 13:46

[TUTORIAL] Instalação do Font Awesome no fórum New_ic10 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


- 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

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.


- 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").

[TUTORIAL] Instalação do Font Awesome no fórum Css11
[TUTORIAL] Instalação do Font Awesome no fórum 110111Seta 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.
[TUTORIAL] Instalação do Font Awesome no fórum 110210Seta 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).
[TUTORIAL] Instalação do Font Awesome no fórum 110310Seta 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.
[TUTORIAL] Instalação do Font Awesome no fórum 110410Seta 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.


- 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:
[TUTORIAL] Instalação do Font Awesome no fórum ReNdsI8

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

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

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


[TUTORIAL] Instalação do Font Awesome no fórum Questi11 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 16:16, editado 1 vez(es)
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

[TUTORIAL] Instalação do Font Awesome no fórum Empty Vídeo tutorial - Cana TV Forumeiros no Youtube #Forumeiros

Mensagem por Shek 08.12.16 15:46

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
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos