this is amazing.

Its also sorta tough,  considering those are each image sprites… 

A little css and your good to go.

Cmon. Can’t be that hard.

It’s already partially supported with Font Awesome. Can certainly make it happen with some additional tweaking.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="Classic"> <models> <model id="User" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="User"> <fields/> <conditions> <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/> </conditions> <actions/> </model> </models> <components> <template multiple="false" uniqueid="sk-3voQL-70" allowhtml="true"> <contents>&amp;lt;span class="fa-stack fa-lg"&amp;gt; &amp;lt;i class="fa fa-money fa-stack-1x"&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;i class="fa fa-lock fa-stack-1x fa-inverse"&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;/span&amp;gt; fa-terminal on fa-square&amp;lt;br&amp;gt; &amp;lt;span class="fa-stack fa-lg"&amp;gt; &amp;lt;i class="fa fa-camera fa-stack-1x"&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;i class="fa fa-ban fa-stack-2x text-danger"&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;/span&amp;gt; fa-ban on fa-camera </contents> </template> </components> <resources> <labels/> <javascript/> <css> <cssitem location="inline" name="newcss" cachelocation="false">.fa-lock { color:red; } .fa-money { color:green; }</cssitem> </css> </resources> <styles> <styleitem type="background" bgtype="none"/> </styles> </skuidpage> 

This page is crazy awesome!!! Get it? AWESOME … hehehehe.

https://fortawesome.github.io/Font-Awesome/examples/