Can I use Font Awesome Icons with the Classic Theme?

Jarrod HinsonJarrod Hinson Member
edited January 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?

Comments

  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited September 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. 
  • Moshe KarmelMoshe Karmel Member
    edited December 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 Member ✭✭
    edited January 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
    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/


  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited September 2016
    You rock Jack...  Its quite the workaround,  but it works... Cool. 
  • Joseph SchreursJoseph Schreurs Member ✭✭
    edited May 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 Member ✭✭
    edited May 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:

    image

  • Jack SanfordJack Sanford Member ✭✭
    edited January 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
  • JG GBCJG GBC Member
    edited December 2016
    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.
  • Josef LagorioJosef Lagorio Member
    edited February 2017
    When I tried doing this, it is still referencing the standard icons. Did something change? 
  • Jack SanfordJack Sanford Member ✭✭
    edited February 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. 
  • Josef LagorioJosef Lagorio Member
    edited March 2017
    Thanks for the reply. I was actually able to find a little work around here
Sign In or Register to comment.