Filters: FontAwesome Icon Filter

filter_fontawesome
Maintained by Picture of Usman Asar Usman Asar
If you are using a FontAwsome equipped theme (like Essential, Elegance, Adaptable, Shoehorn, Shoelace, BCU, Bootstrap, Flexibase, Pioneer, UIKit, Evolve-D etc) then this filter will allow you to use FontAwesome icons in your content using the easy syntax rather than typing the whole font embed code.
787 sites
892 downloads
20 fans

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.

Filter Updated: 17th November, 2016 adding 41 new icons that came in FontAwesome version 4.7

Usage

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.

For this filter to work, your theme must have provided FontAwesome in its core files, currently themes supporting FontAwesome are Essential, Elegance, Shoehorn, Shoelace, UI Kit, Evolve-D & BCU and most of them will be updated to latest version 4.4 of FontAwesome. In case the theme you are using is not updated to the latest FontAwesome, using the updated filter will not break anything, old icons will work, the newly added icons won't simply show up.

Update: New version 4.7 of FontAwesome is out with 41 new icons (Total Icons: 675) , therefore its up to theme developers when they would update their corresponding themes with FontAwesome 4.7 for new icons to work, this filter however can be updated and will show older icons as well where themes haven't been updated, that is why all previous versions since 4.3 are kept in case if you have theme with older version of FontAwesome embedded.

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



Installation:

1: Download any applicable file - By applicable I meant if you are assured of your main theme using/updated to FontAwesome 4.7, then you can download 4.7, else any previous applicable version. Don't worry about using most updated version of this filter, even if your Theme isnt updated, the latest icons wont simply show up, rest older icons will work find. In this case you can always request your theme developer to update the FontAwesome in the theme.

2: Upload the zipped file to moodle > filter

3: Unzip, and log-in as administrator, and plug-in installation wizard will start.

4: It will ask for choosing settings, in that case just keep default "Moodle Auto Format" selected. You can always come back to these settings by going to Site Administration > Plugins > Filters > FontAwesome Icon Filter

Enabling FontAwesome Icon Filter

Once FontAwesome has installed, It wont show up automatically until you actually enable the filter to work in Moodle, for that go to Site Administration > Plugins > Filters > Manage Filters. You'll see FontAwesome Icon Filter in the list, click "ON" where its mentioned disabled in drop down. Using the above format, will start showing up icons where applicable.

More applicable examples of using FontAwesome can be found HERE.

Potential privacy issues

Not Applicable

Screenshots

Screenshot #0
Screenshot #1

Contributors

Picture of Usman Asar
Usman Asar (Lead maintainer)
Julian Ridden
Julian Ridden: Original author
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Ricardo Caiado
    Thu, 14 Apr 2016, 2:47 AM
    Moodle 3.0.3

    from 4.5 (Build: 20160130) to 4.6 (Build: 20160413)

    Ok, I will try that.

  • Ricardo Caiado
    Thu, 14 Apr 2016, 3:00 AM
    Something is wrong...

    Just downloaded "filter_fontawesome_moodle30_2016041300".

    "version.php"
    -----------------
    ...
    $plugin->version = 2016013000; // The current plugin version (Date: YYYYMMDDXX)
    $plugin->maturity = MATURITY_STABLE; // this version's maturity level.
    $plugin->release = '4.5 (Build: 20160130)'; <<<========================================================
    $plugin->requires = 2013050100; // Requires this Moodle version
    $plugin->component = 'filter_fontawesome'; // Full name of the plugin (used for diagnostics)
    ...
    -----------------

    Is it right?

  • Picture of Usman Asar
    Thu, 14 Apr 2016, 10:37 AM
    Ricardo, Just made changes to version file, thanks for reporting, please download again.
    Thanks!
  • Ricardo Caiado
    Thu, 14 Apr 2016, 9:33 PM
    Worked!
  • Picture of Matt Townend
    Mon, 5 Sep 2016, 1:10 PM
    Hey I found that this works fine in text content but not in headings and course names, category names etc. I am using Archaius Theme with added. Anyone else find this problem?
  • Picture of Usman Asar
    Mon, 5 Sep 2016, 5:17 PM
    Matt, you have to do two things
    1: Go into Site administration > Appearance > HTML Settings ---- Default setting is CHECKED for remove HTML tags from all activity names, uncheck that (means you are selecting NO).
    2: Next, go to Plug-Ins > Filters > Manage Filters and in FontAwesome icon filter, select "content & headings" in Apply to section.

    You're done! feel free to fill up headings, section names with icons, I am not still sure about course names if that works there too, but no harm giving a try, if it didn't, try using the exact code from fontawesome rather than filtered code.
  • Picture of Renaat Debleu
    Fri, 18 Nov 2016, 2:11 AM
    There is a missing string: update notifications show an error:

    Update notifications

    There is a newer version for some of your plugins available!

    pluginname (filter_fontawesome) There is a new version 2016111700 available!
    Restriction by language (availability_language) There is a new version 2016111600 available!
  • Picture of Usman Asar
    Fri, 18 Nov 2016, 6:43 AM
    Reenat, I have updated plug-in without any issues, have you not tried updating it? if it is not working then try uninstalling and re-installing the plug-in.
  • Ricardo Caiado
    Sat, 19 Nov 2016, 12:24 AM
    Hi,

    On the "Description" tab the text "To learn how to add this Font to your moodle site read this blog post." send us to a broken link.

    Ricardo
  • Picture of Usman Asar
    Sat, 19 Nov 2016, 3:41 AM
    Ricardo, that blog-post was in ownership of Julien, and I assumed he has kept it running, but seems like he removed his site all together, but dont worry, I will update a post soon on my own blog explaining how to use FontAwesome icon filter. Will update you once I have uploaded the post.
  • Picture of Joël Schmid
    Thu, 1 Dec 2016, 8:39 PM
    Does someone have the same problem and is not able to use the new icons provided in FontAwesome version 4.7? Is there a GitHub project for this filter where I could create an issue?
  • Picture of Usman Asar
    Fri, 2 Dec 2016, 12:53 AM
    Joel, is your theme updated with FontAwesome 4.7 as well?
  • Picture of Joël Schmid
    Fri, 2 Dec 2016, 8:47 PM
    @Usman Asar, thats it! I Had to change the CDN Link in the "Additional HTML" Settings (Dashboard / ▶︎ Site administration / ▶︎ Appearance / ▶︎ Additional HTML) to the newest version: Thank you for your help!
  • Picture of Raymon Akbar
    Thu, 8 Dec 2016, 9:00 AM
    I wonder that can I install this plugin in any themes? Such as academi or etc from theme directory in Moodle.org since I read from the description:

    "If you are using a FontAwsome equipped theme (like Essential, Elegance, Adaptable, Shoehorn, Shoelace, BCU, Bootstrap, Flexibase, Pioneer, UIKit, Evolve-D etc) then this filter will allow you to use FontAwesome icons in your content using the easy syntax rather than typing the whole font embed code."

    And I can't find the detail about the other theme. Thank you.
  • Picture of Usman Asar
    Fri, 9 Dec 2016, 10:34 AM
    Raymon, of course you can, use CDN link into the theme of your choice, and it will work with them as well, unlike earlier, where FontAwesome link was publicly available, you have to sign up to their account o get your CDN link (go to www.fontawesome.io) get your CDN link and follow what Joel has mentioned above (putting link in theme header).
    But as well keep in mind, after FontAwesome 5 launch (May 2017), the CDN links may will only be available for a year.
1 2
Please login to post comments