add How-To load Font Awesome from NPM

[hongbo-miao]

• I'm submitting a ...
  [x] wiki request
• What is the motivation / use case for changing the behavior?
  I saw "Need a How-To written? Open an issue https://github.com/AngularClass/angular2-webpack-starter/issues/new so I can include it".
  And since a lot of people are using Font Awesome, it will be great to add in wiki, especially the way to load Font Awesome from NPM (always a pain..).

[rafaelss95]

@sdemurjian can you explain it? Actually I'm not able to import font-awesome.

[rafaelss95]

First of all thanks for your reply.

I did what you said, however I'm still getting the following error:

GET http://localhost:3000/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
GET http://localhost:3000/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
GET http://localhost:3000/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0

head-config.commonjs:

    ...
    /** <link> tags for a Web App Manifest **/
    { rel: 'manifest', href: '/assets/manifest.json' },
    { rel: 'stylesheet', href: '/assets/font-awesome/css/font-awesome.min.css' }

webpack.common.js:

      new CopyWebpackPlugin([
        { from: 'src/assets', to: 'assets' },
        { from: 'src/meta'},
        { 
          from: 'node_modules/font-awesome/css/font-awesome.min.css',
          to: 'assets/font-awesome/css/font-awesome.min.css'
        }
      ]),

By the way I can see font-awesome imported in Chrome Dev Tools.

[gilhanan]

@rafaelss95 notice that you have to stop and start server for apply changes

[rafaelss95]

@gilhanan Yes, I did.

[RaphaelYan]

You have to copy font files too

[rafaelss95]

Thank you all guys, I copied the fonts as @RaphaelYan said and now it's working.

  new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    {
      from: 'node_modules/font-awesome/css/font-awesome.min.css',
      to: 'assets/font-awesome/css/font-awesome.min.css'
    },
    {
      from: 'node_modules/font-awesome/fonts',
      to: 'assets/font-awesome/fonts'
    }
  ]),

[andrewlorenz]

I have to laugh reading this - first @sdemurjian says "It's as simple as adding an element ...", then after someone else has struggled with his solution that doesn't work, and identifies all the steps required, he comes back with "Oops, yes was missing fonts" !!! LOL. I think this thread proves the very point of the original issue - that it needs (better) documenting ! To be honest its a lot messier to use the module than I expected - as in a lot of additional work over and above the initial npm install.