Fontawesome icons not showing up on “./mvnw” start of angular but do show up on “npm start”

Question

Fontawesome icons not working properly in angular project.

So I am basically having a problem with fontawesome icons. If I use tag, that only works for the icons already in navigation bar by default, I do not know how to add custom ones (like envelope for example). Hence I added fontawesome .css to index.html and used good old to insert icons. That works just fine when I start up the front end with "npm start" na open up localhost:9000, but it does not work when I start up "./mvnw" and open up localhost:8080. What could be the problem ? I basically need any solution to use any free fontawesome icon I want.

index.html ->

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

app.module.ts ->

import { AngularFontAwesomeModule } from 'angular-font-awesome';
imports: [AngularFontAwesomeModule]

navbar.component.html ->

<i class="fa fa-envelope" aria-hidden="true"></i>

No error messages. It simply doesn't show up, like I never added .css file.

Answer 1

To import new icons in a JHipster project, add the icon in vendor.ts . The library is configured this way to only include icons that are used, and to not package the unused icons in production builds.

Ignore the ..... in the code below, it means there is other content. Shortened to fit in an answer.

import { library } from '@fortawesome/fontawesome-svg-core';
import {
  faUser,
  faSort,
  .....
  faEnvelope
} from '@fortawesome/free-solid-svg-icons';

// Adds the SVG icon to the library so you can use it in your page
library.add(faUser);
library.add(faSort);
....
library.add(faEnvelope);

Then you can use the regular font-awesome tag for including the envelope icon:

<fa-icon [icon]="faEnvelope"></fa-icon>

Answer 2

I didn't import the icon itself. This solved the problem :

navbar.component.ts ->

import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
expored class NavbarComponent implements OnInit {
    faEnvelope = faEnvelope
}

navbar.component.html ->

<fa-icon [icon]="faEnvelope"></fa-icon>