Let's follow the steps to add Font-Awesome icons to our Angular web application:
- First, we will need to add Font-Awesome's font files and styles to our /src/styles.scss or another global Sass file in our project. Again, we use sass-loader's helpful lookup feature to reference both the font files inside node_modules/font-awesome/fonts/ and then import its Sass styles from node_modules/font-awesome/scss/.
@import "~font-awesome/scss/font-awesome";
- We will also need to tell font-awesome where it can find the font files required by its styles by providing it with a style path. We will define this before our Font-Awesome import so that this value will override the default variable value inside Font-Awesome's Sass.
$fa-font-path: ...