For most of our content contributors in SDL Tridion 2013, this may not be big news to you — but for others the update to Font Awesome 4.5 brings in dozens of new scalable, vector, font-based icons available for your use. To get a run-down on all of the new icons as well as a complete list, head on over to the Font Awesome website for more details.

Why do we use Font Awesome? It's one of the most comprehensive font-based icon libraries around and allows us to use common icons, symbols, or graphics but in a manner that is scalable and easy to format.  You may have noticed their use in some obvious places like the social media icons in the footer, or in less obvious places like the search buttons, toggle lists, and other places throughout your site.  And besides being scalable and easy to format, it also reduces the load time — instead of loading a bunch of icons through CSS, we're loading one font file.  Once it's cached, the user will notice no lag time for icons to display on the page.

Using Font Awesome

How do you use Font Awesome? It's pretty simple if you're willing to dabble in a little HTML.  Here is a sample usage with the HTML presented first and how it's rendered:

Code: <span class="fa fa-envelope-o">&#160;</span> Contact Us!

Rendered:    Contact Us!

It's fairly simple to use if you're comfortable with just a little HTML.

There is one thing you need to know when attempting to put <span> tags in the WYSIWYG editor within Tridion.  If you have a <span> tag without any contents in it, the editor will attempt to clean up your content and will remove the tag.  So you need to make sure you include this within the span tag:  &#160;  which is the XML mark-up for a non-breaking space.  The editor will respect that space as a character and leave the span tag be.

For more information on how to use Font Awesome, visit the Font Awesome website and spend some time reading their documentation for more complete information. This latest update is available now to all of our customers in Tridion 2013.