Question

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

{
  "statusCode": 400,
  "error": "Bad Request",
  "message": "sessid is not allowed",
  "validation": {
    "source": "payload",
    "keys": [
      "sessid"
    ]
  }
}

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

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

这是我的config.rb

font-awesome-sass (4.3.2.1)

styles.scss

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

我错过了哪一步？因为我完全不确定该怎么做。

来自浏览器的

错误消息：

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


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

Answer 1

刚刚解决了我遇到的类似问题并希望分享解决方案。如果没有看到您的目录结构，很难确定这是否能解决您的问题。

我的预感是，您的问题与我的一样，是$fa-font-path中的scss变量font-awsome/scss/_variables.scss未正确引用您的字体目录的路径。这默认设置为../../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 - 显示为一个盒子的图标 - 使用没有轨道的指南针

1 个答案: