Font-Awesome字体无法加载

时间:2016-02-23 16:48:27

标签: css fonts font-awesome

我正在尝试在我的项目中使用font awesome v4.5.0。我正在使用CSS编译LESS,我得到以下内容:

@import "bootstrap/bootstrap.less";
@import "minimal-devices/minimal-devices.less";
@import "angular-tour/angular-tour.less";
@import "font-awesome/font-awesome.less";
@import "my-fonts.less";
@import "my-base.less";
@import "my-media.less";
@import "sce-style.less";

我正在使用GulpJS创建一个大型css文件,这是在gulpfile.js

gulp.task('less', function () {
    gulp.src([DIRSOURCE + 'assets/less/sce.less'])
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(rename("style.css"))
        .pipe(gulp.dest(DIRDEST + 'assets/css'));
});

当我加载我的页面时,我会在控制台中显示:

Failed to decode downloaded font: http://localhost:8000/assets/fonts/fontawesome-webfont.woff2?v=4.5.0
(index):1 OTS parsing error: invalid version tag

我不确定我做错了什么因为在我的项目中我使用font-awesome.less文件的目录字体很棒。

有人对此有任何指导吗?

1 个答案:

答案 0 :(得分:2)

问题与我设置到字体目录的路径相关联。我在第{4}行variables.less内更新为@fa-font-path "../fonts";,或者为了避免任何麻烦,我可以在第7行取消注释并使用下面的CDN

//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts"; // for referencing Bootstrap CDN font files directly