Personalizar ícones das categorias

[Convidado]

Detalhes da questão

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

Descrição

Eu adicionei adicionado ícone fontawersome fórum com a ajuda de Roger123 e Aquiles. npw só estou querendo adicionar cor de fundo do círculo como este abaixo da tela.

[Convidado]

Olá,
Adicione este código antes do código <em class="fa fa-XX"></em> (na descrição das categorias):

Código:

<style>border: 1px solid blue;
border-radius: 75px;</style>

Cordialmente,
Roger123

[Convidado]

Olá, o código não está funcionando. alguma outra ideia para fazer o fundo do círculo?

[Roevs]

Olá,

Adiciona esse código em sua Folha de estilo CSS

Código:

em.fa.fa-pen {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}

Título alterado para "Personalizar ícones das categorias"

Até mais!

[Convidado]

Olá, eu adicionei o código CSS, mas ainda não está funcionando em tudo.

[Roevs]

Olá,

Substitua o código por esse

Código:

em.fa.fa-pen {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-bullhorn {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-info {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-users {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}

Até mais!

[Convidado]

Código:

em.fa.fa-pen {
    margin-left: -50px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-bullhorn {
    margin-left: -50px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-info {
    margin-left: -50px;
    position: absolute;
    margin-top: -12px;
}
em.fa.fa-users {
    margin-left: -50px;
    position: absolute;
    margin-top: -12px;
}
.fa, .far, .fas {
    color: #166a94;
    font-size: 30px!important;
}
 em.fa.fa-pen {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-bullhorn {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-info {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-users {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
 

Não está funcionando. Eu tenho esse código css para isso

[Roevs]

Olá,

Substitua por esse

Código:

.fa, .far, .fas {
    color: #166a94;
    font-size: 30px!important;
}
 em.fa.fa-pen {
    margin-left: -50px;
    margin-top: -15px;
    position: absolute;
    background: #ef7272c2;
    padding: 9px;
    border-radius: 100px;
}
em.fa.fa-bullhorn {
    background: #ef7272c2;
    border-radius: 100px;
    margin-left: -51px;
    margin-top: -17px;
    padding: 9px;
    position: absolute;
    font-size: 28px!important;
}
em.fa.fa-info {
    background: #937fffc2;
    border-radius: 100px;
    margin-left: -50px;
    margin-top: -21px;
    padding: 9px;
    width: 43px;
    position: absolute;
    font-size: 28px!important;
    height: 42px;
}
.fa-info:before {
    margin-left: 7px!important;
}
em.fa.fa-users {
    background: #ef7272c2;
    border-radius: 100px;
    margin-left: -50px;
    margin-top: -18px;
    padding: 7px;
    position: absolute;
    width: 44px;
    font-size: 27px!important;
}
 

Até mais!

[Convidado]

Não está funcionando. o que há de errado lá

[Roevs]

Olá,

Entrei em seu fórum e percebi que o código está funcionando perfeitamente, poderia ser mais específico sobre o que não está funcionando?

http://prntscr.com/n72jyy

Até mais!

[Convidado]

Olá, obrigado resolvido. foi cache

[Roevs]

Questão resolvida Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.