CODEWITHSUNDEEP
angularwebpacksassfont-awesome
ShamPooSham
ShamPooSham

Reputation: 2379

Font awesome content in sass using Angular component styles

I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.

So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";

.myelement {
    &:after {
      @include fa-icon;
      @extend .fas;
      content: fa-content($fa-var-angle-down);
    }
  }

My Webpack looks like this:

module: {
    rules: [
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            use: ['raw-loader', 'sass-loader']
        }, 
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts'
                }
            }]
        },
        ...
    ]
}

This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.

In Firefox I get the following error:

downloadable font: rejected by sanitizer 
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1) 
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

And in Chrome I get:

Failed to decode downloaded font: 
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

How can I include fonts in my component-specific sass-files?

Upvotes: 9

Views: 5907

Answers (3)

ShamPooSham
ShamPooSham

Reputation: 2379

Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/

Upvotes: 1

molikh
molikh

Reputation: 1304

you can use this one.

https://www.npmjs.com/package/angular2-fontawesome

you can include this one in your styles.scss file or in your angular.json file

  "../../node_modules/font-awesome/css/font-awesome.css"

this module has it's own component for fontawsome but you can use it like this too.

<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>

both works

Upvotes: 1

freepowder
freepowder

Reputation: 417

Have you tried import this

@import '~@fortawesome/fontawesome-free/css/all.css';

and remove

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";

Hope this works!

Upvotes: 1

Related Questions