5

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.

6

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

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:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.