FontAwesome icons are not showing, Why?

HtmlCssFont Awesome

Html Problem Overview

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 class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

or

<li><a href="index.html"><span class="fa fa-home fa-2x"></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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Here is the full html:

<head>
	<meta charset="UTF-8">
	<title>Retrica</title>
	<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" 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 class="top-header">
    	<div class="container"><!-- Start Container -->
        	<div class="row"><!-- Start Row -->
            	<div class="span3"><!-- Start Span3 -->
    				<div class="logo"><img src="img/[email protected]" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                	<nav class="main-nav"> 	<!-- Start Nav -->
                	
                		<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                    	<ul class="nav-ul">	<!-- Start Unordered List -->
                    		<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                    		<li><a href="#"><span class="fa fa-mobile-phone fa-2x"></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="#" class="btncta">Register Now</a>
    </section>

</body>

Html Solutions

Solution 1 - Html

Under your reference, you have this:

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

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

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

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

Solution 2 - Html

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="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
    rel="stylesheet"  type='text/css'>

  • If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http:// with https:// 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 the FontAwesome font family. For example, it must not just

      <i class="fa-pencil" title="Edit"></i>

but

    <i class="fa fa-pencil" 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.

Solution 3 - Html

At first I couldn't get this to work with Font Awesome 5:

<i class="fa fa-sort-down"></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 fas prefix, Font Awesome 4 uses fa. > > The s in fas stands for solid, and some icons also have a > regular mode, specified by using the prefix far.

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 class="fas fa-sort-down"></i>

This setup works for me. Though not all items have equivalents in each type. This will not work:

<i class="far fa-sort-down"></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">

Solution 4 - Html

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.

Solution 5 - Html

Just 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="https://use.fontawesome.com/releases/v5.0.8/js/all.js" 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="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

Solution 6 - Html

I got the similar problem, Shows icons in square, tried as per the instructions specified here : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Resolved by using this reference in head section of html page

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Solution 7 - Html

You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS

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

Solution 8 - Html

I solved this problem by putting the Fonts directory at the same level as my CSS files.

Solution 9 - Html

For version 5:

If you downloaded the free package from this site:

https://fontawesome.com/download

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.

Solution 10 - Html

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 class="fa fa-[icon-name]"></i>. This was originally <i class="fas fa-[icon-name]"></i>.

Hope this helps.

Solution 11 - Html

Notes

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 https://fontawesome.com/. You select free icons and you search for sign-in icon (as an example). You copy the icon e.g. <i class="fas fa-sign-in-alt"></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 https://fontawesome.com/ 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 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.

Solution 12 - Html

adding this worked for me:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

take a look

so full example is:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

Solution 13 - Html

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.

Solution 14 - Html

If you are using blogger hosting, use this url stylesheet css:

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

Solution 15 - Html

Try the below two links keep in header tag.

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

Getting the Icons from the below link :

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

Solution 16 - Html

I use:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></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);
}

Solution 17 - Html

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="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Solution 18 - Html

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.

Solution 19 - Html

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>

Solution 20 - Html

I have tested and it's working.

Instead of this

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

Use it with HTTPS

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

Solution 21 - Html

Use this link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />

Solution 22 - Html

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 .

Solution 23 - Html

You need a font importer.| try

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

Solution 24 - Html

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: http://mywebsite.com/font-awesome.woff Then it worked!

Solution 25 - Html

Change this:

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

To this:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" 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).

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Font Awesome Solutions

Previous Solution:

Build Android Studio app via command line

Android StudioGradleCommand LineAndroid Gradle-Plugin

Next Solution:

How does Bluebird's util.toFastProperties function make an object's properties "fast"?

Javascriptnode.jsPerformanceV8Bluebird

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLuis ValdezView Question on Stackoverflow
Solution 1 - HtmlNathanGView Answer on Stackoverflow
Solution 2 - HtmlmxroView Answer on Stackoverflow
Solution 3 - Htmluser4864425View Answer on Stackoverflow
Solution 4 - HtmlTaiguara AndradeView Answer on Stackoverflow
Solution 5 - HtmlSundar GsvView Answer on Stackoverflow
Solution 6 - HtmlRahul.SView Answer on Stackoverflow
Solution 7 - HtmlChatchawan WongsiriprasertView Answer on Stackoverflow
Solution 8 - HtmlloloView Answer on Stackoverflow
Solution 9 - Htmllive-loveView Answer on Stackoverflow
Solution 10 - HtmlGoodluck LeoView Answer on Stackoverflow
Solution 11 - HtmlLukasz DynowskiView Answer on Stackoverflow
Solution 12 - HtmledgarmtzeView Answer on Stackoverflow
Solution 13 - HtmljurevView Answer on Stackoverflow
Solution 14 - HtmlNurdin BM.View Answer on Stackoverflow
Solution 15 - HtmlCherryView Answer on Stackoverflow
Solution 16 - HtmlTran Anh HienView Answer on Stackoverflow
Solution 17 - HtmlJohn Kesh MahuguView Answer on Stackoverflow
Solution 18 - HtmlElliot RobertView Answer on Stackoverflow
Solution 19 - HtmlWaleed HakimView Answer on Stackoverflow
Solution 20 - HtmlAtif TariqView Answer on Stackoverflow
Solution 21 - Htmlsamin View Answer on Stackoverflow
Solution 22 - HtmlNobodySomewhereView Answer on Stackoverflow
Solution 23 - HtmlSIAMWEBSITEView Answer on Stackoverflow
Solution 24 - Htmlcrystallove18View Answer on Stackoverflow
Solution 25 - HtmlShaharView Answer on Stackoverflow