CODEWITHSUNDEEP
csshtmltwitter-bootstrapfont-awesome
Connor Black
Connor Black

Reputation: 7181

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:

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

Upvotes: 286

Views: 878507

Answers (30)

Ahmad Adibzad
Ahmad Adibzad

Reputation: 667

For Font Awesome 6, there is no public CDN on their website. If your local files are not working, you can use this CDN:

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

Other versions are here:

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

Upvotes: 6

BabaNew
BabaNew

Reputation: 986

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>

Upvotes: 3

Nabil Kadimi
Nabil Kadimi

Reputation: 10424

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

Upvotes: 238

prajwal tulawe
prajwal tulawe

Reputation: 41

In my case, I just copied

<i class="fa-solid fa-tags"></i> //provided by font awesome

for an existing front-end template that included some other icons from font awesome, but this did not worked, So by adding 'fas' class and it worked ;

<i class="fas fa-solid fa-tags"></i> //working

Upvotes: 0

A. Atal
A. Atal

Reputation: 115

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>

Upvotes: 3

A Petrov
A Petrov

Reputation: 484

After 5+ hours of struggling I found what was causing the problem for me.

  1. Using FontAwesome 5 you should be using fas (notice the "s" at the end):

<i class="fas fa-camera"></i>

  1. I was using "regular" font, which apparently is paid in this version - I switched to "solid" and it all started working fine.

Upvotes: 2

Andr&#233; Duarte
Andr&#233; Duarte

Reputation: 305

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

Upvotes: 1

manian
manian

Reputation: 1438

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

Upvotes: 5

Shaiju T
Shaiju T

Reputation: 6607

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

Upvotes: 16

Bren1818
Bren1818

Reputation: 2752

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.

Upvotes: 69

Israel
Israel

Reputation: 1464

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>

Upvotes: 18

Lars Blumberg
Lars Blumberg

Reputation: 21461

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.

Upvotes: 2

Dipesh Chauhan
Dipesh Chauhan

Reputation: 21

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.

Upvotes: 1

AwesomeSanjay
AwesomeSanjay

Reputation: 23

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!

Upvotes: 0

the_haystacker
the_haystacker

Reputation: 1625

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

Upvotes: 14

Enrique Martinez
Enrique Martinez

Reputation: 128

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>

Upvotes: 3

live-love
live-love

Reputation: 52534

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

Upvotes: 2

Lukasz Dynowski
Lukasz Dynowski

Reputation: 13700

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.

Upvotes: 0

subindas pm
subindas pm

Reputation: 2784

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.

Thanks

Upvotes: 0

BartZalas
BartZalas

Reputation: 315

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) {
  .lib-font-face(
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
   );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
  );
  .lib-font-face(
    @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:

 .my-newclass:before{
     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;
}

Upvotes: 0

ehacinom
ehacinom

Reputation: 8914

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>

Upvotes: 6

Danie Schoeman
Danie Schoeman

Reputation: 188

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.

Upvotes: 0

J Doe
J Doe

Reputation: 141

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!

Upvotes: 11

Bengi Besceli
Bengi Besceli

Reputation: 3748

Use with the upper class

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

Upvotes: 1

desertSniper87
desertSniper87

Reputation: 890

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

Upvotes: 0

human17
human17

Reputation: 2957

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

Upvotes: 1

Kumar Deepam
Kumar Deepam

Reputation: 1029

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

Upvotes: 83

ShieldOfSalvation
ShieldOfSalvation

Reputation: 1351

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.

Upvotes: 0

jitendra varshney
jitendra varshney

Reputation: 3562

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

Upvotes: 2

SantoshK
SantoshK

Reputation: 1877

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

Upvotes: 2

Related Questions