Jhipster not loading font awesome icons

Question

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

Answer 1

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.

Answer 2

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)
   

Answer 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" />.