Your Moodle version

Filters: FontAwesome Icon Filter

filter_fontawesome
Maintained by Julian Ridden Julian Ridden
If you are using a FontAwsome equipped theme (like Essential) then this filter will allow you to use FontAwesome icons in your content.

Sets

This plugin is part of set Seeking new maintainer.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. More info on FontAwesome can be found here.

This filter allows you to add FontAwesome icons to anywhere you have a text box in Moodle. If you use the recommended method the Text box strips them aug automatically. This filter provides a mechanism to allow you to use FontAwesome without the editor stripping out your tags.

Usage

IMPORTANT: This syntax has changed since version 1.0. The latest Font Awesome uses a new methodology for naming If you are upgrading you will need to update your text.

First you will need to find the icon you wish to use. This link provides a full list.

Anywhere you wish to add an icon just surround it with square brackets and type in the icon name. e.g.:

[fa-camera-retro]

If you wish to make the icon larger you can use a multiplier. e.g.:

[fa-camera-retro fa-2x]    or    [fa-camera-retro fa-4x]

If you wish to rotate the icon you can specify how many degrees clockwise. e.g.:

[fa-camera-retro fa-rotate-90]

You can also flip an icon horizontally or vertically. e.g.:

[fa-camera-retro fa-flip-horizontal]    or     [fa-camera-retro fa-flip-vertical]

You can mute the colour to a dull grey. e.g.:

[fa-camera-retro fa-muted]

You can "pull" the icon to the left or right. If it is "pulled" to the left text will wrap to the right. e.g.:

[fa-camera-retro pull-left]

All the settings above can be mixed and matched. For example if I was to type in:

[fa-quote-left fa-4x pull-left fa-muted] Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.

I will then see:

Example

Important Note:

Please read the readme file provided with this filter. The filter does not provide FontAwesome, just a way to easily add the icon tags to moodle text boxes without having them stripped. To learn how to add this Font to your moodle site read this blog post.

See it in Action:

Check out this open (guest access) moodle course to see some examples of this filter in action:

http://features.demo.moodle.com.au/course/view.php?id=35

Screenshots

Screenshot
Screenshot

Contributors

Julian Ridden
Julian Ridden (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • MD shot of me from his iphone4
    Fri, Oct 18, 2013, 2:45 PM
    I'm speechless, thanks for sharing this!
  • Picture of Christian Conradi
    Tue, Dec 3, 2013, 2:40 AM
    We have problems with this Filter in moodle 2.5.1! It doesn't work. The theme was out of order! Must i have moodle 2.6?
  • Picture of Heinz Schmolke
    Fri, Dec 27, 2013, 3:49 AM
    The same with me: If I put the directory in filters I got a error: "Trying to reference an unknown block region side-post". The filter do not work in 2.5
  • Picture of Caitlin Cahill
    Thu, May 15, 2014, 5:04 AM
    Great filter! It works beautifully on webpages, but does not work on a database template.
Please login to post comments