CODEWITHSUNDEEP
htmlcssfont-awesome
Mahyar
Mahyar

Reputation: 135

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>

Upvotes: 13

Views: 38456

Answers (5)

Shawn W
Shawn W

Reputation: 566

For Pro users, check that you have an updated CDN link for fontawesome, as of this writing the most recent version is 5.11.2. Updating the cdn link from https://fontawesome.com/account/cdn resolved my issue. Posting an example here with a dummy integrity attribute, do not use this link, you should have your own link with a unique ​​subresource integrity.

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous">

Upvotes: 6

Eitanmg
Eitanmg

Reputation: 586

Had the same problem, where some of the icons showing up as square boxes.

it only happened with a local reference of font awesome to my web app.

when i investigate the URL, i saw that there was also web fonts that needed to be loaded (not only the css file itself):

and than save the web fonts with right click - open new tab:

and move those files into your web-fonts folder. (in my case, i had to overwrite the existing webfonts - this is why it show the square boxes in first place).

and the problem solved!

Upvotes: 7

jenstreetman
jenstreetman

Reputation: 353

After reading the answers on this page, I got my own code working by linking to the CDN per other suggestions. What I actually wanted, though, was to add the Font Awesome folder to my project and link to the project file. When I studied the link to the CDN, I noticed that it used a path ending with css/all.css. I noticed that the folder I had downloaded and unzipped included an all.css file along with the fontawesome.css file, which seems to be a change as of -v 5.0. I changed my link from:

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css">

to:

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">

And it worked.

I also learned the hard way that the Font Awesome link must be placed above the link to the main.css file for the project.

Upvotes: 13

SynTraxz
SynTraxz

Reputation: 11

If you intend to use a local copy font-awesome in your project files (without going for the web link), instead of coping just the font-awesome file, copy everything on the downloaded font-awesome zip.

For an example font-awesome v4.7 comes with 4 folders (css,fonts,less,scss) and it's there for a reason.

If you look inside the css file (font-awesome.css) you can see it's usages of other files like this. 

src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

Upvotes: 1

James Douglas
James Douglas

Reputation: 3446

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>

Upvotes: 3

Related Questions