Το Elxis από την έκδοση Elxis 4.5 Τυφών έχει πρό-εγκατεστημένη τη γραμματοσειρά Font Awesome. Η Font Awesome είναι μία γραμματοσειρά εικονιδίων που σας επιτρέπει να εμφανίζετε εικονίδια ως χαρακτήρες unicode και κατά συνέπεια μηδενίζει την ανάγκη χρήσης εικονιδίων στο CSS σας! Και ακόμα καλύτερα το font Awesome δεν απαιτεί 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; }