Font Awesome 'fa-life-ring' 不显示答案

【问题标题】：Font Awesome 'fa-life-ring' doesn't showFont Awesome 'fa-life-ring' 不显示
【发布时间】：2014-08-26 13:11:49
【问题描述】：

问题

fa-life-ring 拒绝在下面的代码中显示。我试过删除fa-5x，删除text-align: center;，但没有任何帮助。我也尝试了另一个图标，然后就可以了。

代码

  <div class="row">
    <div class="col-sm-4" style="text-align: center;">
      <i class="fa fa-file-text fa-5x"></i>
      <h3>Quotes</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper ipsum ut commodo tristique.</p>
      <a href="#" class="btn btn-default">Quotes</a>
    </div>

    <div class="col-sm-4" style="text-align: center;">
      <i class="fa fa-life-ring fa-5x"></i>
      <h3>Support</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper ipsum ut commodo tristique.</p>
      <a href="#" class="btn btn-default">Support</a>
    </div>
  </div>

截图

编辑

使用另一个图标就可以了。

【问题讨论】：

这不会导致您的问题，但您可能需要修复标题标签。您目前有两个<h3></h6>。
你使用的是什么版本的 Font Awesome？
@Josh 感谢您指出这一点。固定。
@albertedevigo 4.1.0.
已修复？您使用的是 4.1.0 和 @Josh 回答修复它？我不明白。

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

问题很可能与您使用的 Font Awesome 版本有关。您需要使用最新版本 4.1.0。如果您使用的是旧版本，则尚未添加该图标。这是一个显示它与最新版本一起使用的小提琴。

小提琴：http://jsfiddle.net/mcfarljw/5Ecgq/

您可以使用以下 CDN 测试最新版本：

//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css

【讨论】：

【解决方案2】：

我遇到了同样的问题，这是我的解决方案。我之前从 GitHub 下载了 FontAwesome 包并直接从他们的网站下载，但这个“fa-life-ring”或“fa-support”图标对我来说没有正确显示。奇怪的是，这个图标在 Safari 中显示为 OK，但在 Chrome、Firefox 或 IE 中却没有。

所以我去了这个 CDN URL： //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css

并抓取了此 CSS 文件中引用的字体文件（EOT、SVG、TTF 和 WOFF）——实际上托管在其 CDN 上的字体文件——并替换了我的 Web 服务器上的字体文件。（P.S. 我只在本地开发专用 Web 服务器上进行了测试。）

等等，现在它可以工作了。我能得出的唯一结论是 GitHub 和他们的 CDN 之间有些不同。

【讨论】：