Adicionar icones elegantes a grupos especificos do fórum

Relembrando a primeira mensagem :

Nome do Arquivo: Adicionar icones elegantes a grupos especificos do fórum
Autor: Wagner
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores

Olá, vim disponibilizar para todos um tutorial para inserirmos ícones elegantes aos nicks de usuários de grupos específicos do fórum.
O primeiro passo a ser tomado é adicionar este javascript com investimento em todas as páginas:


Feito isso já estamos aptos a aplicar os efeitos..

O primeiro a se fazer é acessar essa página e olhar os ícones disponíveis, tem uma centena de ícones a escolha..
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O que nos interessa aqui é aquele código que começa com \f é seguido de algum número..

Escolha seu ícone e vamos adicionar o seguinte código CSS para o nossa folha de estilo:


Onde devemos preencher as informações corretamente, no caso mudar a cor do grupo para o grupo desejado e o código do ícone que está disponível no site que eu passei.

Caso deseje inserir o ícone depois do nick do usuário e não antes, basta trocar o :before por :after..

Vale a pena ressaltar que o CSS passado faz a busca de qualquer elemento que esteja em um span e contenha o atributo color na dor do grupo que você criou..

É isso ai, espero que seja útil! Até a próxima!

Excelente tutorial, #reputado!

Comentando para ver

vou olhar mais vlw por compartilhar

that is awsome

vejamos...

Gostei, realmente muito bom.

Muito bom, até mais.
Parabéns.

its good. thanks for this

Muito bom, dá um tom de elegância 2

Muito bom parabéns, só um pouco confuso!

Ótimo código!
Reputado.

very very nice joob...!

Muito bom, obrigado! =)

Legal, vou usar. Espero que seja funcional.

Gostei do tutorial.

Testando um teste testoso.

Olá,

Não funcionou no chatbox,

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

HeroWaar,

é parece seer bem util irei usar!!

Muito legal!
Funcionou perfeitamente aqui!

Muito bom o tópico, antigo mas sempre revolve os problemas ;. heheh

Excelente, Código de alta qualidade

Excelente Código, valeu! @Wagner

Muito bom esse tutorial, adicionado no meu fórum