Jhipster 没有加载字体真棒图标

Question

我的 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">

我查看了很棒的字体故障排除指南，但没有什么特别之处

非常感谢任何帮助，因为我想在本地托管此文件

Answer 1

我的 font awesome 安装似乎以某种方式损坏了。删除 font awesome 目录并从 bower 重新安装已经成功了

Answer 2

那是因为 cssnano 在 font-awesome.css 上有一些错误，而在 .min 文件上没有。

Answer 3

这个问题很可能是由缩小引起的，所以我们必须使用 font-awesome.min.css 并在 gulp "build" 任务中将其从缩小中过滤掉。

但让我们从头开始。

使用 bower 安装 font-awesome，将其保存在 bower.json:
```
bower install --save font-awesome
```
不要将 font-awesome 的任何 "overrides" 添加到 bower.json 中，以便 gulp-inject不更新 index.html

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

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

由于 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}')

最后但并非最不重要的是从 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)
```

Answer 4

只需在您的内容目录中创建一个 'fonts' 文件夹并在其中添加您的字体文件，Jhipster 将通过 gulp

加载所有这些文件

Answer 5

在带有 Angular 的 JHipster 5.0.1 中，您应该修改 vendor.ts 文件。例如，如果你想添加 faExpandArrowsAlt Fontawesome 图标，你应该导入它，然后用 library.add(faExpandArrowsAlt);

添加
更改文件后运行yarn run webpack:build' tslint:disable.

Answer 6

在带有 React 的 JHipster V5.1 中，为了添加 faUsers 图标，我刚刚编辑了 src/main/webapp/app/config/icon-loader.ts 并且能够使用该图标<FontAwesomeIcon icon="users" />.

内

Jhipster 没有加载字体真棒图标

Jhipster not loading font awesome icons

font-awesome

jhipster