FontAwesome icons not showing. Why?

Question

Recently I\'ve been developing this website and I\'m trying to put a font awesome icons in it, so it\'s scalable.

The thing is they are not showing up.

Look

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.