Question

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

代码非常简单：

<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似乎工作正常 - 这是你的标记有问题。

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

使用此：
```
body { margin-top: 60px; }
```
而不是：
```
body { margin: 10px; }
```
如果您更换导航栏右侧的FA图标，只使用纯文本，您会注意到也没有显示 - 要使导航样式在导航栏中生效，它们需要位于导航栏中一个a标记。

使用此：
```
<li class="active"><a href=""><i class="fa fa-user"></i></a></li>
```
而不是：
```
<li class="active"><i class="fa fa-user"></i></li>
```

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

1 个答案:

Working Demo in Fiddle