Font awesome icons not working with bootstrap

Question

I added the CDN to my code:

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

But when I try to add a button with a font-awesome icon, it shows a blank space:

 <div class="container">
    <a class="btn" href="#">
       <i class="fa fa-twitter"></i>
    </a>
 </div>

Try commenting out other parts of your code or simplify it so you can narrow down what the issue may be. Here's a JSfiddle for you to play with: https://jsfiddle.net/804jeg82/143/ — jojo, Jun 05 '15 at 15:51
Your code works just fine if you make a snippet out of it - something else is not working for you. — vcsjones, Jun 05 '15 at 15:52
Does the order of the CDN matters? I can't find the problem. — Pablo, Jun 05 '15 at 15:57
possible duplicate of [Font-Awesome icons not rendering via the BoostrapCDN](http://stackoverflow.com/questions/22002238/font-awesome-icons-not-rendering-via-the-boostrapcdn) — jojo, Jun 05 '15 at 16:01

jojo · Accepted Answer · 2015-06-05T16:13:16.867

2

Add http: to the href so it looks like this:

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

EDIT: If your page uses HTTPS, link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).

edited Jun 05 '15 at 16:13

answered Jun 05 '15 at 16:01

jojo

1

Thanks, fixed. If you look at font awesome github it provides it the way it was: http://fortawesome.github.io/Font-Awesome/get-started/ – Pablo Jun 05 '15 at 16:03
This answer is not entirely correct. The problem you have now is that if your site is accessed with SSL (i.e. HTTPS), the fonts will not load again. – DavidG Jun 05 '15 at 16:04
So, I have to include both or? Adding the http brings me access to the resource, what If I want to test it offline? – Pablo Jun 05 '15 at 16:05
@Pablo It is mostly correct but firstly doesn't explain why adding `http:` prefix helps and secondly doesn't help if you move to having a secure website. – DavidG Jun 05 '15 at 16:32
@jojo Your answer now includes a bit if info about when using SSL but how about a site that accepts either? – DavidG Jun 05 '15 at 16:36

1 Answers1