Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
Usando font awesome nos nicks dos usuários
Olá amigos, lhes trago um tutorial ensinando a inserir ícones bem elegantes aos nomes dos nossos usuários, é bem simples na verdade..
Para isso vamos usar um recurso que eu já ensinei como usar aqui no fórum, que é o font awesome!
Código CSS
Primeiro vamos usar um código CSS para selecionar o grupo desejado através da cor do mesmo, veja como:
Esse é o código básico a ser usado, basta você colocar a cor do grupo no código e o código do ícone que eu vou deixar no final do tutorial..
Caso queira que o ícone fique depois do nick e não antes, basta trocar a propriedade :before por :after
Instalação
Agora para que o código funcione perfeitamente nós precisamos instalar a font-awesome no fórum, você pode ver este tutorial para mais informações.. Resumindo para o nosso caso, é só você inserir esta tag
No head do seu documento, existem várias maneiras de faze-lo, seja editando o template overall_header
ou então usando esse código que criei:
Javascript
Basta inserir o mesmo na gestão dos seus códigos Javascript e deixar o investimento em todas as páginas..
Lista de ícones
Segue uma lista completa dos códigos de cada ícone da fonte para que possamos usar nos nomes dos usuários..
http://astronautweb.co/snippet/font-awesome/
Olá amigos, lhes trago um tutorial ensinando a inserir ícones bem elegantes aos nomes dos nossos usuários, é bem simples na verdade..
Para isso vamos usar um recurso que eu já ensinei como usar aqui no fórum, que é o font awesome!
Código CSS
Primeiro vamos usar um código CSS para selecionar o grupo desejado através da cor do mesmo, veja como:
- Código:
span[style="color:#COR DO GRUPO"]:before {
content: "\CÓDIGO DO ÍCONE";
font-family: 'FontAwesome';
padding: 0 4px;
}
Esse é o código básico a ser usado, basta você colocar a cor do grupo no código e o código do ícone que eu vou deixar no final do tutorial..
Caso queira que o ícone fique depois do nick e não antes, basta trocar a propriedade :before por :after
Instalação
Agora para que o código funcione perfeitamente nós precisamos instalar a font-awesome no fórum, você pode ver este tutorial para mais informações.. Resumindo para o nosso caso, é só você inserir esta tag
- Código:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
No head do seu documento, existem várias maneiras de faze-lo, seja editando o template overall_header
ou então usando esse código que criei:
Javascript
- Código:
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
headID.appendChild(cssNode);
Basta inserir o mesmo na gestão dos seus códigos Javascript e deixar o investimento em todas as páginas..
Lista de ícones
Segue uma lista completa dos códigos de cada ícone da fonte para que possamos usar nos nomes dos usuários..
http://astronautweb.co/snippet/font-awesome/
