Reputation: 1787

Font awesome is not showing icon

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.

Upvotes: 127

Answers (30)

Doctor

Reputation: 7946

Only some icons were showing and some not.

I was using some prebuild website from html5up that had this working icon :

<a class="icon brands fa-twitter"><span class="label">Twitter</span></a>

But when I tried:

<span class="icon fa-user-cog">
  Technical Documentation
</span>

Nothing was shown...

Solution:

Some prebuild CSS needed a solid class, like this:

<span style="display: inline" class="icon solid fa-user-cog">
  Technical Documentation
</span>

Upvotes: 0

Abhi_dataenti

Reputation: 1

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

Upvotes: 0

Chidi-Nwaneto

Reputation: 654

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>

Upvotes: 0

pari

Reputation: 808

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;

}

Upvotes: 1

mirek

Reputation: 1340

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' %}">

Upvotes: 3

Reece Anderson

Reputation: 81

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

Upvotes: 7

De Zin Htang

Reputation: 71

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

Upvotes: 3

sani

Reputation: 1

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>

Upvotes: 0

bonkisama

Reputation: 1

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

Upvotes: 0

Ogglas

Reputation: 69928

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

Upvotes: 0

Jamsheer

Reputation: 23

my issue was the one having most of the votes

*{
font-family: xxxxx
}

changing it to this solved the problem

body{
font-family: xxxx
}

Upvotes: 1

Hrithik verma

Reputation: 81

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>

Upvotes: 8

Bruno Leveque

Reputation: 2811

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

Upvotes: 9

monkey

Reputation: 543

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>

Upvotes: 0

Yngve Høiseth

Reputation: 590

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.

Upvotes: 2

backciro

Reputation: 11

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

(with scss preprocessor); hope u solved

Upvotes: 0

Tou Toua Yang

Reputation: 1

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"

Upvotes: 0

Jeff Diederiks

Reputation: 1380

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

Upvotes: 5

Halid

Reputation: 140

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

Upvotes: 13

jtubre

Reputation: 699

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.

Upvotes: 0

Namwanza Ronald

Reputation: 376

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>

Upvotes: -1

James Wilkins

Reputation: 7357

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.

Upvotes: 1

Michael Shulman

Reputation: 663

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.

Upvotes: 0

krystonen

Reputation: 744

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

Upvotes: 61

Dagmar

Reputation: 3261

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>

Upvotes: 2

Daniel Barde

Reputation: 2703

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.

Upvotes: 98

Mickers

Reputation: 1449

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.

Upvotes: 4

sst

Reputation: 11

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.

Upvotes: 1

Obaidul Haque

Reputation: 950

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.

Upvotes: 1

OneMoreQuestion

Reputation: 1753

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.

Upvotes: 35

Font awesome is not showing icon

Answers (30)

Related Questions