SharePoint Framework – Loading Font Awesome CSS from CDN

Question

I am fairly new to the SharePoint Framework development stack (TS, React, node, etc.) and am looking to incorporate the font-awesome suite into my web-part via a CDN.

Normally I would reference this in an HTML header:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

How do I go about doing this? I've seen a few examples on GitHub with external javascript libraries but nothing CSS/font driven like this.

Answer 1

The easiest way to load CSS from CDN is using the ModuleLoader class.

First you import ModuleLoader in your code:

import ModuleLoader from '@microsoft/sp-module-loader';

Then, in the web part's constructor you use it to load the CSS file from CDN:

public constructor(context: IWebPartContext) {
  super(context);

  ModuleLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
}

Answer 2

In SPFX GA version the ModuleLoader was renamed to SPComponentLoader.

import { SPComponentLoader } from `'@microsoft/sp-loader';

It continues to be userd in constructor:

constructor() {
    super();

    SPComponentLoader.loadCss('...');
}

Please check the reference reply: