FontAwesome icons are not showing, Why? [closed]
Sebastian Wright 
Recently I've been developing a website and I'm trying to use some font-awesome icons.
The problem is, they are not showing up.
Here is the HTML:
<a href="#">Get a FREE Quote <i></i></a>or
<li><a href="index.html"><span></span>Home</a></li>I did put the stylesheet reference in the head.
I don't know why they aren't showing up.
Here is the reference:
<link href="//" rel="stylesheet">Here is the full html:
<head> <meta charset="UTF-8"> <title>Retrica</title> <link src="" rel="stylesheet"> <link href="style/normalize.css" rel="stylesheet" type="text/css"> <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body> <header> <div><!-- Start Container --> <div><!-- Start Row --> <div><!-- Start Span3 --> <div><img src="img/" alt="" width="67px" height="13,5px"></div> </div><!-- End Span3 --> <div><!-- Start Span9 --> <nav> <!-- Start Nav --> <a href="#">Get a FREE Quote <i></i></a> <ul> <!-- Start Unordered List --> <li><a href="index.html"><span></span>Home</a></li> <li><a href="#"><span></span> Contact Us</a></li> </ul> <!-- End Unordered List --> </nav><!-- End Nav --> </div><!-- End Span9 --> </div><!-- End Row --> </div><!-- End Container --> </header> <section> <a href="#">Register Now</a> </section>
</body>25 Answers
For seekers of missing font-awesome icons, I have collected a few ideas:
Assure you use a correct link to the CDN, such as:
<link href="" rel="stylesheet" type='text/css'>If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace
http://withhttps://in the link above).Double check that you don't have AdBlock Plus or uBlock enabled. They might be blocking some of the icons.
Reset your browsers cache. (On Chrome do a looong click on the reload button and select Hard Cache Reset)
Assure that the
<span>or<i>element you use, uses theFontAwesomefont family. For example, it must not just<i title="Edit"></i>but
<i title="Edit"></i>It won't work if you have something as the following in your CSS:
* { font-family: 'Josefin Sans', sans-serif !important; }If you are using IE8, are you using a HTML5 Shim?
If this doesn't work, there are further Troubleshooting Ideas on the Font Awesome Wiki.
Under your reference, you have this:
<link href="//" rel="stylesheet">Specifically, the href= part.
However, under your full html is this:
<link src="" rel="stylesheet">Have you tried replacing src= with href= in your full html to become this?
<link href="" rel="stylesheet">Works for me:
2At first I couldn't get this to work with Font Awesome 5:
<i></i>That's why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.
w3schools helped me out in this case.
New in Font Awesome 5 is the
fasprefix, Font Awesome 4 usesfa.The s in
fasstands for solid, and some icons also have a regular mode, specified by using the prefixfar.
I already noticed the different files in the FontAwesome css folder, like:
- all.min.css
- brands.min.css
- fontawesome.min.css
- regular.min.css
- solid.min.css
And that's when I realized my mistake. All I had to do was include the appropriate css to the html:
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">And then reference the correct item:
<i></i>This setup works for me. Though not all items have equivalents in each type. This will not work:
<i></i>As a side note, when you don't want to reference all seperate files then this will suffice:
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">Mine was not working because I wanted an icon which was not released in the FA version I was using.
This answers why some icons shows but others no.
Pretty obvious but I guess some people still fall for this. Like me.
3Just adding some more info to the above answers in regards with update on fontawesome,
If you use font awesome 5,
a. just copy-to-paste the below HTML,
<script defer src="" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>Note: Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body> and just before (YOUR_CLOSING_BODY)
b. And for example,
<li><a href=""><i></i></a></li>I got the similar problem, Shows icons in square, tried as per the instructions specified here :
Resolved by using this reference in head section of html page
<link rel="stylesheet" href="">You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS
<link href="" rel="stylesheet" media="screen" />I solved this problem by putting the Fonts directory at the same level as my CSS files.
0For version 5:
If you downloaded the free package from this site:
The fonts are in the all.css and all.min.css file.
So your reference will look something like this:
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">The fontawesome.css file does not include the font reference.
To whoever may be checking this out in 2018. I am using font awesome 4.7.0 and I got this issue solved by simply taking out the s in fas as seen in the code <i></i>. This was originally <i></i>.
Hope this helps.
2Notes
This answer is created when the latest version of fontawesome is v5.* but yarn and npm version points to v4.* (21.06.2019). In other words, versions installed via package managers is behind latest release !
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.
Installing font-awesome as new dependency:
$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.Checking what version of font-awesome is already installed:
$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.Problem
After you installed font-awesome dependency, you incorporate one of these two source files font-awesome.css or font-awesome.min.css (founded in node_modules/font-awesome/css/) into header of your webpage e.g.
<head> <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>Next, you visit . You select free icons and you search for sign-in icon (as an example). You copy the icon e.g. <i></i>, you paste it into your html and, icon is not shown, or is display as square or rectangle !
Solution
In essence, versions installed via package managers is behind version that is shown on website. As you can see we installed font-awesome v4.7.0 but, website shows documentation for font-awesome v5.*. Solution, visit the website that documents icons for v4.7.0 , copy appropriate icon e.g. <i aria-hidden="true"></i> and incorporate it into your html.
adding this worked for me:
<link href="" rel="stylesheet">so full example is:
<link href="" rel="stylesheet">
<a href="#">Compute <i></i></a>If you define custom CSS you must set font-weight: 900; for some newer Font Awesome library (from version 5). Not setting this font-weight it may show squares.
If you are using blogger hosting, use this url stylesheet css:
<link href=' rel='stylesheet'/>Try the below two links keep in header tag.
<link href="" rel="stylesheet">Getting the Icons from the below link :
<link rel="stylesheet" href="">I use:
<link rel="stylesheet" href="">
<a aria-hidden="true" href=""></a>and style after:
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}the CDN link that you had posted i suppose is why it wasnt showing correctly, you can use this one below, it works perfectly for me.
<link href="" rel="stylesheet">You can add this in .htaccess file in the directory of awesome font
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>
</FilesMatch>I have tested and it's working.
Instead of this
<link href="//" rel="stylesheet">Use it with HTTPS
<link href="" rel="stylesheet">Use this link:
<link rel="stylesheet" href="" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />If you are using a newer version of Angular, just installing the package with npm/yarn is not enough. You also need to import the css file (with @import "~bootstrap-icons/font/bootstrap-icons.css";) in your styles.scss .
Make sure you include the rel and type, as in rel="stylesheet" type='text/css', in the link to the Awesomefont CSS file.
Without these the file wasn't loading correctly for me.
You need a font importer.| try
<style>
@import url(););
</style>I got mine to work by editing the main font-awesome.css file. It has urls to the src (woff, eot, etc...) I had to change them to the absolute path eg: Then it worked!
1Change this:
<link href="//" rel="stylesheet">To this:
<link href="" rel="stylesheet" type="text/css">I believe you need the http: otherwise it doesn't know what protocol to use (and uses the wrong one, file: for instance, as a result).
