276

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square.

Here's how I include the files in the head:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

And here's an example of me trying to use an icon:

<i class="icon-camera-retro"></i>

But all that gets rendered in a big square. Does anyone know what could be going on?

9
  • 2
    Are you importing the font?
    – mayhewr
    Jan 16, 2013 at 19:25
  • 1
    Probably not. I thought you only had to include the .css file. Jan 16, 2013 at 19:27
  • 2
    The title implies that the problem is specific to Chrome. Is it loading in other browsers or is the referenced font file turning up a 404?
    – cimmanon
    Jan 16, 2013 at 19:31
  • 1
    Can't find step 3 on above link as of Aug 2016...Any redirections?? Aug 17, 2016 at 11:08
  • 1
    Probably you forgot copy webfont folder?
    – entithat
    Jul 8, 2018 at 8:13

44 Answers 44

231

You must have 2 classes, the fa class and the class that identifies the desired icon fa-twitter, fa-search, etc …

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

Bootstrap 5 update

Note: "The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands." – Terje Solem

5
  • 4
    This should be the top answer, the CSS provided points to the right location for the font files so long as you dont move them - this was driving me up the wall thank you
    – alex3410
    May 27, 2016 at 9:50
  • 8
    Note: "The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands." Feb 24, 2018 at 12:52
  • 1
    This fixed it for me! I am using Angular (5 I think) along with primeng and it seems, that font-awesome already worked for e.g. MenuItem-definitions inside xx.component.ts (the icons rendered correctly). However: when adding something to xx.component.html (e.g. p-button with an icon), one has to add fa class and fa-<whatever icon>!
    – Igor
    Mar 25, 2018 at 23:56
  • 1
    @TerjeSolem the information you gave is very important. It solved my problem. as i was using older version but was using "fas" thanks Feb 19, 2019 at 17:56
  • The CSS classes are an absolute mess, and seem designed to cause problems for non-premium users. Even the documentation is incorrect, some of the icons tell you to use e.g. fa-solid fa-comment in v5, but the icon only loads using fa fa-solid fa-comment which according to their site is deprecated. Sep 14, 2022 at 17:48
158

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

10
  • 7
    Great answer, just to give some additional info, you can as well place the fonts in the default path provided by the css, just open Font-awesome.css and you will find the following entry: @font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1')
    – Braulio
    Sep 16, 2013 at 10:29
  • 1
    Just for future ASP.NET MVC readers with the same problem: If you have all the folders in the correct place, verify if you added the MIME type on your web.config file as pointed here: stackoverflow.com/questions/4015816/…
    – jpgrassi
    Sep 10, 2014 at 13:51
  • 1
    If you use the Data URI Scheme with a base64 version of the font (can easily convert online), then you don't have to worry about proper file path and resource hosting. Apr 21, 2015 at 19:13
  • 11
    @tutuca: Not everybody can use a CDN. Sep 2, 2016 at 10:23
  • 1
    Updated Hosting documentation by FontAwesome fontawesome.com/how-to-use/on-the-web/setup/…
    – chri3g91
    Oct 12, 2019 at 19:50
81

Use this

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

I had similar issue with Amazon Cloudfront CDN but it got resolved after I started loading it from maxcdn

4
  • 8
    this assumes you wish to use font-awesome's CDN. For a commercial production environment I would not do this. Apr 13, 2018 at 14:23
  • @JayEdwards why not? Jan 5, 2022 at 17:53
  • Because you're pulling from a resource that is not managed by you and is subject to whatever fate throws at it (e.g. scheduled server maintenance by font-awesome that you have no control over at times that are inconvenient for the region(s) in which you're hosting your service); to say nothing of the fact that you're relying on something that may be hosted nowhere near your own service, thereby adding needless traffic to your page load. Subject to your use-case I would use something webpack driven to locally retrieve the icons you need. E.g. In VueJS, I use Vue-Awesome. Jan 6, 2022 at 0:08
  • this wont work as so many of my project now running to problem because of this CDN is not reachable best to do it host in your server.
    – sam kh
    Apr 17, 2022 at 14:10
69

Check to ensure that you haven't inadvertently changed the font family on the icon. If you have changed the .fa item's font family from: FontAwesome the icon will not show. It's always something silly and small.

4
  • 1
    Yep. Silly and small. This - changing the font for something else and affecting fontawesome icons - happened to me so many times that it's becoming stupid.
    – Edd
    Oct 22, 2015 at 15:09
  • 3
    Yes - this line was to blame (to be more specific, the !important rule) : * { font-family: 'Source Sans Pro' !important}
    – Svet
    Feb 9, 2016 at 22:19
  • Thank you so much! I was importing this and that only to find the issue with font-family override. Jun 22, 2021 at 12:44
  • Be careful of another silly mistake: I was using the FREE version of font-awesome and was trying e.g. to use fa-binoculars with fa-regular, which only works for the PRO version, while fa-binoculars with fa-solid works with the FREE version, which made me think that I didn't install the fonts correctly. This answer reminded me of sanity-checks.
    – zmx
    Oct 31, 2022 at 14:45
24

If you are using LESS or SASS, open the font-awesome.less/sass file and edit the path variable @fa-font-path: "../font"; which points to the actual fonts:

@fa-font-path: "../font";

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

Same with CSS, except you edit the path in the @font-face declaration block:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
2
  • Is there a way to only import certain icons instead of all of them? I'd only like to compile my css file to a few icons.
    – user805981
    Jun 29, 2015 at 15:33
  • @fa-font-path: "../fonts"; worked for me. (Notice the missing s added) Oct 15, 2016 at 8:10
21

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

You must have 2 classes, the fas class and the fa-* class. See Basic Use in the docs:

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>
1
  • 7
    Didn't realise this - from v5 they now require a fab or fas class instead of the fa class.
    – Echilon
    Jul 10, 2018 at 9:44
15

If you are using the version 5.* or greater, then you have to use the

all.css or all.min.css

Including the fontawesome.css does not work as it has no reference to the webfonts folder and there is no reference to the @font-face or font-family

You can inspect this by searching the code for the font-family property in fontawesome.css or fontawesome.min.css

3
  • this one was the perfect solution for me - too bad the answer is so far below, I didn't see it and had to figure it out by myself
    – Cold_Class
    Jan 23, 2020 at 10:20
  • THANK YOU! The problem was I only imported fontawesome.css for version 5. Version 4 works ok with fontawesome.css.
    – Huyen
    Aug 30, 2021 at 7:03
  • Correct answer for me with Blazor!
    – Frank
    Oct 14, 2021 at 15:25
15

I am using Font Awesome 4.3.0 just linking from maxcdn works as mentioned here,

But to host in your server putting fonts and CSS in same folder worked for me, like this

enter image description here

Then just link the CSS:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
14

I tried to solve the same problem with a few previous solutions, but they didn't work in my situation. Finally, I added these 2 lines in HEAD and it worked:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">   
0
10

I had this issue and went through each step carefully...even though I've been using FA for ages...and then I realized I had this line in my mail css file:

* {
font-family: Arial !important;
}

Silly mistake, but this could tip off someone in future!

1
  • Thanks! This fixed the issue! Jan 5, 2022 at 17:53
7

I had this issue. The problem was I had a font-family CSS style with !important overriding the fontawesome font.

1
  • I had the same issue with * { font-family: Helvetica,sans-serif !important; }
    – Dubbo
    May 5, 2016 at 3:30
6

In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded:

If you have placed your files for example in the following file structure

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Check 1) Are you correctly using a Package Resource Guard in order to allow to load the font files correctly?

Example from your class which extends WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Check 2) After you have made sure that all fonts are correctly transferred to the Web Browser, check for what has been actually transferred to the Web Browser, i.e., did the integrity of the font files change? Compare the files in your source directory and the files transferred to the Web Browser using, e.g., the Web Developer Toolbar of Firefox and DiffDog (for file comparison).

In particular if you are using Maven be aware of resource filtering. Do not filter the folder where your /font files are contained - otherwise they will be corrupted.

Example from your pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

In the example above we do not filter the folder src/main/java, where the css and font files are contained.

For further information on the filtering of binary data please also see the documentation:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

In particular the documentation warns: "Warning: Do not filter files with binary content like images! This will most likely result in corrupt output. If you have both text files and binary files as resources, you need to declare two mutually exclusive resource sets. The first resource set defines the files to be filtered and the other resource set defines the files to copy unaltered..."

6

As of Dec 2018, I find it easier to use the stable version 4.7.0 hosted on bootstrapcdn instead of the font-awesome 5.x.x cdn on their website -- since every time they upgrade minor versions the previous version WILL break.

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

Icons are the same:

<i class="fa fa-facebook"></i>
0
5

font-weight: 900;

I had a different issue with Font Awesome 5. Default font-weight should be 900 for FontAwesome icons but I overwrote it to 400 for span and i tags. It just worked, when I corrected it.

Here is the issue reference in their Github page, https://github.com/FortAwesome/Font-Awesome/issues/11946

0
4

This should be much simpler in the new version 3.0. Easiest is to point to the Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

4

If your server is IIS, be sure to add the correct MIME to serve .woff file extension. The correct MIME is application/octet-stream

1
4

You must return the header Access-Control-Allow-Origin to * for your fonts files

1
  • 2
    Exactly! Using third party providers to serve your font awesome files does not solve your problem, you just passing it to others to be solved.
    – Simanas
    Nov 22, 2016 at 8:18
3

I was having the same issue with font awesome 5 downloaded with yarn, I made added the min.css file ALONG with the all.js file.

Hope this helps someone someone

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
0
3

After struggling for finding a solution and NOT finding the official documentation helpful, this solved the issue for me:

  1. Download the Fontawesome.zip. I'm using version 5.10.2 and i got it from here https://fontawesome.com/download

  2. Inside the zip file there are several folders.You only need css and webfonts folders enter image description here

  3. Create 2 folders in your web projects, and name them css and webfonts. enter image description here

These names are mandatory. Now copy the content of css and webfonts from the zip into the corresponding folders in your project. And that's all!

And reference like so in your html

<head>
        <link rel="stylesheet" href="css/fontawesome.min.css">
        <link rel="stylesheet" href="css/brands.min.css">
        <link rel="stylesheet" href="css/solid.min.css">
</head>
2

It could be possible that your font path is not correct so that css not able to load the font and render the icons so you need to provide the stranded path of attached fonts.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
2

Use this <i class="fa fa-camera-retro" ></i> you have not defined fa classes

2

Starting in version 5, if you downloaded the package from this site:

https://fontawesome.com/download

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

This is what your reference would look like using the latest version now (replace with your folder):

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

MUST WORK THIS WAY

  1. make sure you have the fontawesome cdn linked in the top of your page fontawesome cdn
  2. make sure the .fa class has not been given another font-family property. Usually this happens when we give all the tags in our page a style. like this

* {
  font-family: Arial;
}

instead use this

*:not(.fa){
  font-family: Arial;
}

  1. make sure you typed in the exact class name give in the fontawesome website. copy and paste to make sure.

If you are using Cloudflare CDN you can use the link tag below to use font awesome in your page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fa fa-home"></i>

1

I use the Official Font Awesome SASS Ruby Gem and fixed the error by adding the below line to my application.css.scss

@import "font-awesome-sprockets";

Explanation:

The font-awesome-sprockets file includes the sprockets assest helper Sass functions used for finding the proper path to the font file.

1

if your using sass and have imported in your main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

The error may come from the font-awesome.scss file that is looking for the font files in it's relative path.

So remember to override the $fa-font-path variable: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

like this there is no need to add the cdn in your index.html

1

Double check the fontawesome-all.css file - at the very bottom there will be a path to the webfonts folder. Mine had "../webfonts" format in it, which meant that the css file would be looking 1 level up from where it is. As all of my css files were in css folder and I added the fonts to the same folder, this was not working.

Just move your fonts folder up a level and all should be well :)

Tested with Font Awesome 5.0

1
  • This should be the preferred answer since it answers the question directly without linking to outdated documentation. Kudos
    – Kyle
    Jun 17, 2019 at 11:05
1

Use with the upper class

<div class="container">
  <i class="fa fa-facebook"></i>
</div>
1

The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.

Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.

Just Visit - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself You will get the answer.

1

With the (free) Font Awesome 5 version, there's this tiny detail which was hard to figure out for me and I didn't pay attention to it:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(extracted from the documentation)

With this cited, brand icons such as fa-twitter or fa-react need to be used with class fab while all other (free) icons need to be used with class fas. That's easy to oversee.

1
  • Yep, that was it. The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
    – leymannx
    Oct 31, 2020 at 14:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.