Bug nos ícones elegantes

Minha questão:

Eu adicionei o ícone, mas olha como fica o ícone no chatbox (http://prntscr.com/43klux)
como arrumo?
desde já agradeço.

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Não é bug, vou explicar o que está acontecendo:
como mostra na imagem o ícone aparece normalmente nas outras áreas, 
Porem no Chatbox ele não vai reconhecer, pelo fato de ser uma pagina externa, diferente das outras paginas que são internas.
O chatbox abre dentro de um iframe, o problema é que essa pagina não tem a opção de edita-lá, sendo assim ficamos impossibilitados de adicionarmos manualmente qualquer investimento JS.

A solução mais simples que encontro para isso é você criar os seus próprios ícones e adiciona-los através de puro CSS.
Por exemplo:
No Chatbox:

Código:

#chatbox a span[style="color:#F50000"] {
background: url(ICONE_DA_IMAGEM_A_SER_USADA) no-repeat;
}

Em color:#F50000 (é a cor em hexadecimal, que peguei do seu fórum, do grupo administrador)
Você precisa repetir esse css mudando apenas a cor exata do grupo e o endereço do ícone da imagem.

Até.

Olhe como ficou, http://prntscr.com/43nefz
Qual css revolve ?

Código:

#chatbox a span[style="color:#F50000"] {
background: url(http://i.imgur.com/huDiJNb.png) no-repeat;


Amigo, sempre que abrir um { você tem que fecha-lo! }

Código:


#chatbox a span[style="color:#F50000"] {
background: url(http://i.imgur.com/huDiJNb.png) no-repeat;
}


Encurte seu CSS: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Este aqui é o mesmo passado pelo DeeW., porém com um padding, pra separar o nome da imagem:

Código:

#chatbox a span[style="color:#F50000"] {
background: url(http://i.imgur.com/huDiJNb.png) no-repeat;
padding: 0 0 3px 18px;
}

Até mais!