Font-Awesome 字体未加载

Posted 2023-03-03

【中文标题】Font-Awesome 字体未加载

【英文标题】：Font-Awesome fonts not loading

【发布时间】：2016-06-05 15:10:37

【问题描述】：

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

@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 和 font-awesome.less 文件。

有人对此有任何指导吗？

【问题讨论】：

您的项目中有字体文件吗？也许你有错误的版本。

我愿意，它们包含在assets/fonts 我的LESS 变量中，路径是../../fonts

【参考方案1】：

问题与我设置的字体目录的路径相关联。我在第 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