Como coloco o ícone antes do nome do cargo?

por Anjel 12.04.23 3:18

Detalhes da questão

Endereço do fórum: https://californiawhilshire.forumeiros.com
Versão do fórum: AwesomeBB

Descrição

Queria saber se tem como eu colocar o ícone antes do nome do grupo/cargo

https://i.servimg.com/u/f88/20/49/07/26/screen12.png

por **Fraise** 12.04.23 19:12

Olá @Anjel,

Siga o tutorial abaixo:
> https://ajuda.forumeiros.com/t106347-

Cumprimentos,
Fraise.

por Anjel 12.04.23 22:07

Fraise escreveu:Olá @Anjel,

Siga o tutorial abaixo:
> https://ajuda.forumeiros.com/t106347-

Cumprimentos,
Fraise.

Sem sucesso

por **Fraise** 13.04.23 23:52

Olá @Anjel,

Efetuei o teste no seu fórum e está funcional.
Vamos por passos:

Aceda a Painel administrativo Visualização Templates Geral e no template overall_header clique no ícone Editar

. Logo abaixo da tag <head> adicione o seguinte código:

Código:: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Salve e publique o template voltando à página anterior e publicando o template editado clicando no ícone

.

Agora aceda a Painel administrativo Visualização Cores Folha de estilos CSS e vamos começar por adicionar este código que vai adicionar um ícone ao seu grupo "Fundador".

Código:: a.gensmall[style="color: #F000A4"]:before { content: '\f004'; font-family: 'fontawesome'; }

Note que:
Para os restantes grupo, deve adicionar a cor correspondente ao grupo:

a.gensmall[style="color: #COR"]:before

Para ver todos os ícones disponiveis aceda ao seguinte site:
https://astronautweb.co/snippet/font-awesome/

Alguma questão estarei ao seu dispor. Muito feliz

Cumprimentos,
Fraise.

por Anjel 14.04.23 2:02

Fraise escreveu:Olá @Anjel,

Efetuei o teste no seu fórum e está funcional.
Vamos por passos:

Aceda a Painel administrativo Visualização Templates Geral e no template overall_header clique no ícone . Logo abaixo da tag <head> adicione o seguinte código:
Código:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Salve e publique o template voltando à página anterior e publicando o template editado clicando no ícone .

Agora aceda a Painel administrativo Visualização Cores Folha de estilos CSS e vamos começar por adicionar este código que vai adicionar um ícone ao seu grupo "Fundador".
Código:
a.gensmall[style="color: #F000A4"]:before { content: '\f004'; font-family: 'fontawesome'; }

Note que:
Para os restantes grupo, deve adicionar a cor correspondente ao grupo:
a.gensmall[style="color: #COR"]:before
Para ver todos os ícones disponiveis aceda ao seguinte site:
https://astronautweb.co/snippet/font-awesome/

Alguma questão estarei ao seu dispor.

Cumprimentos,
Fraise.

O site inserido acima para a coleta dos ícones deu erro.

Cumprimentos,

Como coloco o ícone antes do nome do cargo? Screen14

Como mostro abaixo o ícone não estão carregando!

por **Fraise** 14.04.23 14:12

Olá,

Publicou o seu template?

Cumprimentos,
Fraise.

por Anjel 14.04.23 19:08

Agora funcionou! Como que eu posso estar colocando um espaço entre o ícone e o grupo?

por **Sleep** 14.04.23 20:00

Anjel escreveu:Agora funcionou! Como que eu posso estar colocando um espaço entre o ícone e o grupo?

Olá @Anjel,

Substitua no seu CSS:

Código:: a.gensmall[style="color: #F000A4"]:before { content: '\f004 '; font-family: 'fontawesome'; margin-right: 4px; }

Atenciosamente,
Sleep.

por Anjel 14.04.23 21:09

Essa código está somente nos grupos. Teria como fazer um para aplicar ao grupo e ao usuário que pertence o grupo?

por **Fraise** 14.04.23 22:25

Olá @Anjel,

Troque o seu código CSS pelo seguinte:

Código:: a.gensmall[style="color: #F000A4"]:before, a[href^="/u"] span[style="color:#F000A4"]::before { content: '\f004 '; font-family: 'fontawesome'; padding: 4px; }

Cumprimentos,
Fraise.

por Anjel 14.04.23 22:37

Obrigado fraise e sleep. Estão no meu heart

por **Sleep** 14.04.23 23:01

Tópico resolvido

Movido para "Questões resolvidas".

Como coloco o ícone antes do nome do cargo?