How do you add Font Awesome to Ionic 4

Question

There are a lot of tutorials and articles of how to include Font Awesome in an Ionic 3 project but I struggled finding any on how to add Font Awesome into an Ionic 4 project

Answer 1

Just in case if someone deals with FontAwesome PRO. I've recently bought FontAwesome pro icons and integreted them like this:

• copy the FontAwesome webfonts folder in src/assets/
• copy the FontAwesome scss folder in src/theme/

• change the $fa-font-path in _variables.scss with assets/webfonts !default;

• add in global.scss

  @import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/light.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/regular.scss';

Finally you can use them with the i tag. For example

you can find more details about the fa- classes here https://fontawesome.com/how-to-use/on-the-web/setup/getting-started