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>