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?
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.
Rob I can really use this feature… I even loaded in the font-awesome icons as an external resource but nothing happened…
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
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/
You rock Jack… Its quite the workaround, but it works… Cool.
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?
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:
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 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 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
You can also achieve that via css. Just copy the unicode of the icon from the fontawesome website.
.myDiv:before{<br /> font-family:fontAwesome;<br /> content:'f042';<br />}
It has to be added to a “before” or “after” element.
When I tried doing this, it is still referencing the standard icons. Did something change?
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.
Thanks for the reply. I was actually able to find a little work around here.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.