Usando FontAwesome em seu fórum phpbb 3.1.x

Mensagem por **LucasLV** » 11 Nov 2016, 07:13

Se você pretende modificar seu estilo, deixá-lo mais visualmente atraente, ou está desenvolvendo um estilo e pretende utilizar os ícones do FontAwesome, nesse tutorial ensinarei como fazê-lo.

Introduzindo em seu fórum phpbb
É muito simples. Primeiro você deve acessar o site do F.A. e baixar o pacote oferecido aqui.

Feito isso, você deve descompactar as duas pastas que baixou para seu diretório theme do estilo. As duas pastas são:

css
fonts

Meio caminho andado. Agora só precisamos referenciar os arquivos de estilo.

Abra seudiretorio/styles/seuestilo/template/overall_header.html
Dentro da tag <head> cole o seguinte código:

Código: Selecionar todos

 <link rel="stylesheet" href="{T_THEME_PATH}/css/font-awesome.min.css">

Utilizando os ícones

Todos os ícones, seus nomes, classes e unicodes você encontra clicando aqui.

Pra utilizar é muito simples. Você só precisa usar as classes fa e fa- junto do nome do ícone e dentro da tag <i>, veja:

Código: Selecionar todos

<i class="fa fa-circle-thin" aria-hidden="true"></i>

Esse é um ícone de círculo. No próprio site você encontra esse HTML pronto pra cada ícone.

Usando em pseudo-elementos
É possível também usar os pseudo-elementos e posicionar seu ícone de maneira diferente diretamente do CSS usando os unicodes. Veja:

Código: Selecionar todos

<a class="antes" href="http://suportephpbb.com.br">Página do Suporte</a>
<br>

<a class="depois" href="http://suportephpbb.com.br">Fóruns</a>

Código: Selecionar todos

a.antes:before {
content: "\f005";
font-family: FontAwesome;
}
a.depois:after {
content: "\f2b9";
font-family: FontAwesome;
}

Nesse exemplo, queremos que seja exibido o ícone de estrela antes do elemento <a class="antes"> e o ícone de aderess-book depois do elemento <a class="depois"> e pra isso usamos o after e o before.
Imagem

Você também pode fazer ícones animados, coloridos e etc., mas isso é assunto pra outro tutorial.