Easy way to use Font Awesome in CMS Made Simple

The popular Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with CSS.

You can place Font Awesome icons by using HTML code like:

In WYSIWYG editors the code can be difficult to add, and when having multiple icons in a (module) template it might be a bit confusing... Solution: a simple User Defined Tag!

How to use

Add to the <head></head> area of your Core::Page template a reference to the Font Awesome CDN file:

Create a UDT named "fa":

$ariahidden = isset($params['ariahidden']) ? 'false' : 'true';
$icon = isset($params['icon']) ? $params['icon'] : 'fa-font-awesome';

echo '<i class="fa ' . $icon . '" aria-hidden="' . $ariahidden . '"></i>';

Now you can use in your templates and content editor:

{fa icon='fa-font-awesome'}

Just the icon code (and if necessary parameters) is enough.

Note: For web accessibility aria-hidden="true" is set by default to hide icons used purely for decoration for visitors using screen readers. Do you want to disable this, add the ariahidden parameter (no dash):

{fa icon='fa-font-awesome' ariahidden='false'}

Tip: Here is a Font Awesome Cheatsheet

Working example

{fa}

Will output the Font Awesome logo:

{fa icon='fa-thumbs-up'}

Will output:

{fa icon='fa-coffee fa-2x' ariahidden='false'}

Will output a large cup of coffee:

I like coffee! Click here to buy me one

Bootstrap

Bootstrap themes often include Font Awesome icons, but there is one difference! The classes don't start with fa but with icon... You still can use this method, but change the UDT name and all references in the UDT code and Smarty tags from fa to icon! Tag example:

{icon icon='icon-font-awesome'}

Show related articles:

Comment Form

ReviewManager

Click here to open the form

ReviewManager

3 Comments

13-07-2017

Mathieu - Aire libre

Thanks for that article and your amazing blog!

I often use fontello (fontello.com) or icomoon (icomoon.io) to create a custom font icon. It's lighter than the entire Font-awesome package, and you can use your own SVG paths. You can easily include the css piece of code in your DesignManager stylesheets.

11-08-2016

Rolf

Font Awesome symbols aren't images, so I don't understand why CGSmartImage could conflict in your website...

10-07-2016

Willie

I use something very similar to great effect in many of my websites. It gets a little wonkey when you add this in content and you have CGSmartImage parsing entire content sections, but other than that it's great!

Easy way to use Font Awesome in CMS Made Simple

Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.2.19
  Last updated: 24-06-2018
  Comments: 3
  http://cms.ms/D6Qs

Ads help me to help you! Buy products from these advertisers!