为什么 Font Awesome 不能与 JSFiddle 中的 Bootstrap 一起使用？答案

【问题标题】：Why is Font Awesome not working with Bootstrap in JSFiddle?为什么 Font Awesome 不能与 JSFiddle 中的 Bootstrap 一起使用？
【发布时间】：2015-10-10 04:12:56
【问题描述】：

我创建了一个 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>

【问题讨论】：

url应该不是url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); ? （前面加了 http:）
@Laurent 不，您可以跳过 http: 以便浏览器相应地使用 http 或 https：stackoverflow.com/questions/4978235/…
感谢您提供的信息 ;)
检查是否包含 Font Awesome 文件
@ArunKumarM 我已经包含了很棒的字体 css 文件。

标签： html css twitter-bootstrap font-awesome jsfiddle

【解决方案1】：

Font Awesome 似乎运行良好 - 是您的标记有问题。

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

使用这个：
```
body { margin-top: 60px; }
```
不是这个：
```
body { margin: 10px; }
```
如果您将右侧导航栏中的 FA 图标替换为纯文本，您会注意到该图标也不会显示 - 要让引导样式在导航栏中生效，它们需要位于 @987654325 中@标签。

使用这个：
```
<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

【讨论】：