Jhipster未加载字体真棒图标 [英] Jhipster not loading font awesome icons

问题描述

我在jhipster项目中安装了很棒的字体

当我以这种方式导入很棒的字体时，我的图标不显示-

 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

但是，如果我以这种方式导入很棒的字体，它们就会很好显示

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

我看了看字体真棒的故障排除指南，但没有什么亮点

我们非常乐意提供任何帮助，因为我希望在本地托管此文件

解决方案

问题很可能是由缩小引起的，因此我们必须使用font-awesome.min.css并将其从gulp的缩小版本中过滤掉"任务.

但让我们从头开始.

1. 安装带有Bower的font-awesome，将其保存在bower.json中:

   bower install --save font-awesome
   

2. 请勿请勿将font-awesome的任何替代"添加到bower.json中，以便gulp-inject不会更新index.html中<!-- bower:css -->块的内容. /p>

3. 将以下代码添加到index.html:

   <!-- build:css content/css/font-awesome.css -->
   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- endbuild -->
   

4. 由于font-awesome是一种字体，因此我们应将其"fonts"文件夹的内容包含到构建结果中.我们将按照"bootstrap"字体的操作进行操作，然后将以下代码添加到gulpfile.js中的"copy"任务中:

   gulp.src(config.bower + 'font-awesome/fonts/*.*')
       .pipe(plumber({errorHandler: handleErrors}))
       .pipe(changed(config.dist + 'content/fonts/'))
       .pipe(rev())
       .pipe(gulp.dest(config.dist + 'content/fonts/'))
       .pipe(rev.manifest(config.revManifest, {
           base: config.dist,
           merge: true
       }))
       .pipe(gulp.dest(config.dist + 'content/fonts/')),
   

   在行的正前方:

   gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
   

5. 最后但并非最不重要的一点是从CSS处理中筛选出缩小的CSS.所有CSS文件都在gulp/build.js中进行了缩小和串联.首先，我们将安装 gulp-filter 软件包:

   npm install --save-dev gulp-filter
   

   现在我们可以将其包含在gulp/build.js中:

   filter = require('gulp-filter')
   

   创建自定义过滤器:

   const faFilter = filter(['*','!font-awesome.css'], {restore: true});
   

   ，最后，使用此自定义过滤器包装现有的cssTask():

   .pipe(faFilter)
   .pipe(gulpIf('*.css', cssTask()))
   .pipe(faFilter.restore)
   

I have font awesome installed in my jhipster project

When I import font awesome this way my icons dont appear-

 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

But if I import font awesome this way they show up fine

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

I had a look through the font awesome troubleshooting guide but nothing stands out

Any help is much appreciated as I would like to host this file locally

解决方案

The issue is most likely caused by the minification so we have to use font-awesome.min.css and filter it out of the minification in the gulp "build" task.

But let's start from the very beginning.

1. Install font-awesome with bower saving it in the bower.json:

   bower install --save font-awesome
   

2. DO NOT add any "overrides" for the font-awesome into bower.json so that gulp-inject does not update content of the <!-- bower:css --> block in the index.html

3. Add the following code to the index.html:

   <!-- build:css content/css/font-awesome.css -->
   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- endbuild -->
   

4. Since font-awesome is a font we should include content of its "fonts" folder into the built results. We will just follow what was done for the "bootstrap" fonts and add the following code into the 'copy' task in the gulpfile.js:

   gulp.src(config.bower + 'font-awesome/fonts/*.*')
       .pipe(plumber({errorHandler: handleErrors}))
       .pipe(changed(config.dist + 'content/fonts/'))
       .pipe(rev())
       .pipe(gulp.dest(config.dist + 'content/fonts/'))
       .pipe(rev.manifest(config.revManifest, {
           base: config.dist,
           merge: true
       }))
       .pipe(gulp.dest(config.dist + 'content/fonts/')),
   

   right before the line:

   gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
   

5. And last but not the least is to filter our minified CSS out of the CSS processing. All CSS files are being minified and concatenated in the gulp/build.js. First, we shall install gulp-filter package:

   npm install --save-dev gulp-filter
   

   Now we can include it into gulp/build.js:

   filter = require('gulp-filter')
   

   create custom filter:

   const faFilter = filter(['*','!font-awesome.css'], {restore: true});
   

   and, finally, use this custom filter wrapping existing cssTask():

   .pipe(faFilter)
   .pipe(gulpIf('*.css', cssTask()))
   .pipe(faFilter.restore)
   

这篇关于Jhipster未加载字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！