Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-Awesome icons showing up as square boxes

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>
like image 516
Mahyar Avatar asked Oct 14 '17 18:10

Mahyar


People also ask

Why Font Awesome icon is showing as a square?

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.

How do I display Font Awesome icons?

Font Awesome Introduction You place Font Awesome icons by using the prefix fa and the icon's name.

How do I make Font Awesome circle icons?

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.


1 Answers

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>
like image 192
James Douglas Avatar answered Oct 18 '22 20:10

James Douglas