Arquivo Discussoes de Programacao e Tecnologia 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.
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
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>
Coloca o icone numa tag i antes do h4 ou então define o font-weight para normal no css
Coloquei font-weight normal e não funcionou.
Já a tag i, eu não posso separar ele para fora da
O ícone fica ao lado do texto.
Você declarou o seu css depois do arquivo do font-awesome?
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
}
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;
}
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.
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 
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 
Abraços!