Easy way to use Font Awesome in CMS Made Simple

  Previous article Next article  

Easy way to use Font Awesome in CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 17-12-2016
  Comments: 3

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:

<i class="fa fa-font-awesome" aria-hidden="true"></i>

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:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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


A2 Webhosting CMS Made Simple

  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'}

A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  3 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Easy way to use Font Awesome in CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 17-12-2016
  Comments: 3

A2 Webhosting CMS Made Simple