字体真棒图标未显示，但 main.css 正在显示答案

【问题标题】：Font-awesome icons not showing but main.css is showing字体真棒图标未显示，但 main.css 正在显示
【发布时间】：2016-10-26 20:56:58
【问题描述】：

如果我查看我的 main.css，我有一个带有 bootstrap en font-awesome 设置的项目，我看到的第一件事就是导入了 font-awesome。以及它的所有图标，我不明白为什么 html 没有选择字体真棒类。

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

希望有人能帮我解决这个问题

【问题讨论】：

如果 cont 没有显示。您是否在正确的文件夹中查找？在你的@font-face
尝试检查开发者工具网络选项卡是否可以加载所有字体真棒文件(eot, woff2, woff, ttf and svg)，或者是否无法从浏览器加载一个或多个。
你总是可以使用字体 awesome CDN - cdn.fontawesome.com
确实没有加载eot、woff2 等。但是在引导项目中我应该在哪里加载这些？
在 font-awesome.less 文件中吗？

标签： html css twitter-bootstrap fonts

【解决方案1】：

这是您的项目文件夹的样子吗？ folder structure image

如果是这样，请在您的 font-awesome.css 文件中删除一个“../”。

 @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

【讨论】：

【解决方案2】：

您需要检查字体路径，如果您没有收到类似的警报，请检查浏览器的控制台（Chrome 上的 Ctrl+Shift+J）

加载资源失败：[...]

这种警告表示资源的路径错误。

【讨论】：