CODEWITHSUNDEEP
angularwebpackfont-awesome
tsiro
tsiro

Reputation: 2383

webpack not showing font-awesome icons (only empty squares)

I use angular 6 with webpack 4 module bundler. I have searched a lot on how to load font-awesome combined with webpack, but only empty square are displayed.

Font-awesome is installed through npm (npm install font-awesome) (version 4.7.0).

webpack.config.js

module: {
  [{
      {
                test: /\.(eot|woff(2)?|svg|ttf)([\?]?.*)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "fonts/"                               
                        }
                    }]
            }
  }]
}

font-awesome.scss

$fa-font-path: '~font-awesome/fonts';
@import "~font-awesome/scss/font-awesome";

font-awesome.scss is imported inside my base module file. Can anyone tell me what I am doing wrong. Thanks in advance.

Upvotes: 2

Views: 1179

Answers (1)

Aniruddha Das
Aniruddha Das

Reputation: 21688

I faced the same in my angular 6 project I resolved it by below way.

Add these dependencies rather font-awesome. these are core and there is a package for angular as well.

"@fortawesome/angular-fontawesome": "0.1.0-9",
"@fortawesome/fontawesome-svg-core": "1.2.0-11",
"@fortawesome/free-brands-svg-icons": "5.1.0-8",
"@fortawesome/free-regular-svg-icons": "5.1.0-8",
"@fortawesome/free-solid-svg-icons": "5.1.0-8",

Now add font awesome to you module as import as below. This is the fontawesome-angular provided by font-awesome team.

FontAwesomeModule

Now add the icons you need in component and use them in the html below way.

component class

import { Component, OnInit } from '@angular/core';
import {
  faUtensils,
  faGlassMartini,
  faTruckMoving,
  faWineGlass,
  faCoffee,
  faShoppingCart,
  faGamepad,
  faBirthdayCake,
  faBeer,
  faStar,
  faStarHalf, faMagic, faSquare
} from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

@Component({
  selector: 'xxxx',
  templateUrl: './xxx.html',
  styleUrls: ['./xxx.scss']
})
export class SomeComponent implements OnInit {

  constructor(
  ) {
    library.add(
      faUtensils,
      faGlassMartini,
      faTruckMoving,
      faCoffee,
      faWineGlass,
      faShoppingCart,
      faGamepad,
      faBirthdayCake,
      faBeer,
      faStar,
      faStarHalf,
      faMagic,
      faSquare
    );
  }

  ngOnInit() {
  }
}

And then in your html just use these icons

      <fa-icon [icon]="['fas', 'beer']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>
      <fa-icon [icon]="['fas', 'glass-martini']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>
      <fa-icon [icon]="['fas', 'truck-moving']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>

Upvotes: 1

Related Questions