Can I use Font Awesome Icons with the Classic Theme?

edited January 12, 2018 in Questions
I noticed Font Awesome is only available when using a Non-Classic Theme in Skuid. I like the Classic theme and it mixes the best with standard Salesforce styles but we are a Medical Company and I would like to use the Font Awesome Medical Icon set. Any way to make that available on the Classic Theme?


  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    At this point it is not possible using the declarative tools provided.  

    But assigning icons is part of our theme framework and our plans are to improve the documentation for this framework in the next few months  (Its nill right now) so that you guys can see how this sort of customization can be done. 
  • edited December 15, 2015
    Rob I can really use this feature... I even loaded in the font-awesome icons as an external resource but nothing happened...
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    I just achieved this by uploading the Font Awesome directory as a static resource and referencing the main css file in any skuid page. Then you can use all the code you want like
    <i class="fa fa-iconname fa-styleattribute"></i>

    First go here
    scroll down a little and click Download

    Then create a new static resource called whatever you want, e.g. FontAwesomeSauce, upload the .zip file you just downloaded, and make it public.

    Then in your skuid page, add a new CSS resource, type Static Resource, put in the name of your static resource. Then in the file path, paste this:
    and wait until the auto-complete shows up and click the full file path

    This examples page shows a few things you can do with fa icons, sizing, animation, rotation, etc.

  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    You rock Jack...  Its quite the workaround,  but it works... Cool. 
  • edited May 26, 2016
    Great... I was able to use these in templates.  Were you able to replace elements where the icon was being used by the Skuid UI.  Like a row action icon? 
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited May 26, 2016
    not sure what you mean, you can already choose font awesome icons in your row actions, and if there's an icon not in the picker you can type in the name of it. 

    but in asking your question, you made me realize you can use the font awesome attributes inside the text field where you put your icon name in the page builder, and you can even use them on silk icons! for example, using an icon value of "sk-icon-notes-and-attachments fa-2x" on a tab yields something like this:


  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    UPDATE: actually turns out you don't need to load the static resource at all! if you want to access any of the standard font awesome icons included with skuid, you can use the fa syntax of <i class="fa fa-arrows fa-whatever"></i> and it will put that icon in any template. 

    AND one super cool thing I just realized, you can make the icon a link by putting it inside of <a> </a> tags. rowdy. watch out for accessibility if you decide to remove all text and replace with icons!

    however, if you want any of the font awesome icons not included by skuid, you do need to install the static resource, for example fa-deaf or fa-battery-three-quarters
  • edited December 15, 2016
    You can also achieve that via css. Just copy the unicode of the icon from the fontawesome website.
    It has to be added to a "before" or "after" element.
  • edited February 21, 2017
    When I tried doing this, it is still referencing the standard icons. Did something change? 
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited February 24, 2017
    Josef, you can't use this workaround in places where you can pick icons in Classic theme. You can do it in Template components and fields, even when using Classic them, but just not in the icon selection box. 
  • edited March 3, 2017
    Thanks for the reply. I was actually able to find a little work around here
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!