How to add font-awesome to Angular 2 CLI project

Question

I m using Angular 2  and Angular CLI   How do I add font-awesome to my project

User · Answer

With Angular2 RC5 and angular-cli 1 0 0-beta 11-webpack 8 you can achieve this with css imports   Just install font awesome   npm install font-awesome --save   and then import font-awesome in one of your configured style files    import     node modules font-awesome css font-awesome css      style files are configured in angular-cli json

User · Answer

Add it in your package json as   devDependencies   font-awesome    version number   Go to Command Prompt type npm command which you configured

User · Answer

In Angular 11 npm install  fortawesome angular-fontawesome --save npm install  fortawesome fontawesome-svg-core --save npm install  fortawesome free-solid-svg-icons --save  And then in app module ts at imports array import   FontAwesomeModule   from   fortawesome angular-fontawesome      imports        BrowserModule      FontAwesomeModule       And then in any component ts turningGearIcon   faCogs   And then any component html  lt fa-icon  icon   quot turningGearIcon quot  gt  lt  fa-icon gt

User · Answer

You can use Angular Font Awesome package     npm install --save font-awesome angular-font-awesome   and then import in your module   import   AngularFontAwesomeModule   from  angular-font-awesome         NgModule                      imports                          AngularFontAwesomeModule                                 export class AppModule       and import the style in angular-cli file       styles              styles css               node modules font-awesome css font-awesome css           see more details about the package in npm library      https   www npmjs com package angular-font-awesome   and then use it like this    lt i class  fa fa-coffee  gt  lt  i gt

User · Answer

To use Font Awesome 5 in your Angular project  insert the code below in the  of the src index html file    lt link rel  stylesheet  href  https   use fontawesome com releases v5 4 1 css all css  integrity  sha384-5sAR7xN1Nv6T6 dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz  crossorigin  anonymous  gt    Good luck

User · Answer

Thought I would throw in my resolution to this since font-awesome is now installed differently according to their documentation   npm install --save-dev  fortawesome fontawesome-free   Why it is fortawesome now escapes me but thought I would stick with the most recent version rather than falling back to the old font-awesome   Then I imported it into my scss   fa-font-path      node modules  fortawesome fontawesome-free webfonts    import    fortawesome fontawesome-free scss fontawesome    import    fortawesome fontawesome-free scss brands    import    fortawesome fontawesome-free scss regular    import    fortawesome fontawesome-free scss solid    import    fortawesome fontawesome-free scss v4-shims     Hope this helps

User · Answer

If for some reason you cant install package throw npm  You can always edit index html and add font awesome CSS in the head  And then just used it in the project

User · Answer

Font Awesome gives you scalablevector icons that can instantly be customized   size  color  drop shadow  and anything that can be done with the power of CSS   Create a new project and navigate into the project   ng new navaApp cd navaApp   Install the font-awesome library and add the dependency to package json   npm install --save font-awesome   Using CSS  To add Font Awesome CSS icons to your app        in angular json  build      options      styles           node modules font-awesome css font-awesome css      src styles css            Using SASS  Create new project with SASS   ng new cli-app --style scss   To use with existing project with CSS   Rename src styles css to src styles scss Change angular json to look for styles scss instead of css      in angular json  build      options      styles        src styles scss           Make sure to change styles css to styles scss   Create an empty file  variables scss in src    Add the following to  variables scss    fa-font-path       node modules font-awesome fonts     In styles scss add the following    import  variables    import     node modules font-awesome scss font-awesome

User · Answer

Starting from https   github com AngularClass angular-starter  after having tested a lot of different configuration combination  here is what I did to get it working with AoT   As already said many times  in my app component scss    fa-font-path    font-awesome fonts   default   import   font-awesome scss font-awesome     Then in webpack config js  actually webpack commong js in the starter pack      In the plugins section   new CopyWebpackPlugin         from   src assets   to   assets           from   src meta          from   node modules font-awesome fonts   to   assets fonts           In the rules section           test      eot woff2  svg ttf                  use   file-loader name  assets fonts  name   ext

User · Answer

I wasted several hours trying to get the latest version of FontAwesome 5 2 0 working with AngularCLI 6 0 3 and Material Design   I followed the npm installation instructions off of the FontAwesome website  Their latest docs instruct you do install using the following   npm install  fortawesome fontawesome-free   After wasting several hours I finally uninstalled it and installed font awesome using the following command  this installs FontAwesome v4 7 0    npm install font-awesome --save   Now it s working fine using    fa-font-path    font-awesome fonts   default   import   font-awesome scss font-awesome scss    lt mat-icon fontSet  fontawesome  fontIcon  fa-android  gt  lt  mat-icon gt

User · Answer

I wanted to use Font Awesome 5  and most answers focus on older versions  For the new Font Awesome 5  the angular project hasn t been released yet  so if you want to make use of the examples mentioned on the font awesome website atm you need to use a work around   especially the fas  far classes instead of the fa class   I ve just imported the cdn to Font Awesome 5 in my styles css  Just added this in case it helps someone find the answer quicker than I did  -   Code in Style css   import  https   use fontawesome com releases v5 0 7 css all css

User · Answer

For Angular 6   First npm install font-awesome --save  Add  node modules font-awesome css font-awesome css to angular json   Remember not to add any dots in front of the node modules

User · Answer

UPDATE Feb 2020  fortawesome package now supports ng add but it is available only for angular 9  ng add  fortawesome angular-fontawesome  UPDATE 8 Oct 2019  You can use a new package https   www npmjs com package  fortawesome angular-fontawesome npm install  fortawesome angular-fontawesome  fortawesome fontawesome-svg-core  fortawesome free-solid-svg-icons  Add FontAwesomeModule to imports in src app app module ts  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core     import   AppComponent   from    app component   import   FontAwesomeModule   from   fortawesome angular-fontawesome      NgModule     imports        BrowserModule      FontAwesomeModule        declarations   AppComponent     bootstrap   AppComponent     export class AppModule      Tie the icon to the property in your component src app app component ts  import   Component   from   angular core   import   faCoffee   from   fortawesome free-solid-svg-icons      Component     selector   app-root     templateUrl     app component html     export class AppComponent     faCoffee   faCoffee     Use the icon in the template src app app component html   lt fa-icon  icon   quot faCoffee quot  gt  lt  fa-icon gt   ORIGINAL ANSWER  Option 1  You can use angular-font-awesome npm module npm install --save font-awesome angular-font-awesome  Import the module         import   AngularFontAwesomeModule   from  angular-font-awesome    NgModule             imports                  AngularFontAwesomeModule                 export class AppModule      If you re using Angular CLI  add the font-awesome CSS to styles inside the angular-cli json  quot styles quot          quot styles css quot        quot    node modules font-awesome css font-awesome css quot      NOTE  If using SCSS preprocessor just change the css for scss Example Use   lt fa name  quot cog quot  animation  quot spin quot  gt  lt  fa gt   Option 2  There is an official story for that now Install the font-awesome library and add the dependency to package json npm install --save font-awesome Using CSS To add Font Awesome CSS icons to your app       in  angular-cli json   quot styles quot        quot styles css quot      quot    node modules font-awesome css font-awesome css quot     Using SASS Create an empty file  variables scss in src   Add the following to  variables scss   fa-font-path       node modules font-awesome fonts   In styles scss add the following   import  variables    import     node modules font-awesome scss font-awesome    Test Run ng serve to run your application in develop mode  and navigate to http   localhost 4200  To verify Font Awesome has been set up correctly  change src app app component html to the following     lt h1 gt      title    lt i class  quot fa fa-check quot  gt  lt  i gt   lt  h1 gt   After saving this file  return to the browser to see the Font Awesome icon next to the app title  Also there is a related question Angular CLI outputs the font-awesome font files the dist root as by default angular cli outputs the fonts in to the dist root  which is by the way not an issue at all

User · Answer

This post describes how to integrate Fontawesome 5 into Angular 6  Angular 5 and previous versions will also work  but then you have to adjust my writings   Option 1  Add the css-Files  Pro  Every icon will be included  Contra  Every icon will be included  bigger app size because all fonts are included   Add the following package   npm install  fortawesome fontawesome-free-webfonts   Afterwards add the following lines to your angular json    app           styles           node modules  fortawesome fontawesome-free-webfonts css fontawesome css    node modules  fortawesome fontawesome-free-webfonts css fa-regular css    node modules  fortawesome fontawesome-free-webfonts css fa-brands css    node modules  fortawesome fontawesome-free-webfonts css fa-solid css                 Option 2  Angular package  Pro  Smaller app size  Contra  You have to include every icon you want to use seperatly  Use the FontAwesome 5 Angular package   npm install  fortawesome angular-fontawesome   Just follow their documentation to add the icons  They use the svg-icons  so you only have to add the svgs   icons  you really use

User · Answer

After some experimentation I managed to get the following working    Install with npm   npm install font-awesome --save  add to angular-cli-build js file   vendorNpmFiles         font-awesome        css css map otf eot svg ttf woff woff2       add to index html   lt link rel  stylesheet  href  vendor font-awesome css font-awesome min css  gt       The key was to include the font file types in the angular-cli-build js file      css css map otf eot svg ttf woff woff2

User · Answer

Many instructions above work  I suggest looking at those  However  something to note   Using  lt i class  fas fa-coffee  gt  lt  i gt  did not work in my project  new practice project only a week old  after installation and the sample icon here was also copied to the clipboard from Font Awesome within the past week   This lt i class  fa fa-coffee  gt  lt  i gt  does work  If after installing Font Awesome on your project it isn t yet working  I suggest checking the class on your icon to remove the  s  to see if it works then

User · Answer

For webpack2 use      test      png jpe g gif svg woff woff2 ttf eot ico     v     d      d                             loader   file-loader      instead of file-loader name  assets fonts  name   ext

User · Answer

After Angular 2 0 final release  the structure of the Angular2 CLI project has been changed   8212  you don t need any vendor files  no system js   8212  only webpack  So you do    npm install font-awesome --save In the angular-cli json file locate the styles   array and  add  font-awesome references directory here  like below    apps                  root    src          outDir    dist                     styles                styles css                 node modules bootstrap dist css bootstrap css                 node modules font-awesome css font-awesome css     -here webpack will automatically build a link css element out of this                                      In more recent versions of Angular  use the angular json file instead  without the      For example  use  node modules font-awesome css font-awesome css    Place some font-awesome icons in any html file you want    lt i class  fa fa-american-sign-language-interpreting fa-5x  aria-hidden  true  gt   lt  i gt   Stop the application Ctrl   c then re-run the  app using ng serve because the watchers are only for the src folder and angular-cli json is not observed for changes  Enjoy your awesome icons

User · Answer

If you want to use free version of font awesome - bootstrap  use this   npm install --save  fortawesome fontawesome-free  If you are building angular project  you also need to add these imports in your angular json    quot styles quot                quot src styles css quot              quot node modules bootstrap dist css bootstrap min css quot              quot node modules  fortawesome fontawesome-free css fontawesome min css quot                      quot scripts quot                quot node modules jquery dist jquery min js quot              quot node modules bootstrap dist js bootstrap min js quot              quot node modules popper js dist umd popper min js quot              quot node modules  fortawesome fontawesome-free js all js quot

User · Answer

Using LESS  not SCSS  and Angular 2 4 0 and standard Webpack  not Angular CLI  the following worked for me    npm install --save font-awesome   and  in my app component less      import   font-awesome less font-awesome less     and of course you may need this obvious and highly intuitive snippet  in module loaders in webpack conf                         test      png jpe g gif svg woff woff2 ttf eot ico     v     d      d                     loader   file name graphics  name   ext                The loader is there to fix webpack errors of the kind    Module parse failed   node modules font-awesome fonts fontawesome-webfont svg v 4 7 0 Unexpected token  1 0      and the regexp matches those svg-references  with or without version specification   Depending on your webpack setup you might not need it or you may need something else

User · Answer

If you are using SASS  you can just install it via npm   npm install font-awesome --save   and import it in your  src styles scss with    fa-font-path      node modules font-awesome fonts    import     node modules font-awesome scss font-awesome scss     Tip  Whenever possible  avoid to mess with angular-cli infrastructure

User · Answer

For fontawesome 5 x  the most simplest way would be the following   install using npm package  npm install --save  fortawesome fontawesome-free  In your styles scss file include    fa-font-path     fortawesome fontawesome-free webfonts    import    fortawesome fontawesome-free scss fontawesome    import    fortawesome fontawesome-free scss solid    import    fortawesome fontawesome-free scss regular     Note  if you have  variables scss file then it s more appropriate to include the  fa-font-path inside it and not in styles scss file

User · Answer

There are 3 parts to using Font-Awesome in Angular Projects  Installation Styling  CSS SCSS  Usage in Angular  Installation Install from NPM and save to your package json npm install --save font-awesome  Styling If using CSS Insert into your style css  import   font-awesome css font-awesome css    Styling If using SCSS Insert into your style scss  fa-font-path   quot    node modules font-awesome fonts quot    import   font-awesome scss font-awesome scss    Usage with plain Angular 2 4  4   lt i class  quot fa fa-area-chart quot  gt  lt  i gt   Usage with Angular Material In your app module ts modify the constructor to use the MdIconRegistry export class AppModule     constructor matIconRegistry  MatIconRegistry        matIconRegistry registerFontClassAlias  fontawesome    fa           and add MatIconModule to your  NgModule imports  NgModule     imports        MatIconModule                    declarations           Now in any template file you can now do  lt mat-icon fontSet  quot fontawesome quot  fontIcon  quot fa-area-chart quot  gt  lt  mat-icon gt

User · Answer

There are many good answers here  But if you tried all of them and still getting squares instead fontawesome icons  check your css rules  In my case I had the following rule         font-family  Roboto-Light  Roboto   Helvetica Neue   sans-serif  important      And it overrides fontawesome fonts  Just replacing   selector to body solved my problem   body     font-family  Roboto-Light  Roboto   Helvetica Neue   sans-serif  important

User · Answer

Now there is few ways to install fontAwesome on Angular CLI   ng add  fortawesome angular-fontawesome  OR using yarn  yarn add  fortawesome fontawesome-svg-core yarn add  fortawesome free-solid-svg-icons yarn add  fortawesome angular-fontawesome  OR Using NPM  npm install  fortawesome fontawesome-svg-core npm install  fortawesome free-solid-svg-icons npm install  fortawesome angular-fontawesome   Reference here  https   github com FortAwesome angular-fontawesome

User · Answer

Edit  I m using angular  4 0 0 and Electron  1 4 3  If you have issues with ElectronJS or similar and have a sort of 404 error  a possible workaround is to uedit your webpack config js  by adding  and by assuming that you have the font-awesome node module installed through npm or in the package json file    new CopyWebpackPlugin          from   node modules font-awesome fonts   to   assets            from   src assets   to   assets          Note that the webpack configuration I m using has src app dist as output  and  in dist  an assets folder is created by webpack      our angular app entry         polyfills      src polyfills ts        vendor      src vendor ts        app      src app app          Config for our build files output        path  helpers root  src app dist        filename    name  js       sourceMapFilename    name  map       chunkFilename    id  chunk js       So basically  what is currently happening is    Webpack is copying the fonts folder to the dev assets folder  Webpack is copying the dev assets folder to the dist assets folder   Now  when the build process will be finished  the application will need to look for the  scss file and the folder containing the icons  resolving them properly  To resolve them  I ve used this in my webpack config      support for fonts       test      ttf eot svg woff 2       a-z0-9  amp              loader   file-loader name dist  name - hash   ext        Finally  in the  scss file  I m importing the font-awesome  scss and defining the path of the fonts  which is  again  dist assets font-awesome fonts  The path is dist because in my webpack config the output path is set as helpers root  src app dist     So  in app scss    fa-font-path   dist assets font-awesome fonts    import   font-awesome scss font-awesome scss     Note that  in this way  it will define the font path  used later in the  scss file  and import the  scss file using  font-awesome to resolve the font-awesome path in node modules   This is quite tricky  but it s the only way I ve found to get around the 404 error issue with Electron js

User · Answer

The top answer is a bit outdated and there is a slightly easier way    install through npm  npm install font-awesome --save in your style css    import   font-awesome css font-awesome css    or in your style scss      fa-font-path    font-awesome fonts     import   font-awesome scss font-awesome    Edit  as noted in the comments the line for fonts must be changed on newer versions to  fa-font-path            node modules font-awesome fonts     using the   will make sass look into node module  It s better to do it this way than with the relative path  The reason is that if you upload a component on npm  and you import font-awesome inside the component scss then it will work properly with   and not with the relative path that will be wrong at that point   This method works for any npm module that contains css  It works for scss as well  However if you are importing css into your styles scss it won t work  and maybe vice versa   Here is why

User · Answer

Accepted answer is outdated   For angular 9 and Fontawesome 5   Install FontAwesome  npm install  fortawesome fontawesome-free --save Register it on angular json under styles    node modules  fortawesome fontawesome-free css all min css  Use it on your application

User · Answer

For Angular 9 using ng    ng add  fortawesome angular-fontawesome 0 6 x   Look Here For More Information

[angular] How to add font-awesome to Angular 2 + CLI project

Examples related to angular

Examples related to webpack

Examples related to angular-cli