Font Awesome 图标在开发过程中无法正确显示，与 bower 一起安装

Question

我用你搭建我的应用程序

yo gulp-webapp //I create a basic boilerplate with bootstrap sass

然后我安装 FontAwesome

bower install font-awesome --save

这就是我的 main.scss

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";

// bower:scss
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
@import "../../bower_components/fontawesome/scss/font-awesome.scss";
// endbower

然后我将其添加到我的 html 页面

<i class="fa fa-angle-right"></i>

如果我启动 "gulp serve" 它只显示一个白色方块，相反，如果我使用 "gulp" 构建，结果 html 工作正常。

结果 main.css 包含所有 fa class 所以我认为问题出在这个 var

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

这个变量在这里：bower_components/font-awesome/scss/-variables.scss

Answer 1

尝试设置

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

在@import声明之前的main.scss文件中。

这对我有用。此外，从字体真棒页面（http://fortawesome.github.io/Font-Awesome/get-started/）它指出：

PRO: Custom LESS or SASS

Use this method to customize Font Awesome 4.2.0 using LESS or SASS.

Copy the font-awesome/ directory into your project.

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

@fa-font-path: "../font";

The font path is relative from your compiled CSS directory. Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go. Check out the examples to start using Font Awesome!

Answer 2

我使用 generator-gulp-angular 中的 gulp 构建过程，它使用 wiredep 注入 Bower 依赖项。

但由于某些原因，fontawesome 无法开箱即用。其实我有以下问题：

字体-awesome.css没有注入index.html
构建 dist 版本时字体文件不在字体目录中

最后我发现 silvenon

这条非常有用的信息

将替代附加到您的 bower.json：

{
    "name": "webapp",
    "dependencies": {
        "modernizr": "~2.6.2",
        "jquery": "~1.11.0",
        "fontawesome": "~4.0.3"
    },
    "devDependencies": {},
    "overrides": {
        "fontawesome": {
            "main": [
                "css/font-awesome.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.svg"
             ]
         }
     }
}

之后 wiredep 任务将在 index.html 中注入 css 并将字体文件复制到字体文件夹中。

Answer 3

我注意到 webfonts 文件夹的路径随着安装的不同而变化。进入 node_modules/@fortawesome 并检查相对路径。我想知道这个问题是否发生在 PRO 版本中，以及当使用 Jenkins 将应用程序部署到生产环境时如何处理这个问题。

Font Awesome 图标在开发过程中无法正确显示，与 bower 一起安装

Font Awesome icons don't show up correctly during development, installed with bower

sass

font-awesome