Font Awesome icons are not working, I have included all required files

Question

I am trying to use Font Awesome icons of version 4.1.0 on my website but they are not working, I have referenced them in the head of my page.

I have tried using two methods.

<a class="btn-cta-freequote" href="#">Get a FREE Quote </a>
<li><a href="index.html">Home</a></li>

Here is the CDN link I am using: <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 OurBigBook.com, 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 164 · Answer 1 · edited Dec 01 '15 at 08:12

164

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

6,588
4
35
38

4

I will add : Check your .htaccess is not blocking ttf, svg, eot, or woff extensions – BassMHL Dec 07 '15 at 14:46
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
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
1

If you're using next.js you need to follow these steps for the CSS to be set up correctly: https://fontawesome.com/docs/web/use-with/react/use-with#next-js – jlhasson Aug 07 '22 at 18:31
Thanks - adding 'fa' sorted it for me, weird that this isn't in the Font Awesome icon code by default! – Vee Oct 19 '22 at 15:24

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

139

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,645
1
10
15

13

**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 49 · 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 15 · Answer 4 · answered Nov 02 '20 at 21:00

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">

score 14 · Answer 5 · answered Nov 30 '17 at 20:06

14

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

141
1
3

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

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

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>

How about serving the css locally instead of linking to the fa website? — Ghilteras, Mar 05 '19 at 04:19

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,799
66
75
101

answered Mar 14 '17 at 10:42

lolo

101
1
6

score 5 · Answer 9 · 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 5 · Answer 10 · 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 11 · 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,593
12
46
68

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 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

97
1
13

answered Oct 15 '15 at 18:11

edgarmtze

24,683
80
235
386

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

1,457
1
14
22

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,799
66
75
101

answered Sep 14 '16 at 19:36

Elliot Robert

355
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

β.εηοιτ.βε

33,893
13
69
83

answered Sep 25 '20 at 17:32

samin

482
5
9

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,997
1
16
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,633
7
33
60

answered Aug 13 '17 at 12:48

SIAMWEBSITE

171
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,687
2
12
18

Font Awesome icons are not working, I have included all required files

25 Answers25

Notes

Problem

Solution

Linked