Why is my code not showing me the icons ?
<ul>
<li><a href="#" class="facebook" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="twitter" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>
Quoted from their website: The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. This is why my fonts were showing blank squares.
Font Awesome Introduction You place Font Awesome icons by using the prefix fa and the icon's name.
To use the solid style of “circle“, you'll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.
Not sure what you mean by "the icons are not showing up", but my guess is that you haven't included the CSS file for Font Awesome. You can do so by including this in the <head>
of your HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Use that, with the code you provided, and it works without error.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li><a href="#" class="facebook" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="twitter" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With