Font-Awesome is Awesome!
This package installs all the Font-Awesome assets to {assets_path}components/fontAwesome/. It also creates three helper elements:
Plugin: faRegisterDefault
Registers the minified font-awesome.min.css file in the head element onLoadWebDocument, so that no additional setup is required. Just start using Font-Awesome icons on your site! This is the fast and easy route. If you're a dev that doesn't like other people registering assets for you, then read on...
Snippet: faRegister
[[faRegister?min=`1`]]
For a bit more control, you can disable the plugin and instead use this Snippet in the Template(s) of your choice. Available properties are:
- &css => boolean (default = '1') : Registers the Font-Awesome CSS file.
- &ie7 => boolean (default = '0') : Registers the Font-Awesome ie7 CSS file wrapped in an ie7 conditional comment.
- &min => boolean (default = '0') : Switches the above CSS files for their minified counterparts.
Chunk: faIcon
The chunk accepts multiple properties as shorthand for many of the Font-Awesome classes:
- &i => Font-Awesome icon class, without the "icon-" prefix.
[[$faIcon?i=`twitter`]] - &c => Arbitrary classes.
[[$faIcon?c=`custom classes`]] - &s => Font-Awesome 'size' classes, without the "icon-" prefix.
[[$faIcon?s=`large`]] - &a => Arbitrary Font-Awesome classes, without the "icon-" prefix.
[[$faIcon?a=`border`]] - &p => Font-Awesome 'pull' classes, without the "pull-" prefix.
[[$faIcon?p=`left`]] - &r => Font-Awesome 'rotate' classes, without the "icon-rotate-" prefix.
[[$faIcon?r=`180`]] - &f => Font-Awesome 'flip' classes, without the "icon-flip-" prefix.
[[$faIcon?f=`horizontal`]] - &text => Text to insert between the _element tags.
[[$faIcon?text=`Follow Us!`]] - &stackbase => boolean (default = '0') Set to '1' to enable Font-Awesome 'icon-stack' mode.
[[$faIcon?stackbase=`1` &i=`check-empty`]] - &top => Font-Awesome icon class to use for the top icon in 'stacked' mode.
[[$faIcon?stackbase=`1` &i=`check-empty` &top=`twitter`]] - &topc => Arbitrary classes to assign to the top icon in 'stacked' mode.
[[$faIcon?stackbase=`1` &i=`check-empty` &top=`twitter` &topc=`icon-flip-horizontal`]] - &toptext => Text to insert between the _element tags of the top icon in 'stacked' mode.
[[$faIcon?stackbase=`1` &i=`check-empty` &top=`twitter` &toptext=`Follow Us!`]]
All these helper elements are optional. Font-Awesome is really easy to install and use. This just makes it that much easier. Check out the Font-Awesome website for documentation and usage: https://fontawesome.io/
MODX is awesome, Font-Awesome is awesome, and together they make Awesome Squared! Install fontAwesome for MODX via Package Manager, or download directly from the MODX Extras Repository. Vive la MODX!
