I am new to the use of Font Awesome (using v5 at the moment), and I have come across something strange on my page. I have the reference to Font Awesome in my tags:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
I have also successfully used icons on my pages of my site, however, in one case, I only get three empty square where the icons should appear. The code for the offending items is as follows:
<div class="social">
<a href="https://www.facebook.com/RadioVlaanderenNationaal/" target="_blank"><i class="fas fa-facebook fa-4x"></i></a><a href="http://twitter.com/RadioVlNationaa"
target="_blank"><i class="fas fa-twitter fa-4x"></i></a><a href="http://youtube.com/user/RadioVlaanderenNatio"
target="_blank"><i class="fas fa-youtube fa-4x"></i></a>
</div>
The strange thing is, I put, as a means of test, an icon elsewhere in the same page (just with the tags) and it worked with no issue at all.
I assume it has something to do with the hyperlink, but what? As I said, anywhere else on my site, the icons work good as gold. Could someone help me out, please?
Thank you in advance.
You had mistake "fas" it should "fab":
<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="social">
<a href="https://www.facebook.com/RadioVlaanderenNationaal/" target="_blank"><i class="fab fa-facebook fa-4x"></i></a><a href="http://twitter.com/RadioVlNationaa"
target="_blank"><i class="fab fa-twitter fa-4x"></i></a><a href="http://youtube.com/user/RadioVlaanderenNatio"
target="_blank"><i class="fab fa-youtube fa-4x"></i></a>
</div>