在开发期间,使用凉亭安装时,字体真棒图标无法正确显示

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类,所以我认为问题在于这个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!