Filters: FontAwesome icons

filter_fontawesome
Maintained by Picture of FFHS (Fernfachhochschule Schweiz)FFHS (Fernfachhochschule Schweiz), Picture of Adrian Perez RodriguezAdrian Perez Rodriguez, Picture of Christoph KarlenChristoph Karlen, Picture of Sascha VogelSascha Vogel
This filter allows you to use fontawesome icons in the Moodle text editor without worrying about the HTML syntax.
1507 sites
605 downloads
62 fans
Current versions available: 8

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]

Further information

License

Screenshots

Screenshot #0
Screenshot #1

Contributors

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

Comments RSS

Comments

  • Picture of Usman Asar
    Wed, Apr 13, 2016, 10:55 PM
    Hello Ricardo,

    I have upgraded to plenty instances without any of them showing issues, which version of Moodle you're using? also, can you uninstall and re-install to see if the issue remains there?
  • Ricardo Caiado
    Thu, Apr 14, 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, Apr 14, 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, Apr 14, 2016, 10:37 AM
    Ricardo, Just made changes to version file, thanks for reporting, please download again.
    Thanks!
  • Ricardo Caiado
    Thu, Apr 14, 2016, 9:33 PM
    Worked!
  • Picture of Matt Townend
    Mon, Sep 5, 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, Sep 5, 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.
  • Renaat
    Fri, Nov 18, 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, Nov 18, 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, Nov 19, 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, Nov 19, 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, Dec 1, 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, Dec 2, 2016, 12:53 AM
    Joel, is your theme updated with FontAwesome 4.7 as well?
  • Picture of Joël Schmid
    Fri, Dec 2, 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, Dec 8, 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.
Please login to post comments