FontAwesome icons are not showing, Why? [closed]

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>

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

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

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  or  element you use, uses the FontAwesome font family. For example, it must not just
```

```
but
```

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

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

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.

FontAwesome icons are not showing, Why? [closed]

Related

Recent Posts