some Font Awesome icons load, others do not

Question

Hello!

I created a menu with pseudo elements to place Font Awesome icons. It turns out that some icons render, others appear only as a little square. What can be?

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>

Answer 1

The "problem" is that not all sources are with the font-weight correct. See this tip to understand how it works.

When you search for an icon and enter it the Documentation indicates which options you have available, if you have fw:400 or fw:900 (regular or solid)

Note that this icon for example exites Solid (900) and Regular (400), but the reference is the same f2d2

Another example to better understand

And here your code corrected with the font-weight correct.

Note: Your third icon does not use the Font Awesome 5 Free he has to have the font-family Font Awesome 5 Brands as you can see in the documentation https://fontawesome.com/icons/adn?style=brands

.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>