Question

我用yo

支持我的应用程序

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>

如果我推出＆＃34; gulp serve＆＃34;它只显示一个白色的正方形，相反，如果我用＆＃34; gulp＆＃34;结果html工作正常。

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

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

这个var在这里：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：自定义LESS或SASS

使用此方法使用LESS或SASS自定义Font Awesome 4.2.0。

将font-awesome /目录复制到项目中。

打开你的项目的font-awesome / less / variables.less或font-awesome / scss / _variables.scss并编辑@fa-font-path或$ fa-font-path变量指向你的字体目录。

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

字体路径与编译的CSS目录相关。       如果使用静态编译器，请重新编译LESS或SASS。否则，你应该好好去。       查看示例以开始使用Font Awesome！

Answer 2

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

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

未在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，并将字体文件复制到fonts文件夹中。

Answer 3

我注意到webfonts文件夹的路径在安装之间有所变化。进入node_modules / @ fortawesome并检查相对路径。我想知道PRO版本是否会发生此问题，以及使用Jenkins将应用程序部署到生产环境后如何处理。

字体真棒图标在开发过程中无法正确显示，并与凉亭一起安装

3 个答案: