Why is Font Awesome not working with Bootstrap in JSFiddle?

I created a JSFiddle trying to show a problem I'm having with FontAwesome and it seems Font Awesome is not working at all in JSFiddle when I add Bootstrap. Here's the example:

https://jsfiddle.net/pupeno/jjjesyvt/

The code is very simple:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Bootstrap 3</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="http://getbootstrap.com/css">Left</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="active"> <i class="fa fa-user"></i> </li>
        </ul>
    </div>
 </nav>

<i class="fa fa-camera-retro"></i>

Font Awesome appears to be working fine - it's your markup that's problematic.

1. When you have a fixed top navbar, you need to push the contents down by at least 50 pixels, not by 10 - so the .fa-camera-retro is being hidden by the navbar

   Use this:

   <!-- language: lang-css -->

    body { margin-top: 60px; }
   

   Instead of this:

   <!-- language: lang-css -->

    body { margin: 10px; }
   

2. If you replace the FA icon in the navbar-right, with just plain text, you'll notice that doesn't show up either - for bootstrap styles to take affect in the navbar, they need to be in an a tag.

   Use this:

   <!-- language: lang-html -->

    <li class="active"><a href=""><i class="fa fa-user"></i></a></li>
   

   Instead of this:

   <!-- language: lang-html -->

    <li class="active"><i class="fa fa-user"></i></li>
   

###Working Demo in Fiddle