Use Font Awesome with Ignite and Engage Themes

Since version x.x.x.14 Font Awesome is not referenced by default in the Ignite theme, by default it only loads the ION icons font.

Even though the font is not referenced it’s still included in the theme and you can still use it, to add it to your theme follow the steps below.

CSS Only Themes

1. Open your site with SharePoint designer
2. Go to All Files -> Style Library -> Theme Name -> JS
3. Check out and edit the BTScripts.js in advanced mode
4. At the top of the file add the following code
   

   var head = document.getElementsByTagName('head')[0];
   var fontAwesome = document.createElement('link');
   fontAwesome.setAttribute('type', 'text/css');
   fontAwesome.setAttribute('href', path+'css/font-awesome.min.css');
   fontAwesome.setAttribute('rel', 'stylesheet');
   head.appendChild(fontAwesome); 	

5. Save the file, do a check in and publish the major version
6. Refresh your browser using CTRL + F5

Sandbox themes with master pages

1. Open your site with SharePoint designer
2. Go to All Files -> _catalogs -> masterpage -> themename
3. Check out the master pages
4. Locate the code block below
   

   if (typeof window.BTThemejQuery == 'undefined') { 
    document.write('<script type="text/javascript" src="'+path+'js/jquery.min.js"><' + '/script>');
   }	

5. Underneath it paste this code
   

   if (typeof window.fontawesomeDeclared === 'undefined') { 
    window.fontawesomeDeclared = true; 
    document.write('<link rel="stylesheet" type="text/css" href="'+path+'css/font-awesome.min.css"' + '/>' );
   }	

6. Save the file, do a check in and publish the major version
7. Repeat steps 4 to 7 to all masters

Farm themes (SharePoint on premises only)

1. Open your site with SharePoint designer
2. Go to All Files -> _catalogs -> masterpage
3. Check out the master pages of the theme
4. Locate the block code below

    <SharePoint:CssRegistration name="/_layouts/15/1033/STYLES/ THEMENAMEPackage /COREV15.css" runat="server" after="SharepointCssFile" />

5. Underneath it paste this code

    <SharePoint:CssRegistration name="/_layouts/15/1033/STYLES/THEMENAMEPackage/ font-awesome.min.css " runat="server" after="SharepointCssFile" />

6. Replace the theme name by the name of your theme
7. Save the file, do a check in and publish the major version
8. Repeat steps 4 to 7 to all masters