MENU

Easy way to use Font Awesome in CMS Made Simple

  Previous article Next article  

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

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


  Comment Form

Click here to open the form


  3 Comments

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Easy way to use Font Awesome in CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.7
  Last updated: 31-03-2018
  Comments: 3
  http://cms.ms/D6Qs

Advertisement



Ads help me to help you! Thanks!