我在我的jhipster项目中安装了Font Awesome字体库。
但是当我按照以下方式导入Font Awesome时，我的图标没有出现 -
<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 的故障排除指南，但是没有找到任何突出的问题。
如果能提供帮助那就非常感激，因为我想在本地托管这个文件。
faExpandArrowsAlt Fontawesome图标，您应该先导入它，然后使用library.add(faExpandArrowsAlt);添加它。yarn run webpack:build' tslint:disable。src/main/webapp/app/config/icon-loader.ts 文件在 JHipster v5.1 with React 中获得相同的效果。 - Dan Hardiker问题很可能是由代码压缩引起的，因此我们需要使用font-awesome.min.css，并在gulp“构建”任务中将其过滤掉。
但让我们从最基础的开始。
Install font-awesome with bower saving it in the bower.json:
bower install --save font-awesome
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
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 -->
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}')
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)
faUsers图标，只需编辑src/main/webapp/app/config/icon-loader.ts文件，然后就可以在<FontAwesomeIcon icon="users" />中使用该图标。看起来我的 Font Awesome 安装出了一些问题。删除 Font Awesome 目录并从 Bower 重新安装解决了这个问题。
这是因为cssnano在font-awesome.css文件中犯了一些错误，而没有在.min文件中出现。