Font-Awesome fonts not loading

Refresh

December 2018

Views

916 time

2

I'm trying to use font awesome v4.5.0 in my project. I'm compiling my CSS using LESS and I've got the following:

@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";

I'm using GulpJS to create one large css file and this is in my 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'));
});

When I load up my page I get this shown in the console:

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

I'm not sure what I'm doing wrong as In my project I have the directory font-awesome with the font-awesome.less file.

Anyone have any guidance on this?

1 answers

2

Проблема была связана с путем я установить в каталог шрифтов. Я обновил в variables.less на линии 4 @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