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:
2075 sites
980 downloads
86 fans
Current versions available: 4

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

Screenshots

Screenshot #0
Screenshot #1

Contributors

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

Comments RSS

Vís viðmerkingar
  • Ezekiel Lozano
    frí., 5. feb. 2021, 10:42
    This is so awesome! Kudos to all who contributed to this work!
  • Kirk Bowe
    hós., 7. okt. 2021, 15:29
    Using [fa-*] filter codes in topic titles appears to break the backup process. Tested in Moodle 3.10.3, plugin version 3.10-r1. Backup fails with 'error/setting_invalid_ui_label'. Just putting anything in square brackets, e.g. [not-acode] is fine, so it looks like maybe the filter is invoked when the backup tries to validate the title, so the validator sees the renderable html from the filter and not just something in square brackets.
  • Adrian Perez Rodriguez
    hós., 7. okt. 2021, 16:17
    Thank you for the bug report, Kirk.

    We'll tackle this issue soon (https://github.com/ffhs/moodle-filter_fontawesome/issues/8).
  • Adrian Perez Rodriguez
    frí., 22. okt. 2021, 22:18
    Hello Kirk

    Using a newer Moodle core version, the error disappears and will not be thrown. I can only reproduce it on a Moodle 3.11.3 (Build: 20210913), but not on Moodle 3.11.3+ (Build: 20210917) or Moodle 3.11.3+ (Build: 20211022).

    Could you please have a look after updating your Moodle core version?

    It's also related to this setting "formatstringstriptags". More information can be found under https://tracker.moodle.org/browse/MDL-71093. As you see here, 3.10.8 and 3.11.4 are the fixed versions.

    Greets
    Adrian
  • Mary Cooch
    frí., 4. feb. 2022, 20:35
    Hello there! Following a query about the docs page being out of date https://docs.moodle.org/en/FontAwesome_filter , would it be possible for one of you to add some information to that page for people who come to it? Thanks!
  • Visvanath Ratnaweera
    týs., 23. aug. 2022, 22:48
    I'm on Moodle rel. 3.9, themes Boost and Classic. I still get FA 4.7, as theme/boost/scss/fontawesome.css says. How can I update to FA 5.0 free?
  • Sascha Vogel
    hós., 8. sep. 2022, 03:01
    Hi Visvanath

    If you don't have the possibility to load a newer FA version in your theme, you can load it via "Additional HTML" e.g. from a CDN:
    See also: https://docs.moodle.org/39/en/FontAwesome_filter#Load_FontAwesome_via_CDN
  • Visvanath Ratnaweera
    mán., 12. sep. 2022, 16:46
    Hallo Sacha, you mean things like CloudFlare? No we don't use any.
  • Visvanath Ratnaweera
    týs., 13. sep. 2022, 15:36
    I received this answer in the German community: https://moodle.org/mod/forum/discuss.php?d=438132#p1763793. Any ideas?
  • Sascha Vogel
    týs., 13. sep. 2022, 17:57
    Hi Visvanath

    Best way is to use a theme supporting FA 5 e.g. a child theme of boost.

    Alternatively use the setting "additionalhtmlhead". You can link there a stylesheet for FA 5. If you don't want to use a CDN, you can download it to your server and adapt the path of your stylesheet link in your "additionalhtmlhead" setting. See https://fontawesome.com/v5/docs/web/setup/host-font-awesome-yourself.
  • Visvanath Ratnaweera
    mik., 14. sep. 2022, 16:13
    Hallo Sascha, thanks for all the workarounds. I sent the word to the German forum (mentioned in my previous message). For us, it is not urgent, it is about a handful of icons after all. But good to know, once there is a need anew.
  • Victor Perez
    frí., 30. sep. 2022, 00:35
    Hello! Does any one knows if the last version of this plugin works with Moodle 4?
  • Sascha Vogel
    mik., 12. okt. 2022, 20:59
    Hi Victor
    Yes, this plugin works with Moodle 4.
  • Alex Keiller
    týs., 16. mai 2023, 19:56
    Good afternoon. Does this plugin work with Moodle 4.1 or can an update be expected?
  • Sascha Vogel
    týs., 16. mai 2023, 20:40
    Hi Alex
    This plugin works with Moodle 4.1 and 4.2.
1 2 3 4
Please login to post comments