When utilizing Font Awesome, I am able to display 4 out of 5 icons correctly. However, the last icon (stackoverflow icon) does not appear:
Here is the HTML code:
<ul>
<li><a href="#"><i class="xcon-facebook"></i></a></li>
<li><a href="#"><i class="xcon-twitter"></i></a></li>
<li><a href="#"><i class="xcon-linkedin"></i></a></li>
<li><a href="#"><i class="xcon-instagram"></i></a></li>
<li><a href="#"><i class="xcon-stackoverflow"></i></a></li>
</ul>
Also, here is the CSS code:
.xcon-facebook:before { content: '\f09a'; } /* '' */
.xcon-twitter:before { content: '\f099'; } /* '' */
.xcon-linkedin:before { content: '\f0e1'; } /* '' */
.xcon-instagram:before { content: '\f16d'; } /* '' */
.xcon-stackoverflow:before { content: '\f16c'; } /* '' */
To see how they look visually, click here.
I attempted to resolve the issue by modifying this line as follows:
.xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Free';} /* '' */
However, there was no change in the outcome.