Make a Lasting Impression
ImpressCMS Blog > How to get Fontawesome working in the WYSIWYG editors

How to get Fontawesome working in the WYSIWYG editors

ImpressCMS has a reputation as a secure platform, and security is also one of our principal values we adhere to. Every time we think of making a change, we ask ourselves "Will this have an impact on security?". In our current standard configuration, that security setup impedes us from using Font Awesome in our text fields, which is a pity. Let's fix that.

HTMLPurifier is one of the tools we use to obtain our current level of security, but in order to use Font Awesome, we'll need to make some small changes to the standard configuration in order to stop HTMLPurifier from stripping out the relevant HTML constructs.

In short, what we need to do is add the class attributes for the span and i tags to the authorised attribute list. If you don't know how to do that, read on.

  1. Once you have logged in to your site go to the administration panel at yoursite/admin.php
  2. There, choose Preferences > HTMLPurifier Settings (yoursite/modules/system/admin.php?fct=preferences&op=show&confcat_id=14)
  3. Make sure the 'allowed elements' include both 'span' and 'i'
  4. Add 'i.class' and 'span.class' to the field 'Allowed Attributes'

Start using Font Awesome by adding the relevant CSS line to your theme.

All posts by fiammybe
Subscribe to latest posts
The comments are owned by the poster. We aren't responsible for their content.
Poster Thread
skenow
Posted: 2015/11/8 23:09  Updated: 2015/11/8 23:09
Home away from home
Joined: 2007/12/4
From:
Posts: 4242
 Re: How to get Fontawesome working in the WYSIWYG editors
Thanks for the tips, David! I suspect there are other valid elements to include with the HTML5 changes
skenow
Posted: 2015/11/14 15:55  Updated: 2015/11/14 15:55
Home away from home
Joined: 2007/12/4
From:
Posts: 4242
 Re: How to get Fontawesome working in the WYSIWYG editors
Is fontawesome something to consider as a base library? The theme @MrTheme was working on for the UI revamp used it and I'm finding it in the installer we were working on at the time.
fiammybe
Posted: 2015/11/19 22:18  Updated: 2015/11/19 22:18
Home away from home
Joined: 2009/3/3
From: Belgium
Posts: 1950
 Re: How to get Fontawesome working in the WYSIWYG editors
It is one of the more prolific uses of webfonts for common icons.

There are other options, not using webfonts, but using sprites (SVG or PNG) for example if you want more colors. If you look at http://www.iconizr.com you'll have a tool that takes SVG images and creates a custom webfont for you.

All these use more or less the same base methods to define what icon to put where. It's the functionality on how to retrieve the image that is different. So getting our HTMLPurifier configuration updated is still necessary.

I created ticket #890 for that.