字体真棒字体未加载?

Posted

技术标签:

【中文标题】字体真棒字体未加载?【英文标题】:Font Awesome Fonts not loading? 【发布时间】:2014-09-07 09:48:15 【问题描述】:

我有一个 rails 应用程序,为了管理我的资产,我正在使用 bower。如果可能的话,我更喜欢不将 gems 用于 JS 和 CSS 等资产。

在我的vender/assets/stylesheets 目录中,我有以下内容:font-awesome 里面有scssfonts

在我的轨道 app/assets/stylesheets/application.scss 我有以下内容:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require style.scss
 *= require chosen/chosen.min
 *= require jquery.ui.all
 *= require selectize.js/css/selectize.css
 *= require selectize.js/css/selectize.bootstrap3.css
 *= require font-awesome/scss/font-awesome
 */

页面加载正常。但是当我这样做时:<i class="fa-question></i> 而不是得到一个问号,我得到一个[]。所以我检查了 chrome 中的源选项卡以查看正在加载的内容,并且在 font-awesome 目录下它只是 font-awesome.scss,在查看时我看到:

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

所以我有信心说这是在加载 css,但没有加载字体。所以我查看了变量,其中将定义字体路径并查看:

$fa-font-path:        "../fonts" !default;

根据上面列出的目录结构,字体目录确实是一个目录。

那么,发生了什么?

【问题讨论】:

【参考方案1】:

我遇到了类似的问题,并使用以下 css 文件修复了它:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

我不记得出了什么问题,只是希望这会有所帮助。

【讨论】:

【参考方案2】:

为了记录,这里的实际错误是你没有分配“fa”类。

代替:

<i class="fa-question"></i>

你需要:

<i class="fa fa-question"></i>

【讨论】:

请将缺少的引号添加到课程末尾。

以上是关于字体真棒字体未加载?的主要内容,如果未能解决你的问题,请参考以下文章

预加载字体真棒

字体真棒图像和字体很大

带有AngularJS的字体真棒5(SVG)

在Angular中绑定图标时字体真棒不起作用

Google App Engine 中未显示字体真棒

Wordpress 主题:字体真棒图标未显示