FontAwesome - 图标显示为方框 - 使用没有 rails 的 Compass

Question

我的字体很棒的图标显示为一个框，这只是意味着图标没有加载，在我的 html 中我只是将其设置为：

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

我检查过 font-awesome-sass 已经正确安装：我在我的控制台中看到我有：

font-awesome-sass (4.3.2.1)

这是我的 config.rb

require "susy"
require 'font-awesome-sass'
css_dir = '_/css'
sass_dir = '_/components/sass'
javascripts_dir = '_/js'
output_style = :compressed

styles.scss

@import 'compass';
@import 'compass/reset';
@import 'susy';
@import "font-awesome-compass";
@import "font-awesome";


@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@modules 'modules';

有没有我漏掉的步骤？因为我完全不知道该怎么做。

来自浏览器的错误消息：

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): status=2147500037
source: file:///fonts/font-awesome/fontawesome-webfont.woff styles.css
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): status=2147500037
source: file:///fonts/font-awesome/fontawesome-webfont.ttf styles.css
downloadable font: no supported format found (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:5)
source: (end of source list)

Answer 1

刚刚解决了我遇到的类似问题，想分享解决方案。如果没有看到您的目录结构，就很难确切地确定这是否会解决您的问题。

我的直觉是你的问题和我的一样，是 font-awsome/scss/_variables.scss 中的 scss 变量 $fa-font-path 没有正确引用你的字体目录的路径。这默认设置为 ../../fonts，在我的例子中这是不正确的。需要注意的是，这个路径是相对于你编译的 css 目录的。

我的目录结构如下所示：

-cdn
  L-css
  L-fonts
    L-font-awesome.woff
    L-font-awesome.woff2
    L-font-awesome.ttf
    L-*other font-awesome files
  L- scripts
-node_modules
  L-font-awesome
-_scss
  L-screen.scss

在screen.scss中，我导入了很棒的字体：@import "../node_modules/font-awesome/scss/font-awesome";（使用完整路径来说明位置。这应该可以留给@import "font-awesome"，因为它是一个节点模块）。

然后我立即在 screen.scss 中设置变量，以覆盖 node_modules/font-awesome/scss/_variables.scss 中的默认设置 $fa-font-path: "../fonts" !default; , 。这可以防止变量在 npm install 之后被重置。

希望这可以帮助其他有类似问题的人！

FontAwesome - 图标显示为方框 - 使用没有 rails 的 Compass

FontAwesome - Icons showing as a box - using Compass without rails

css

ruby-on-rails

compass