1

Pessoal estou usando fontawesome 5 e alguns icones não aparecem quando eu chamo eles pelo css segue meu código e print da tela de como o icone está sendo exibido. inserir a descrição da imagem aqui

HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="col-lg-2 offset-lg-2 align-self-center">
    <p class="phone">Ligue para nós<br><span>11 97032-5884</span></p>
</div>

SCSS:

.phone{
    position: relative;
    color: $white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 17px;
    &:after{
      content: '\f232';
      font-family: "Font Awesome 5 Free";
      font-weight: normal;
      font-style: normal;
      position: absolute;
      left: -35px;
      top: 50%;
      font-size: 25px;
      margin-top: -7.5px;
      color: $white;
    }
    span{
      font-weight: 700;
      font-size: 20px;
    }
  }

1 Resposta 1

3

Seu font-family está errado! Vcusou a Font Awesome 5 Free mas deveria ser a Font Awesome 5 Brands

body {
  background-color: black;
  color: #fff;
}
.phone {
  position: relative;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 17px;
  margin-left: 50px;
}

.phone:after {
  content: "\f232";
  font-family: "Font Awesome 5 Brands";
  font-weight: normal;
  font-style: normal;
  position: absolute;
  left: -35px;
  top: 50%;
  font-size: 25px;
  margin-top: -7.5px;
  color: white;
}

.phone span {
  font-weight: 700;
  font-size: 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">

<div class="col-lg-2 offset-lg-2 align-self-center">
  <p class="phone">Ligue para nós<br><span>11 97032-5884</span></p>
</div>

Veja que na própria documentação indica o uso da Brands Style

inserir a descrição da imagem aqui

7
  • Por que tem que usar o Font Awesome 5 Brands? Commented 8/05/2019 às 15:07
  • @VictorCarnaval editei a resposta e inclui uma imagem que vai te esclarecer
    – hugocsl
    Commented 8/05/2019 às 15:10
  • É que nunca usei dessa forma o font awesome... Sempre utilizei as classes em elementos de ícone. Além do mais não consegui nem achar a documentação da versão 5.0.10 que você encontrou kkk Commented 8/05/2019 às 15:17
  • @VictorCarnaval aqui está a documentação de como usar o FA em pseudo-elementos, que nesse caso o indicado é que use o FA.css e não o .JS se não me engano. Agora olhe essas imagens, elas usariam a family-free, e vc ainda tem que ver que uma é para font-wigth 900 e outra para 400, dependendo do preenchimento do ícone prntscr.com/nm2aqv
    – hugocsl
    Commented 8/05/2019 às 15:21
  • 1
    Obrigado @hugocsl. Commented 8/05/2019 às 15:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .