[css] Font Awesome not working, icons showing as squares

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:

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

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?

This question is related to css html twitter-bootstrap font-awesome

The answer is

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>

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

This may help, 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.

Hope that helps someone.

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;

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

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

hope helps someone.

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

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>

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

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!

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


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:

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

    <finalName>Your project</finalName>

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:


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

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

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

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>

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

I hope it will help someone.

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

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

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

    1. 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!

Beware fontawesome! Awesomeness is making things simple for the user!

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

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

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>

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


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

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

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

Use with the upper class

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

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.

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.

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


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

I have changed from 3.2.1 to 4.0.1 and the folder was font and now is called fonts.

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

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

I hope it help someone.

My problem was with adding the

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

inside a

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->


I fixed it by placing it outside the tag.

It wasn't working for me because I had Allow from none directive for the root directory in my apache config. Here's how I got it to work...

My directory structure:


where my index.html has:

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

I chose to continue to disallow access to my root and instead added another directory entry in my apache config for root/font-awesome/

<Directory "/path/root/font-awesome/">
    Allow from all

Please add

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')

This to top of your css, download and link the css and font correctly, the problem is due to FontAwesome not loading correctly.


I tried a number of the suggestions above without success.

I use the NuGeT packages. The are (for some reason) multiple named version (font-awesome, fontawesome, font.awesome, etc.)

For what it's worth: I removed all the version installed and then only installed the latest version of font.awesome. font.awesome just worked without the need to tweak or configure anything.

I assume there are a number of things are missing from the other named versions.

What fixed the issue for me (on my Windows 7 machine) was decrypting my project directory. It's crazy how many visual and functional glitches originally arise from that when testing your website. Just get to a command prompt and run:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

...where %PROJECT_PATH% is the full pathname to the directory where your code is stored.

So many answers so I add my working for me (Change name if you dont use PRO): In _typography.less

//  Common
//  _____________________________________________

& when (@media-common = true) {
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
    @family-name: @font-family-name__fontawsomesolid,
    @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
    @font-weight: 900,
    @font-style: normal

In _theme.less

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

and example of usage:

     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;

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

* {_x000D_
  font-family: Arial;_x000D_

instead use this

  font-family: Arial;_x000D_

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

<i class="fa fa-home"></i>

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.

In essence, versions installed via package managers might be behind version that is shown on https://fontawesome.com/ website. Thus, as it is today (21.06.2019) package manager will install v4.7.0 as the latest version but, website will point to documentation that refers to v5.*.

Solution, visit the website that documents icons for v4.7.0 https://fontawesome.com/v4.7.0, copy appropriate icon e.g. <i class="fa fa-sign-in" aria-hidden="true"></i> and incorporate it into your html. More context can be found here.

Now in fontawesome 5 you can deliver a cached version of JS over Https.

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

More info on https://fontawesome.com/get-started/svg-with-js

If the MIME TYPE is already having the .woff and .woff2 file types and still it's giving HTTP-404 error, check the request filtering. If this is restrictive, add these file types these with allow to serve and it shall work. Check it out!

Using absolute instead of relative paths solved it for me. I was using relative paths (see first example below) and that didn't work. I checked via console and found the server was returning a 404, files not found.

Relative path caused a 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");

Absolute path solved it cross browser:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");

I wouldn't recommend doing this unless you have to, but it works for me. Ofcourse, you should repeat this for all the font formats in the font-awesome.css file.

I found a solution today which was to:

  1. Download the entire project from their Github page
  2. Then follow the rest of the steps on their page under the Default CSS section about moving the directory into your project and adding the link in the HEAD section of an .html file

The problem with their documentation is that they do not specify a link to where you should get a copy of the entire font-awesome project to put into your project.

Questions with css tag:

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?

Questions with html tag:

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Angular 6: saving data to local storage Vue.js get selected option on @change Bootstrap 4 multiselect dropdown How to add bootstrap in angular 6 project? Angular 5 Button Submit On Enter Key Press Angular 5, HTML, boolean on checkbox is checked How to render string with html tags in Angular 4+? bootstrap 4 file input doesn't show the file name How can I execute a python script from an html button? Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Failed to load resource: the server responded with a status of 404 (Not Found) css Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? CSS Grid Layout not working in IE11 even with prefixes How to prevent page from reloading after form submit - JQuery Centering in CSS Grid Detecting real time window size changes in Angular 4 Angular 4 img src is not found (change) vs (ngModelChange) in angular Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 How to style a clicked button in CSS How do I change the font color in an html table? Redirecting to a page after submitting form in HTML Load json from local file with http.get() in angular 2 display: flex not working on Internet Explorer Scroll to element on click in Angular 4 How to extract svg as file from web page force css grid container to fill full screen of device How does the "position: sticky;" property work? HTML5 Video autoplay on iPhone Disable button in angular with two conditions? CSS hide scroll bar, but have element scrollable CSS grid wrapping How to load image (and other assets) in Angular an project? Flask - Calling python function on button OnClick event How can I make Bootstrap 4 columns all the same height? Wrapping a react-router Link in an html button

Questions with twitter-bootstrap tag:

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes Angular 4: How to include Bootstrap? bootstrap 4 row height Bootstrap 4 File Input How can I center an image in Bootstrap? Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? Center the content inside a column in Bootstrap 4 col align right How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? `col-xs-*` not working in Bootstrap 4 Using media breakpoints in Bootstrap 4-alpha Bootstrap 4, How do I center-align a button? What is class="mb-0" in Bootstrap 4? Bootstrap 4 align navbar items to the right Bootstrap fullscreen layout with 100% height Bootstrap 4 img-circle class not working Bootstrap footer at the bottom of the page How to create a fixed sidebar layout with Bootstrap 4? How to include bootstrap css and js in reactjs app? Bootstrap date time picker How to change the bootstrap primary color? What is the '.well' equivalent class in Bootstrap 4 Bootstrap col-md-offset-* not working $(...).datepicker is not a function - JQuery - Bootstrap Failed to load resource 404 (Not Found) - file location error? Table column sizing How to add bootstrap to an angular-cli project How to get images in Bootstrap's card to be the same height/width? Stretch image to fit full container width bootstrap Bootstrap 4 card-deck with number of columns based on viewport Removing padding gutter from grid columns in Bootstrap 4 How to use Bootstrap in an Angular project? How to put a link on a button with bootstrap? Bootstrap get div to align in the center How to make Bootstrap 4 cards the same height in card-columns?

Questions with font-awesome tag:

Search input with an icon Bootstrap 4 Add tooltip to font awesome icon Font awesome is not showing icon Want to make Font Awesome icons clickable Change color when hover a font awesome icon? Is it possible to make Font Awesome icons larger than 'fa-5x'? FontAwesome icons not showing. Why? How to include a Font Awesome icon in React's render() Statically rotate font-awesome icons How to vertically align text with icon font? Make Font Awesome icons in a circle? How to use font-awesome icons from node-modules Use Font Awesome icon as CSS content Use Font Awesome Icon in Placeholder Font Awesome icon inside text input element How to center Font Awesome icons horizontally? how to use font awesome in own css? Change font-weight of FontAwesome icons? Centering FontAwesome icons vertically and horizontally Vertical alignment of text and icon in button How to center text vertically with a large font-awesome icon? Font Awesome & Unicode How do I add a Font Awesome icon to input field? Add image in title bar How to use icons and symbols from "Font Awesome" on Native Android Application How to add a spinner icon to button when it's in the Loading state? Use Font Awesome Icons in CSS Can I change the color of Font Awesome's icon color? Font Awesome not working, icons showing as squares Custom li list-style with font-awesome icon Using Font Awesome icon for bullet points, with a single list item element Use FontAwesome or Glyphicons with css :before Font-awesome, input type 'submit' Add custom icons to font awesome