MODX fontAwesome Plugin

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: http://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!