Font-Awesome icons not rendering via the BoostrapCDN

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

Question

I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>

However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.

I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?

Was it helpful?

Solution

The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".

Solution:

  1. Change the path of the css or mimic it on your local machine.
  2. Run a local or remote http server and access the page.

For more info: URI starting with two slashes ... how do they behave?

OTHER TIPS

Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:

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

Ta-daa!

What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -

$python -m SimpleHTTPServer

Then, go to your browser and go to 127.0.0.1:8000 If it doesn't show up, try changing the homepage of your website to index.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top