Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Status do servidor
Hoje à(s) 01:39 am por ranzatti

» Como mudar o tamanho do avatar default ? modernbb
Hoje à(s) 12:30 am por BlueJOkeR

» mEU FORUM ESTA COM POBLEMA !
Ontem à(s) 11:18 pm por Xigncode3

» Member List Grande
Ontem à(s) 10:31 pm por ranzatti

» Top Usuário sem funcionar
Ontem à(s) 10:08 pm por iScroll

» Spoiler tópicos
Ontem à(s) 09:55 pm por Luiz

» Bug pelo slide
Ontem à(s) 09:20 pm por Ketholy123

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
187 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 184 Visitantes :: 2 Motores de busca

DespacitoRemix000, weverson lopes, YouTube3

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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

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

  • 0

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

Mensagem por Shek em 26/12/15, 11:46 am

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.


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

Seta 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.
Seta 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).
Seta 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.
Seta 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:

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


Última edição por Shek Crowley em 10/12/16, 02:16 pm, editado 1 vez(es)
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16951
Pontos Ativos : 21272

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif
  • 0

Vídeo tutorial - Cana TV Forumeiros no Youtube #Forumeiros

Mensagem por Shek em 08/12/16, 01:46 pm

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
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16951
Pontos Ativos : 21272

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum