FontAwesome icons

Filters ::: filter_fontawesome
Maintained by FFHS (Fernfachhochschule Schweiz), Adrian Perez Rodriguez, Christoph Karlen, Sascha Vogel
This filter allows you to use fontawesome icons in the Moodle text editor without worrying about the HTML syntax.
Latest release:
2008 sites
800 downloads
86 fans
Current versions available: 4
Download

Moodle FontAwesome Filter Build Status Coverage Status

Introduction

This filter allows you to use fontawesome icons in the Moodle text editor without worrying about having your div's stripped out by the Moodle Atto/TinyMCE HTML cleaner.

This plugin supports the legacy FontAwesome 4 icon set and the newer version 5.

Furthermore it's important to know, that this plugin doesn't supply the newer free FontAwesome 5 icon set.  This is the responsibility of Moodle or your theme developer. So it can be, that not all FA icons will be displayed, for more information consult these links:

Requirements

Your site/theme must have FontAwesome embedded already. This filter does not provide the font.

  • Moodle 3.3 upwards

Installation

Install the plugin like any other plugin to folder filter/fontawesome

Use git to install this plugin:

cd /var/www/html/moodle
git clone https://github.com/adpe/moodle-filter_fontawesome.git filter/fontawesome

Then complete upgrade over CLI:

sudo -u apache /usr/bin/php admin/cli/upgrade.php

or GUI.

See MoodleDocs] for details on installing Moodle plugins

Configuration

First, activate the filter_tabs plugin in Site Administration -> Plugins -> Filters -> Manage filters

Additional

filter_fontawesome has a settings page to allow you to limit the filter to only certain text-box formats.

Usage

To create FontAwesome icons in text fields, use the following syntax: [fa-*] where * is the name of the icon you wish to display.

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

Some examples and guide to start:

  • 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 the icon name is a brand, please add fab at the beginning of the square brackets.
  • 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 e.g.: [fa-quote-left fa-4x pull-left fa-muted]
  • If some text parts should not be replaced, use <nolink> or <span class="nolink"></span> e.g.: [fa-world] <span class="nolink">[fa-world]</span>

Further information

License

Useful links

More documentation on this plugin
Source control URL
Bug tracker

Screenshots

Screenshot #0
Screenshot #1

Contributors

FFHS (Fernfachhochschule Schweiz) (Lead maintainer)
View other contributions
Adrian Perez Rodriguez: Developer
View other contributions
Christoph Karlen: Developer
View other contributions
Sascha Vogel: Developer
View other contributions
Julian Ridden
Julian Ridden: Original author
View other contributions
Usman Asar: Previous maintainer
View other contributions
Please login to view contributors details and/or to contact them

Awards

Early bird 3.0
Early bird 3.0
Early bird 3.1
Early bird 3.1
Early bird 3.2
Early bird 3.2
Early bird 3.3
Early bird 3.3
Privacy friendly
Privacy friendly
Automated testing support
Automated testing support
Early bird 3.7
Early bird 3.7
Early bird 3.9
Early bird 3.9
Early bird 3.10
Early bird 3.10
Early bird 3.11
Early bird 3.11

Comments RSS

Comments

  • Usman Asar
    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.
  • Matlabi متلبی
    Matlabi متلبی
    Sat, 25 Aug 2018, 2:34 AM
    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?
  • Ricardo Caiado
    Ricardo Caiado
    Tue, 4 Sept 2018, 8:30 AM
    Hi,

    Any update to Moodle 3.5?

    Ricardo
  • David Mudrák
    David Mudrák
    Wed, 12 Sept 2018, 3:06 AM

    I just unapproved this plugin as it did not have valid source code URL and bug tracker URL set - both set to "n/A". This violates the plugin approval criteria. Please submit the filter for re-approval once the fields have a valid value again. Thanks for keeping the plugin record up to date.

  • Plugins bot
    Plugins bot
    Fri, 14 Dec 2018, 6:20 PM
    Approval issue created: CONTRIB-7571
  • Dan Marsden
    Dan Marsden
    Thu, 31 Jan 2019, 3:32 PM
    Hi Adrian - thanks for updating the plugin - I've re-approved the plugin again!
  • Liana Shpani
    Liana Shpani
    Tue, 2 Apr 2019, 12:40 AM
    Hi,

    First of all, very nice plugin! I recently installed it in our Moodle test environment, but
    I am having an issue that not all icons display. I am using the codes for free solid icons, and certain (random) icons like volume-mute or uber logo don't render. Do you have any idea why this might be happening? Also, I am having an issue with flipping the icons as well.

    Thanks in advance!
    Best,
    Liana
  • Adrian Perez Rodriguez
    Adrian Perez Rodriguez
    Tue, 2 Apr 2019, 2:33 PM
    Hello Liana

    I've just opened a new issue on the bug tracker, please have a look at https://github.com/adpe/moodle-filter_fontawesome/issues/6. Does the FontAwesome version is the newest one (5.8.1)?

    Greets
    Adrian
  • Marina González
    Marina González
    Sat, 12 Oct 2019, 5:45 AM
    Can someone tell me why only few icons work? and why the ones I like from the link they send don't (they show as free)? where is the list of usefull icons? Do I have to download the icons? and where in the database are theese icons?
    Thanks
  • Adrian Perez Rodriguez
    Adrian Perez Rodriguez
    Mon, 14 Oct 2019, 2:19 PM
    Hello Marina

    It depends on your FontAwesome icon set that you're providing. In Moodle core is still FontAwesome 4 provided so this list https://fontawesome.com/v4.7.0/icons should help you.

    If you want to use FontAwesome 5 you must import them in your theme to use them. We've added our FA to use overall the light style with a little "hack", look
    at https://moodle.org/mod/forum/discuss.php?d=360259

    HTH
    Adrian
  • Visvanath Ratnaweera
    Visvanath Ratnaweera
    Thu, 31 Oct 2019, 12:58 AM
    Hi
    Is it possible to get FontAwesome icons on headings of activities? Moodle 3.5. filter_fontawesome_moodle35_2019022702. I have posted screen-shots here: https://moodle.org/mod/forum/discuss.php?d=392842.
  • paul ang
    paul ang
    Wed, 4 Dec 2019, 3:47 PM
    Oh my god it works like MAGIC, thank you so much!
  • Stefan Schoch
    Stefan Schoch
    Sun, 15 Dec 2019, 4:13 PM
    I love the filter!
    Is it possible to set the color of the icon?
  • Victor Chavez
    Victor Chavez
    Sun, 19 Apr 2020, 9:46 PM
    Hi, when can we expect the release for moodle 3.8? Thanks!
  • Adrian Perez Rodriguez
    Adrian Perez Rodriguez
    Mon, 20 Apr 2020, 2:19 PM
    Hi Victor

    We'll release it soon. The plan was Mid/End of May but I'll put it forward.
Please login to post comments