Can I use Font Awesome Icons with the Classic Theme?

  • 2
  • Question
  • Updated 2 years ago
  • Answered
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?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb

Posted 4 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Rob I can really use this feature... I even loaded in the font-awesome icons as an external resource but nothing happened...
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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
http://fontawesome.io/get-started/
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:
font-awesome/css/font-awesome.min.css
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. 
http://fontawesome.io/examples/
Photo of Joseph Schreurs

Joseph Schreurs

  • 372 Points 250 badge 2x thumb
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? 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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:

Photo of Josef Lagorio

Josef Lagorio

  • 262 Points 250 badge 2x thumb
When I tried doing this, it is still referencing the standard icons. Did something change? 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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. 
Photo of Josef Lagorio

Josef Lagorio

  • 262 Points 250 badge 2x thumb
Thanks for the reply. I was actually able to find a little work around here
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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)
Photo of JG GBC

JG GBC

  • 694 Points 500 badge 2x thumb
You can also achieve that via css. Just copy the unicode of the icon from the fontawesome website.

.myDiv:before{
font-family:fontAwesome;
content:'\f042';
}
It has to be added to a "before" or "after" element.
(Edited)