Elxis since version Elxis 4.5 Typhon has pre-installed the Font Awesome font. Font Awesome is a pictographic font which you can use to display icons as unicode characters, so no need of icons on your CSS any more! And even better, Font Awesome doesn't require javascript.

Font Awesome usage in Elxis

To use Font Awesome in your extension (template, module, component, etc) first include it with the Elxis Document library.

$eDoc = eFactory::getDocument;
$eDoc->addFontAwesome();

FontAwesome also supports animated icons. If you want to use them then use the animated version instead.

$eDoc = eFactory::getDocument;
$eDoc->addFontAwesomeAnim();

To find out the icon to use visit the icons page in fontawesome.io web site. Click on the icon you want to see usage details. You can use Font Awesome in HTML or in CSS. For instance to display the anchor icon you have these options.

i tag with special CSS class

<i class="fa fa-anchor" aria-hidden="true"></i>

Embeded character

This is an anchor <span style="font-family:FontAwesome;">&#xf13d;</span> icon!

CSS

<p class="x">An anchor icon will be displayed before this text</p>

And add in your CSS file something like that

.x:before { display: inline-block; font-family: FontAwesome; content:"\f13d"; padding-right:4px; }

 

Styling

 

FontAwesome icons can be styled in pure CSS (color, border, shadow, etc) and can be scaled without loosing quality (they are scalable vector icons).

<p>Some icons in various colours <span class="ired">&#xf030;</span> <span class="igreen">&#xf1d8;</span> <span class="iblue">&#xf007;</span></p>

The CSS

.ired { font-family: FontAwesome; color:red; }
.igreen { font-family: FontAwesome; color:green; }
.iblue { font-family: FontAwesome; color:blue; }