Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save uzbekdev1/0baf3c4877d201953b69b8e8c8516f77 to your computer and use it in GitHub Desktop.
Save uzbekdev1/0baf3c4877d201953b69b8e8c8516f77 to your computer and use it in GitHub Desktop.
Add @fortawesome/fontawesome-free to an Angular project
How to add Font Awesome @fortawesome/fontawesome-free to an Angular project?
1) Go to the project directory
2) Install Font Awesome as said on their website:
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
through npm: npm install --save @fortawesome/fontawesome-free
Use '--save' not '--save-dev'
3) Add Font Awesome to 'styles' in 'anguler.json':
"styles": [
"./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"src/styles.scss"
]
4) Import Font Awesome to 'styles.scss' and add the path to the font:
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment