[RESOLVIDO] Font awesome deixando texto em negrito

Front-end
#1

Estou fazendo o update de alguns icones em um site, porém ao implementar alguns dos icones free do font awesome, eles estão deixando todo o texto negrito. Alguém saberia como resolver isso?

Isso acontece apenas quando utilizo os icones solid. Com regular o texto depois do icone fica normal.

#2

O font-awesome esta deixando o texto em negrito? Como esta o seu código?

Eu nunca tive problemas fazendo assim:

<span><i class="fa fa-user"></i>Texto aqui</span>

Deixando o texto depois da tag i

Eu já tive problemas de negrito com o font-awesome por causa de um framework que nos fornecia os icones e por padrão eles eram bold, mas ai era só trocar para font-weight: normal que ja estava ok

1 curtida
#3

Estou utilizando ela dentro do 

  •                     <li class="services__item fas fa-laptop-code">
                    <h4>Título</h4>
                    <p><i><b><a href="http://www.google.com">2019</a></b> -  Rio de Janeiro</i><br>

                        Texto descritivo que esta ficando em negrito.</p>
                </li>
    • #4

    Coloca o icone numa tag i antes do h4 ou então define o font-weight para normal no css

    1 curtida
    #5

    Coloquei font-weight normal e não funcionou.
    Já a tag i, eu não posso separar ele para fora da

  • porque é um efeito da página.

    O ícone fica ao lado do texto.
    Captura%20de%20tela%20em%202019-04-02%2022-15-41

    • #6

    Você declarou o seu css depois do arquivo do font-awesome?

    1 curtida
    #7

    As únicas declarações para ele foram essas

    .services__item {
    margin-bottom: 50px
}

.services__item h4 {
    margin-left: 80px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700
}

.services__item p {
    margin-left: 80px
}

.services__item:before {
    margin-top: 30px;
    float: left;
    color: #bdc3c7;
    font-size: 60px;
    -webkit-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}

.services__item:hover:before {
    color: #ffa726
}
    #8

    Não é a font, tamanho ou cor do parágrafo que esta dando uma sensação de negrito? Pois o Drogarias Nações esta nitidamente em negrito, já o restante do parágrafo não sei… De qualquer forma testa o código abaixo:

    li.services__item p {
    font-weight: normal !important;
}
    1 curtida
    #9

    O negrito abre e fecha sozinho, isso só ocorre quando uso as fontes awesome ‘‘fas’’ invés das regular ‘‘far’’. Eu até estava mudando para outro icone para ver se resolvia.

    Captura%20de%20tela%20em%202019-04-02%2023-45-08
    Captura de tela em 2019-04-02 23-45-08.png752×128 17.3 KB

    Testei o treco do seu código e funcionou certinho!!! Tudo ficou normal agora, sem negrito a cada vez que uso um icone solid da awesome. Resolveu o problema, muito obrigado :sweat_smile:

    #10

    Show!

    A hierarquia do seu css deve estar assim (Com font-awesome depois):

    <link ... src="meus-estilos.css">
<link ... src="font-awesome.css">

    Deixa assim (Inverte para não precisar utilizar o !important, pois o css do font-awesome estaria sobrescrevendo o seu):

    <link ... src="font-awesome.css">
<link ... src="meus-estilos.css">

    Para entender mais sobre o !important você pode dar uma lida nesses dois links:

    https://zenorocha.com/css-important/

    Como o seu problema foi resolvido, irei fechar o tópico.
    Caso tenha algum outro problema ou dúvida, não hesite em criar um novo :+1:
    Abraços!

    1 curtida
    #11