Font awesome is not showing icon

Question

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

I would like to know how to make the icon display instead of the bordered square box.

This has been asked many times before. Make sure you're including the font files too.. not just the CSS http://stackoverflow.com/questions/14366158/font-awesome-not-working-in-chrome — Carol Skelly, Nov 11 '14 at 15:03
here is the link to font-awesome tourbleshooting guide in git https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting — Mehavel, Nov 11 '14 at 15:07
please updated the question with your folder structure in which you have font-awesome folder, So which we can make out that "font-awesome.min.css" is correctly getting the ttf path or not.Only css would not work. — Ajit Hogade, Apr 22 '16 at 04:33

Daniel Barde · Answer 1 · 2018-02-27T12:33:16.727

97

In my case i made the following mistake in my css code.

*{
    font-family: 'Open Sans', sans-serif !important;
}

This will override all font family rules for the entire page. My solution was to move the code to body like so.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.

edited Feb 27 '18 at 12:33

answered Feb 19 '16 at 13:03

Daniel Barde

2,603
5
31
40

5

This was the solution for me. I had `*{font-family: Raleway}` and I changed it to `*.not(i) {font-family: Raleway}` – fungusanthrax Jun 27 '18 at 12:59
I had this problem too, but I didn't realise it for ages because in DevTools it really looked like FontAwesome was being used. See my answer for more details. – Dagmar Oct 25 '18 at 13:14

score 68 · Answer 2 · edited Apr 03 '15 at 15:44

68

When you open font-awesome.min.css you can see following path:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.

edited Apr 03 '15 at 15:44

Simo Kivistö

4,247
3
38
42

answered Apr 03 '15 at 14:47

user2980426

799
5
8

Since at least 0.8.1 font-awesome is not referenced. There are three `summernote` files in the font folder with extensions `eot`, `ttf`, and `woff` that need to be distributed. – ficuscr Feb 18 '16 at 03:13
2

Be careful, in 4.6.3 (if not earlier) it's `fonts` not `Fonts` and on a case sensitive system that causes problems... – Jason May 16 '16 at 13:50
1

why does font awesome not say it on their website ? it is really not explicit. – Matt May 16 '18 at 09:35
Awesome! I thought the fonts had to be in the same folder as the css, they had to be one folder level up. – Giovani Vercauteren May 31 '18 at 08:36
Also, make sure your library is up to date. I had all my logos except the bandcamp logo. Once I downloaded the updated 4.7 and replaced the files, it worked. – Ryan Walker Jun 01 '18 at 19:42
@Jason is right. Look into your font-awesome.min.css what folder your icons should be in. Secondly using fas fa-car for version 4.7 doesn't work. use fa fa-car instead. – CredibleAshok Mar 08 '21 at 08:14

score 58 · Answer 3 · edited Oct 25 '18 at 14:25

58

Be aware that the new version (5) of font awesome uses "fas" or "fab" instead of "fa" prefix.

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. Now fixed.

Example code:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

See: https://fontawesome.com/icons/facebook-f?style=brands

edited Oct 25 '18 at 14:25

Dagmar

2,968
23
27

answered May 16 '18 at 21:55

krystonen

681
5
5

That did it for me! Strange that it hasn't been updated in the docs – GroomedGorilla Jun 25 '18 at 13:55
This was the only thing that worked. If you're using a modern version, use this. – samurdhilbk Aug 15 '18 at 03:43
LIVE SAVER! change to "fa fa-bars" borked – nasty Oct 31 '18 at 00:18
Thank you, for me some icons wirk with fas and others with fab, for instance fab fa-twitter is fine but fas fa-twitter shows a white square, go figure! – user1620090 Feb 06 '19 at 16:16
So if the new version is fas, then why do I need to change my classes from 'fas' to 'fa' – Sam Jul 15 '19 at 07:26
Thanks. This did it for me. – Lusayo Nyondo Apr 23 '20 at 12:02
This is outdated now – Joey Carlisle Mar 31 '23 at 18:05

score 31 · Answer 4 · answered Mar 31 '17 at 20:51

31

First, check that you have class="fa" as well as whatever the icon's class is. So, not just

<i class="fa-pencil" title="Edit"></i>

But also

<i class="fa fa-pencil" title="Edit"></i>

Then it works as expected. This solved my issue.

answered Mar 31 '17 at 20:51

OneMoreQuestion

1,693
3
25
51

1

This worked for me. For me fab fa-envelop wasn't working, but then fa fa-envelop was working. Very strange but fixed my problem. – Jordan Schuetz Mar 06 '19 at 00:08
@JordanSchuetz "fab" is specific to brand icons, like "fab fa-facebook-f". In the newer versions, you'll find "fas" for the "solid" variation, so yours would get fixed to "fas fa-envelope" in the newer versions, or "fa fa-envelope" in an older one. – AuRise Feb 11 '20 at 20:34

score 22 · Answer 5 · answered Nov 25 '15 at 14:48

Open your font-awesome.css theres code like :

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

you must have folder like :

font awesome -> css
 -> fonts

or the easiest way :

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

score 13 · Answer 6 · answered Jul 18 '19 at 22:34

13

i was dealing with the same problem then i figured it out i have to use new version (5 and plus)

use this cdn it will work.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

answered Jul 18 '19 at 22:34

Halid

140
1
7

score 10 · Answer 7 · answered Nov 11 '14 at 15:03

Check that the path to your CSS file is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers:

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

Moreover if you use it, there will be no need of uploading extra fonts to your server and you will be sure that you point to the right CSS file, and you will also benefit from the latest updates instantly.

I did same and still have square box only – Vipul Hadiya Jun 10 '16 at 13:51 — Vipul Hadiya, Jun 10 '16 at 13:51

score 7 · Answer 8 · answered Dec 19 '19 at 05:46

7

I'm using FontAwesome Pro, and the solution for me was to embed all.min.css instead of fontawesome.min.css.

answered Dec 19 '19 at 05:46

Bruno Leveque

2,647
2
23
33

1

this was my issue – Noob Oct 21 '20 at 10:41
for Free it is the same – mirek Dec 16 '20 at 12:57
1

This works for me using FontAwesome v5 and Angular v10. Thanks. – Vinicios Torres Jul 05 '22 at 01:06

Hrithik verma · Answer 9 · 2019-12-27T13:08:09.713

7

i was facing the same issue.. so instead of downloading font awesome , i added a link in my html code and it worked.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

edited Dec 27 '19 at 13:08

answered Dec 27 '19 at 13:02

Hrithik verma

71
1
3

Thank you very much, i spend 24 hrs to fix this fontawesome – Mathew Magante Feb 05 '20 at 13:57

score 6 · Answer 10 · answered Nov 22 '20 at 20:18

6

It's something to do with v5, some of the icons don't work with older versions.

This link worked for me!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

answered Nov 22 '20 at 20:18

Reece Anderson

71
1
3

score 4 · Answer 11 · answered Nov 11 '14 at 15:06

For a start, you shouldn't have both font-awesome.css and font-awesome.min.css

Generally, use font-awesome.css during development, then switch to font-awesome.min.css once you're happy with the site.

Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css.

If your html file is in the base directory, and the css in a subfolder off the root, you would need: href="./css/font-awesome.css" (single period)

score 4 · Answer 12 · answered Dec 13 '17 at 17:00

4

All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:

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

I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.

answered Dec 13 '17 at 17:00

Mickers

1,367
1
20
28

1

I had issues with getting the v5+ of FontAwesome working as well. Had changed their "webfonts" folder to "fonts" in the css, and placed it the same way, and it didn't work properly. Replaced files with v4.7.0 and it works like a charm. Hrm. – Lisa Mar 02 '18 at 08:45
1

In version 5, the font-family for the icons isn't "FontAwesome" anymore. In the free version, it is now "Font Awesome 5 Free" and "Font Awesome 5 Pro" in the pro version. I was having this issue when I was manually using the character codes in a few places, and they stopped working because of the font-family not being set. – AuRise Jul 18 '18 at 20:25

score 4 · Answer 13 · answered Aug 14 '19 at 02:12

4

For those of you using SCSS and the NPM package, here is my solution:

npm i --save @fortawesome/fontawesome-free

Then at the top of an SCSS file (ideally an SCSS file imported at the root of your application):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

answered Aug 14 '19 at 02:12

Jeff Diederiks

1,315
13
20

2

Interesting adding `@fortawesome/fontawesome-free/css/all.css` fixed it – Andy Braham Feb 01 '20 at 06:19

score 3 · Answer 14 · answered Jul 02 '20 at 14:19

3

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

answered Jul 02 '20 at 14:19

De Zin Htang

41
3

Working very well with this – De Zin Htang Jul 02 '20 at 14:20

score 3 · Answer 15 · edited Dec 16 '20 at 14:13

3

In my case, I needed to combine the answers from sst & Bruno Leveque:

https://fontawesome.com/download
download via Free for web, unpack
copy all folders into /fontawesome/
link the all.min.css instead of fontawesome.css

Example Django:

# in myapplication/vendor/fontawesome/ everything unpacked
<link rel="stylesheet" href="{% static 'myapplication/vendor/fontawesome/css/all.min.css' %}">

edited Dec 16 '20 at 14:13

Sabito stands with Ukraine

4,271
8
34
56

answered Dec 16 '20 at 13:05

mirek

1,140
11
10

score 2 · Answer 16 · answered Oct 25 '18 at 13:43

I successfully installed Font Awesome using their CDN and javascript include (as described on this page). Then I tried to copy the HTML and CSS to some legacy pages and suddenly I saw empty square boxes instead of the icons.

I saw Daniel's answer (above) and because my legacy CSS file was huge (and years old) I suspected that was the issue. However when I looked in Chrome DevTools it really looked like Font Awesome was loaded:

I was expecting to see the font in strikeout if there was an issue... However I had really exhausted all my options so I checked the Computed Styles and saw clearly that the Font Awesome font was definitely not being used. (See the Rendered font at the bottom)

My legacy CSS file was a mess and I preferred not to touch it, so I cheated by doing this - please don't tell anyone :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Also to note, when I upgraded from Font Awesome version 4.7.0 to version 5.4.1 this issue went away! I used this setup guide and this HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

score 1 · Answer 17 · answered Jul 23 '17 at 06:42

1

I think you have not fonts folder in your root folder like where stay css folder.

Demo

And css folder is like

And fonts folder like

I hope it will work for you.

Thanks you.

answered Jul 23 '17 at 06:42

Obaidul Haque

916
11
18

score 1 · Answer 18 · answered Oct 10 '17 at 08:29

1

In my case: You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.

answered Oct 10 '17 at 08:29

sst

11
1

score 1 · Answer 19 · answered Mar 19 '19 at 00:30

So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.

score 1 · Answer 20 · answered Nov 26 '19 at 09:00

1

In my case, the problem was caused by using some regular styles (far) that are not included in the free set. Changing to fas fixed it.

answered Nov 26 '19 at 09:00

Yngve Høiseth

570
6
26

This solved it for me, thanks – Jacob Broughton Jan 07 '22 at 16:20

score 1 · Answer 21 · edited Apr 11 '20 at 07:46

1

my issue was the one having most of the votes

*{
font-family: xxxxx
}

changing it to this solved the problem

body{
font-family: xxxx
}

edited Apr 11 '20 at 07:46

Bhargav Rao

50,140
28
121
140

answered Apr 11 '20 at 06:31

Jamsheer

23
4

score 1 · Answer 22 · answered Dec 02 '21 at 21:35

1

In my case, it worked by adding adding font-family, for example adding an Instagram icon, i needed to add font-family as FontAwsome:

.fa-instagram:before {
content: "\f16d";
font-family: "FontAwesome" !important;

}

answered Dec 02 '21 at 21:35

pari

788
8
12

score 0 · Answer 23 · answered Feb 20 '17 at 22:56

You may have used a VCS (git or somesuch) to transfer icon files to the server. git says:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

You probably have to fix your fonts.

score 0 · Answer 24 · answered Mar 09 '19 at 05:01

On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site.

I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab.

Not sure why this fixed it, but it did.

score 0 · Answer 25 · answered Jun 23 '19 at 16:42

Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation.

eg: font-family 'FontAwesome' in Bootstrap will interfere with font-family 'Font Awesome 5 Free' in Font-Awesome and you will get a white box instead of the icon you want.

There may be cleaner ways of handling this, but if you've gone down the checklist trying to fix the "white box" issue and still can't figure it out (like I did), this may be the answer you're looking for.

Why the vote down? It's edge-case, but it's a cause not easily found elsewhere. — jtubre, Nov 14 '19 at 21:39

score 0 · Answer 26 · answered Aug 24 '19 at 05:51

Based on the 5.10.1 version.

My solution (locally):

If you're using "fontawesome.css" or "fontawesome.min.css", try using "all.css" instead (located in the css folder).
The "css" folder and the "webfonts" folder from the fontawesome package that you downloaded must be in the same level as each other.

In my case, I already had a css folder so I just renamed the fontawesome css folder to "css-fa".

With both "css-fa" and "webfonts" in my css folder, simply link it correctly in your text editor and it should work.

Ex: link rel="stylesheet" href="css/css-fa/all.css"

score 0 · Answer 27 · answered Oct 25 '19 at 01:10

0

solved changing the targetted !importantized font-family selector from * { ... } to *:not(i) { ... }

(with scss preprocessor); hope u solved

answered Oct 25 '19 at 01:10

backciro

11
2

score 0 · Answer 28 · answered Nov 26 '19 at 19:52

The code below is font-awesome 4.70.0. To go to font-awesome 5.11.2, click here.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

score 0 · Answer 29 · answered May 06 '20 at 14:19

I was following this tutorial to host Font Awesome Pro 5.13 myself.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

For some reason I could not get <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"> to load webfonts that in turn resulted in only squares showing up. But when I used <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script> everything started working. Both links were added in HTML <head>.

the problem with this js is that the file is to heavy lo load — exequielc, Jul 17 '20 at 13:30

bonkisama · Answer 30 · 2020-06-23T12:54:45.900

0

I was trying to add fa 5.0.13 to drupal 8 with scss. The styles are not included by default in the main fa.scss had to add them manually.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

edited Jun 23 '20 at 12:54

answered Jun 23 '20 at 09:58

bonkisama

1
1

sani · Answer 31 · 2020-06-24T06:28:56.133

you need to put font-awesome file in css folder and change

href="../css/font-awesome.css" to href="css/font-awesome.css"

One more thing You can Replace this Font-awesome css File And and try this one

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

score 0 · Answer 32 · answered Feb 04 '22 at 15:37

Try referencing all the necessary files like so

<head>
  <!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
  <style type="text/css">
    <!-- custom styling for all icons -->
    i.fas,
    i.fab {
      border: 1px solid red;
    }
    <!-- custom styling for specific icons -->$$
    .fa-fish {
      color: salmon;
    }

    .fa-frog {
      color: green;
    }

    .fa-user-ninja.vanished {
      opacity: 0.0;
    }

    .fa-facebook {
      color: rgb(59, 91, 152);
    }
  </style>
</head>
<body>
  <i class="fas fa-fish"></i>
  <i class="fas fa-frog"></i>
  <i class="fas fa-user-ninja vanished"></i>
  <i class="fab fa-facebook"></i>
</body>

score 0 · Answer 33 · answered Aug 04 '22 at 08:56

In my case, I was using the wrong path.
And also, download the latest version from the website. The icons must also be from the same version.

https://fontawesome.com/versions

The version of Font Awesome can be seen on the link of the path. Like version 6.1.2 in the below link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Instead of using CDN, I used CDNJS. Go to this website and download the latest version.

https://cdnjs.com/libraries/font-awesome

score -1 · Answer 34 · answered May 24 '19 at 14:51

-1

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

answered May 24 '19 at 14:51

Namwanza Ronald

150
1
1
12

Font awesome is not showing icon

34 Answers34

Linked