html - 为什么 Font Awesome 不能在 JSFiddle 中使用 Bootstrap？

Question

我创建了一个 JSFiddle 试图显示我在使用 FontAwesome 时遇到的问题，当我添加 Bootstrap 时，Font Awesome 似乎根本无法在 JSFiddle 中工作。这是示例:

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

代码很简单:

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

Answer 1

Font Awesome 似乎工作正常 - 问题出在您的标记上。

1. 当你有一个固定的顶部导航栏时，你需要将内容向下推至少 50 像素，而不是 10 - 所以 .fa-camera-retro 被隐藏了导航栏

   使用这个:

   body { margin-top: 60px; }
   

   代替这个:

   body { margin: 10px; }
   

2. 如果您将导航栏右侧的 FA 图标替换为纯文本，您会注意到它也没有显示 - 要使 Bootstrap 样式在导航栏中生效，它们需要位于一个 a 标签。

   使用这个:

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

   代替这个:

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

Working Demo in Fiddle