FontAwesome icons are not showing, Why?

Question

Recently I've been developing a website and I'm trying to use some font-awesome icons.

The problem is, they are not showing up.

Here is the HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

or

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

I did put the stylesheet reference in the head.

I don't know why they aren't showing up.

Here is the reference:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Here is the full html:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    
    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->
                    
                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>
                            
                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>
    
    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

related http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares — Ciro Santilli Путлер Капут 六四事, Jun 02 '16 at 13:39
Please try another version of font-awesome. For example, some icons weren't showing up for me on the version 4.3.0 but they did appear on 4.7.0. — Almir Campos, May 28 '17 at 12:02
I was able to get Font Awesome to work by using the all.min.css file. — Rob Breidecker, Nov 29 '18 at 16:20

score 135 · Accepted Answer · answered Jul 24 '14 at 01:18

135

Under your reference, you have this:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

answered Jul 24 '14 at 01:18

NathanG

1,595
1
9
15

12

**Note**: some times you might see empty boxes, then double check that you have css and fonts file in same folder check [this](http://stackoverflow.com/a/30098214/2218697), hope helps someone. – Shaiju T May 07 '15 at 10:20
Another issue is that the fontawesome css cannot find the font files which are required. Make sure they are in a folder called webfonts at the root of the project. Look in the browser console for any message about a font not being found, and look to see where it is trying to download it from and make sure your fonts are in that location. – Greg Gum May 10 '22 at 20:07

score 135 · Answer 2 · edited Dec 01 '15 at 08:12

135

For seekers of missing font-awesome icons, I have collected a few ideas:

Assure you use a correct link to the CDN, such as:

<link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).
Double check that you don't have AdBlock Plus or uBlock enabled. They might be blocking some of the icons.
Reset your browsers cache. (On Chrome do a looong click on the reload button and select Hard Cache Reset)
Assure that the  or  element you use, uses the FontAwesome font family. For example, it must not just
```

```
but
```

```
It won't work if you have something as the following in your CSS:
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
If you are using IE8, are you using a HTML5 Shim?
If this doesn't work, there are further Troubleshooting Ideas on the Font Awesome Wiki.

edited Dec 01 '15 at 08:12

Community

1
1

answered May 01 '15 at 00:08

mxro

5,297
4
33
37

3

I will add : Check your .htaccess is not blocking ttf, svg, eot, or woff extensions – BassMHL Dec 07 '15 at 14:46
font overrides! Not many answers mention this one. I've checked and checked and checked and finally figured it out. I've encountered this problem in the past too, and didn't know why, but now I know. – adrianmc Feb 17 '16 at 03:17
2

I missed to add the single `fa` as class name first. Thanks. Perfect answer for finding the problem step by step. – Avatar Jul 20 '16 at 07:52
For me it was something else setting the font-family – levininja Apr 30 '18 at 20:05
For me I had "font-weight: 500" (to make it consistent with theme I was using). I had to set it to "font-weight: bold" – bowlerae Sep 24 '18 at 06:03
Check it is not a browser specific problem. Failed in Firefox V67. Worked as a private page in Firefox Developers edition (V67). Cleared cache for today and then it worked in Firefox (v67) normally. Also worked fine in Chrome. – JohnC Mar 16 '19 at 12:19
@johnc Thanks for the tip! Would that be covered by 'Reset your browsers cache.'? – mxro Mar 17 '19 at 00:27
for me it was a broken icon - I was using "fas" as per the font awesome site, changed it to "fa" and it worked great. Maybe because I was running version 4.5.0 – TheArchitecta Nov 04 '19 at 21:50
For me I had : font-family: 'Josefin Sans', sans-serif !important; I disabled this and it worked immediatly. Thanks man :) – Thomas Carlton Jan 30 '20 at 17:58

score 43 · Answer 3 · answered Mar 08 '19 at 21:59

At first I couldn't get this to work with Font Awesome 5:

<i class="fa fa-sort-down"></i>

That's why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.

w3schools helped me out in this case.

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.

The s in fas stands for solid, and some icons also have a regular mode, specified by using the prefix far.

I already noticed the different files in the FontAwesome css folder, like:

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.css

And that's when I realized my mistake. All I had to do was include the appropriate css to the html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

And then reference the correct item:

<i class="fas fa-sort-down"></i>

This setup works for me. Though not all items have equivalents in each type. This will not work:

<i class="far fa-sort-down"></i>

As a side note, when you don't want to reference all seperate files then this will suffice:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

In addition, the [cheatsheet](https://origin.fontawesome.com/cheatsheet) shows which items are available for each icon type. — , Sep 12 '19 at 07:12
I had to include font-awesome.min.css fwiw. This post helped me though. — L0uis, Sep 24 '20 at 21:42
https://fontawesome.com/v6/icons/magnifying-glass-dollar?s=solid does not use fas — mplungjan, May 19 '22 at 08:16

score 13 · Answer 4 · answered Nov 30 '17 at 20:06

13

Mine was not working because I wanted an icon which was not released in the FA version I was using.

This answers why some icons shows but others no.

Pretty obvious but I guess some people still fall for this. Like me.

answered Nov 30 '17 at 20:06

Taiguara Andrade

131
1
3

4

Yes, it does provide an answer to the question. – Bobort May 25 '18 at 19:49
2

Or you are trying to use an older font that no longer exists in the version you are using. This one, for example, is just called times-circle not times-circle-o which is the old name: https://fontawesome.com/v4.7.0/icon/times-circle-o – smoore4 Aug 01 '18 at 12:59
1

Thank you!! This has been making me pull my hair all day – 24x7 Jun 29 '19 at 14:10

score 12 · Answer 5 · answered Mar 17 '18 at 18:26

12

Just adding some more info to the above answers in regards with update on fontawesome,

If you use font awesome 5,

a. just copy-to-paste the below HTML,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Note: Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body> and just before (YOUR_CLOSING_BODY)

b. And for example,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

answered Mar 17 '18 at 18:26

Sundar Gsv

597
6
7

How about serving the css locally instead of linking to the fa website? – Ghilteras Mar 05 '19 at 04:19
this was my case... i didnt have the js file, now it works! – Cristian Sepulveda Aug 16 '19 at 17:31

score 9 · Answer 6 · answered Nov 02 '20 at 21:00

9

I got the similar problem, Shows icons in square, tried as per the instructions specified here : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Resolved by using this reference in head section of html page

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

answered Nov 02 '20 at 21:00

Rahul.S

193
4
13

1

This worked for me !!! Joca 2021 – Joca May 15 '21 at 12:54
I had problems with some other links but this one seems to work! Thank you! (June 2021) – Rafael Jun 08 '21 at 18:29

score 7 · Answer 7 · answered Dec 19 '14 at 16:04

7

You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />

answered Dec 19 '14 at 16:04

Chatchawan Wongsiriprasert

71
1
1

score 5 · Answer 8 · edited Jan 30 '18 at 18:29

5

I solved this problem by putting the Fonts directory at the same level as my CSS files.

edited Jan 30 '18 at 18:29

TylerH

20,816
57
73
92

answered Mar 14 '17 at 10:42

lolo

101
1
5

score 5 · Answer 9 · answered Aug 13 '19 at 16:35

For version 5:

If you downloaded the free package from this site:

https://fontawesome.com/download

The fonts are in the all.css and all.min.css file.

So your reference will look something like this:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

The fontawesome.css file does not include the font reference.

score 4 · Answer 10 · edited Dec 11 '18 at 16:08

4

To whoever may be checking this out in 2018. I am using font awesome 4.7.0 and I got this issue solved by simply taking out the s in fas as seen in the code . This was originally .

Hope this helps.

edited Dec 11 '18 at 16:08

montrealist

5,440
10
45
60

answered Dec 11 '18 at 15:36

Goodluck Leo

41
1

Plus I am running the node.js server. – Goodluck Leo Dec 11 '18 at 15:39
_New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa._ From [w3schools](https://www.w3schools.com/icons/fontawesome5_intro.asp) – Mar 08 '19 at 21:37

score 4 · Answer 11 · answered Jun 21 '19 at 11:37

Notes

This answer is created when the latest version of fontawesome is v5.* but yarn and npm version points to v4.* (21.06.2019). In other words, versions installed via package managers is behind latest release !

If you installed font-awesome via package manager (yarn or npm) then, please be aware which version was installed. Alternatively, if you've already installed font-awesome long time ago then, check what version was installed.

Installing font-awesome as new dependency:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Checking what version of font-awesome is already installed:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problem

After you installed font-awesome dependency, you incorporate one of these two source files font-awesome.css or font-awesome.min.css (founded in node_modules/font-awesome/css/) into header of your webpage e.g.

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

Next, you visit https://fontawesome.com/. You select free icons and you search for sign-in icon (as an example). You copy the icon e.g. , you paste it into your html and, icon is not shown, or is display as square or rectangle !

Solution

In essence, versions installed via package managers is behind version that is shown on https://fontawesome.com/ website. As you can see we installed font-awesome v4.7.0 but, website shows documentation for font-awesome v5.*. Solution, visit the website that documents icons for v4.7.0 https://fontawesome.com/v4.7.0, copy appropriate icon e.g.  and incorporate it into your html.

They have released a new package [here](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) that has the latest version. It's also compatible with less and sass \o/ — DerpyNerd, Aug 29 '19 at 09:21

score 2 · Answer 12 · edited Oct 05 '18 at 10:20

2

adding this worked for me:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

take a look

so full example is:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

edited Oct 05 '18 at 10:20

Abdulkader Khateeb

87
1
13

answered Oct 15 '15 at 18:11

edgarmtze

23,987
75
226
373

score 2 · Answer 13 · answered Oct 30 '18 at 10:01

2

If you define custom CSS you must set font-weight: 900; for some newer Font Awesome library (from version 5). Not setting this font-weight it may show squares.

answered Oct 30 '18 at 10:01

jurev

969
1
9
18

score 1 · Answer 14 · answered May 08 '15 at 08:56

1

If you are using blogger hosting, use this url stylesheet css:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

answered May 08 '15 at 08:56

Nurdin BM.

11
1

score 1 · Answer 15 · answered Sep 19 '15 at 13:43

Try the below two links keep in header tag.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Getting the Icons from the below link :

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

score 1 · Answer 16 · edited Oct 10 '17 at 10:31

I use:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

and style after:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

score 1 · Answer 17 · answered Nov 16 '18 at 17:56

1

the CDN link that you had posted i suppose is why it wasnt showing correctly, you can use this one below, it works perfectly for me.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

answered Nov 16 '18 at 17:56

John Kesh Mahugu

29
2

score 0 · Answer 18 · edited Mar 17 '21 at 15:13

0

Make sure you include the rel and type, as in rel="stylesheet" type='text/css', in the link to the Awesomefont CSS file. Without these the file wasn't loading correctly for me.

edited Mar 17 '21 at 15:13

TylerH

20,816
57
73
92

answered Sep 14 '16 at 19:36

Elliot Robert

346
1
4
13

score 0 · Answer 19 · answered Mar 11 '17 at 22:44

You can add this in .htaccess file in the directory of awesome font

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

score 0 · Answer 20 · answered Mar 22 '19 at 13:24

I have tested and it's working.

Instead of this

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Use it with HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

score 0 · Answer 21 · edited Sep 25 '20 at 19:23

0

Use this link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />

edited Sep 25 '20 at 19:23

β.εηοιτ.βε

24,064
11
54
67

answered Sep 25 '20 at 17:32

samin

353
3
7

score 0 · Answer 22 · answered Dec 24 '20 at 11:46

0

If you are using a newer version of Angular, just installing the package with npm/yarn is not enough. You also need to import the css file (with @import "~bootstrap-icons/font/bootstrap-icons.css";) in your styles.scss .

answered Dec 24 '20 at 11:46

NobodySomewhere

2,359
1
13
12

score -1 · Answer 23 · edited Oct 26 '17 at 04:23

-1

You need a font importer.| try

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

edited Oct 26 '17 at 04:23

Madhawa Priyashantha

9,427
7
31
59

answered Aug 13 '17 at 12:48

SIAMWEBSITE

143
1
4

score -2 · Answer 24 · answered Mar 28 '18 at 18:29

-2

I got mine to work by editing the main font-awesome.css file. It has urls to the src (woff, eot, etc...) I had to change them to the absolute path eg: http://mywebsite.com/font-awesome.woff Then it worked!

answered Mar 28 '18 at 18:29

crystallove18

101
1
8

2

I'd rather not recommend this since you're editing an external file. You (or your team) will need to remember this every time they need to update fontawesome. – Jose Cordero Jun 08 '18 at 18:54

Shahar · Answer 25 · 2014-07-23T23:58:23.440

-7

Change this:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

To this:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

I believe you need the http: otherwise it doesn't know what protocol to use (and uses the wrong one, file: for instance, as a result).

edited Jul 23 '14 at 23:58

answered Jul 23 '14 at 23:49

Shahar

1,681
2
12
18

@user3870894 Actually it's `href`, I was thinking of javascript. But try the new code. – Shahar Jul 23 '14 at 23:58
@user3870894 o_o Post full HTML or at least main parts then. What does the console say? Did you try inspecting the element? – Shahar Jul 24 '14 at 00:17
2

@Shahar By using `//` the browser picks the protocol that the requesting site is using. When your site is using https, it picks https. If you're using http, it uses http to request the file from the CDN. Of course, if you open the site locally using `file:///`, which is not recommended, the browser will indeed try to open the cdn with the `file` protocol. – Robin van Baalen Jan 08 '15 at 14:37

FontAwesome icons are not showing, Why?

25 Answers25

Notes

Problem

Solution

Linked