1

Olá!

criei um menu com pseudo-elementos para colocar ícones do Font Awesome. Acontece que alguns ícones renderizam, outros aparecem somente como um quadradinho. O que pode ser?

CSS:

.phoen_nav_tab li {
    border-bottom: 1px solid #dddd;
    width: 100%;
    margin-bottom: 7px;
    padding-bottom: 7px;
}

.phoen_nav_tab :first-child::before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 12px;
    content: "\f2d2";
}

.phoen_nav_tab :nth-child(2)::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-size: 12px;
    content: "\f03a";
}

.phoen_nav_tab :nth-child(3)::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-size: 12px;
    content: "\f17o";
}

.phoen_nav_tab :nth-child(4)::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-size: 12px;
    content: "\f015";
}

.phoen_nav_tab :last-child::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-size: 12px;
    content: "\f084";
}

HTML:

<nav class="woocommerce-MyAccount-navigation phoen_custom_account">
  <ul class="phoen_nav_tab">
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link-- is-active">
       <a href="https://ouipetite.com.br/minha-conta//">Dashboard</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
      <a href="https://ouipetite.com.br/minha-conta/orders/">My Orders</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
       <a href="https://ouipetite.com.br/minha-conta/edit-account/">Edit Account</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
      <a href="https://ouipetite.com.br/minha-conta/edit-address/">Edit Address</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
      <a href="https://ouipetite.com.br/minha-conta/customer-logout/?_wpnonce=3bacf0f819">Logout</a>
    </li>
  </ul>
</nav>

1 Resposta 1

0

O "problema" é que nem todas as fontes estão com o font-weight correto. Veja essa dica para vc entender como funciona.

Quando vc pesquisa por um ícone e entra nele a Documentação indica quais opções vc tem disponível, se tem fw:400 ou fw:900 (regular ou solid)

Repare que esse ícone por exemplo exite Solid (900) e Regular (400), mas a referência é a mesma f2d2

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Outro exemplo para entender melhor

inserir a descrição da imagem aqui

E aqui seu código corrigido com os font-weight corretos.

OBS: Seu terceiro ícone não usa o Font Awesome 5 Free ele tem que ter o font-family Font Awesome 5 Brands como vc pode ver na documentação https://fontawesome.com/icons/adn?style=brands

inserir a descrição da imagem aqui

.phoen_nav_tab li {
    border-bottom: 1px solid #dddd;
    width: 100%;
    margin-bottom: 7px;
    padding-bottom: 7px;
}

.phoen_nav_tab :first-child::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 400;
    font-size: 12px;
    content: "\f2d2";
}

.phoen_nav_tab :nth-child(2)::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-weight: 900;
    font-size: 12px;
    content: "\f03a";
}

.phoen_nav_tab :nth-child(3)::before {
    font-family: "Font Awesome 5 Brands" !important; 
    font-weight: 400;
    font-size: 12px;
    content: "\f170";
}

.phoen_nav_tab :nth-child(4)::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-weight: 900;
    font-size: 12px;
    content: "\f015";
}

.phoen_nav_tab :last-child::before {
    font-family: "Font Awesome 5 Free" !important; 
    font-weight: 900;
    font-size: 12px;
    content: "\f084";
}
<link rel="stylesheet" type="text/css" media="screen" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />

<nav class="woocommerce-MyAccount-navigation phoen_custom_account">
  <ul class="phoen_nav_tab">
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link-- is-active">
        <a href="https://ouipetite.com.br/minha-conta//">Dashboard</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
      <a href="https://ouipetite.com.br/minha-conta/orders/">My Orders</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
        <a href="https://ouipetite.com.br/minha-conta/edit-account/">Edit Account</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
      <a href="https://ouipetite.com.br/minha-conta/edit-address/">Edit Address</a>
    </li>
    <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
      <a href="https://ouipetite.com.br/minha-conta/customer-logout/?_wpnonce=3bacf0f819">Logout</a>
    </li>
  </ul>
</nav>

2
  • Muito obrigada!!!! Tão simples e eu não fazia ideia!! Commented 6/06/2019 às 18:26
  • @GiuliannaTrivellato sem problemas, fico feliz em ter ajudado!
    – hugocsl
    Commented 6/06/2019 às 18: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 .