Ícones da FontAwesome na descrição das categorias

Detalhes da questão

Endereço do fórum: http://Etcetera.forumotion.com
Versão do fórum: phpBB3

Descrição

íconOlá, como adicionar o ícone do fórum com fonte awersome? meu fórum é phpbb3. aqui você vê o exemplo do ícone do fórum abaixo

Olá,
Adicione este código ao seu CSS:

Código:

.forum-description [class^="fa fa-"] {
    font-family: "FontAwesome";
    font-size: 40px !important; /* TAMANHO */
    color: green; /* COR EM HEXADECIMAL / INGLÊS */
}

Nota: Para personalizar o código, leia as anotações dentro do código!

Depois, adicione este código na descrição das categorias:

Código:

<em class="fa fa-ícone"></em>

Mude ícone pelo respetivo ícone da FontAwesome!
Cordialmente,
Roger123

Olá, acabei de adicionar código css para ele, mas não está funcionando. Alguma outra idéia ou truques?

Roger123 escreveu:
Depois, adicione este código na descrição das categorias:

Código:

<em class="fa fa-ícone"></em>

Mude ícone pelo respetivo ícone da FontAwesome!

Seguiu este passo? O código funciona perfeitamente!

Eu adicionei os dois códigos, mas ainda não está funcionando. o que você quis ler para anotar e alterar o ícone com fontawersome? Você poderia me explicar claramente?

1 Troque o código css por este:

Código:


        .forum-description [class^="fa fa-"], .forum-description [class^="fab fa-"], .forum-description [class^="fas fa-"]  {
            font-family: "Font Awesome 5 Free";
            font-size: 40px !important; /* TAMANHO */
            color: green; /* COR EM HEXADECIMAL / INGLÊS */
        }

2 Para adicionar os ícones, adicione este código em Painel de Controle Geral Fórum Categorias e fóruns Selecione um fórum Descrição:

Código:

<em class="fa fa-icone"></em>

fa-icone corresponde ao ícone da FontAwesome pretendido! Se fosse o ícone check ficaria fa fa-check! Ou seja, troque icone pelo ícone da FontAwesome que quiser.

Cordialmente,
Roger123

Olá, está mostrando resultado diferente. por favor verifique o fórum agora

Não se importa de colocar uma breve descrição numa categoria, para eu puder testar?

Olá, posso enviar uma conta de teste para verificar, por favor? ícones estão funcionando bem, mas ele está trabalhando em um lugar errado

Olá,

Adiciona esse código na sua Folha de estilo CSS

Código:

em.fa.fa-pen {
    position: absolute;
    margin-left: -33px;
}
em.fa.fa-bullhorn {
    position: absolute;
    margin-left: -33px;
}
em.fa.fa-info {
    position: absolute;
    margin-left: -33px;
}
em.fa.fa-users {
    position: absolute;
    margin-left: -33px;
}
.fa, .far, .fas {
    font-size: 40px;
}

Até mais!

Olá, mas os ícones são muito pequenos. Eu quero torná-lo mais grande. Também quero mudar a cor dos ícones. Eu quero ícones de cor azul como acima sreenshot em vez de ícones pretos

Olá,

Altere o código que passei por esse

Código:

em.fa.fa-pen {
    margin-left: -39px;
    position: absolute;
    margin-top: -12px;
}

em.fa.fa-pen {
    margin-left: -39px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-bullhorn {
    margin-left: -39px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-info {
    margin-left: -39px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-users {
    margin-left: -39px;
    position: absolute;
    margin-top: -12px;
}
.fa, .far, .fas {
    font-size: 31px;
    color: #166a94;
}

Até mais!

mas ainda é muito pequeno. precisa torná-lo mais grande. eu coloquei tamanho da fonte: 100px; mas ainda não há mudança nos ícones

Olá,

Substitua o código por esse

Código:

em.fa.fa-pen {
    margin-left: -46px;
    position: absolute;
    margin-top: -12px;
}
 
em.fa.fa-pen {
    margin-left: -46px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-bullhorn {
    margin-left: -46px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-info {
    margin-left: -46px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-users {
    margin-left: -46px;
    position: absolute;
    margin-top: -12px;
}
.fa, .far, .fas {
    color: #166a94;
    font-size: 41px!important;
}

Até mais!

agora verifique o fórum. por favor

Qual é o problema encontrado?

resolvido e por favor arquivar