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.
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');
}
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:
