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
Meio caminho andado. Agora só precisamos referenciar os arquivos de estilo.
Abra
Dentro da tag
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
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:
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
Você também pode fazer ícones animados, coloridos e etc., mas isso é assunto pra outro tutorial.
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:cssfontsMeio caminho andado. Agora só precisamos referenciar os arquivos de estilo.
Abra
seudiretorio/styles/seuestilo/template/overall_header.htmlDentro da tag
<head> cole o seguinte código:Código: Selecionar todos
<link rel="stylesheet" href="{T_THEME_PATH}/css/font-awesome.min.css"> 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>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;
}
after e o before.
Você também pode fazer ícones animados, coloridos e etc., mas isso é assunto pra outro tutorial.