Jhipster not loading font awesome icons

问题

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

回答1:

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.

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  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)
```

回答2:

In JHipster 5.0.1 with Angular you should modify vendor.ts file. For example if you want to add faExpandArrowsAlt Fontawesome icon, you should import it and then add it with library.add(faExpandArrowsAlt);

After changing the file run yarn run webpack:build' tslint:disable.

回答3:

In JHipster V5.1 with React, to add the faUsers icon, I just edited src/main/webapp/app/config/icon-loader.ts and I was just able to use that icon within a <FontAwesomeIcon icon="users" />.

回答4:

it appears my font awesome installation got corrupt in some way. Deleting font awesome directory and re installing from bower has done the trick

回答5:

That's because cssnano made some mistakes with font-awesome.css, and no with .min file.

回答6:

Just make a 'fonts' folder in your contents directory and add your font files there, Jhipster will load all those files via gulp

来源：https://stackoverflow.com/questions/28850777/jhipster-not-loading-font-awesome-icons

标签

font-awesome

jhipster