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, Edwiser RemUI 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.
1002 sites
367 downloads
31 fans
Moodle 2.5, 2.6, 2.7, 2.8, 2.9, 3.0, 3.1, 3.2, 3.3, 3.4

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 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, Edwiser RemUI & BCU and most of them will be updated to latest version 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
  • Picture of Brinto Shalin
    Thu, 30 Nov 2017, 5:37 PM
    This is really good one.quite interesting too.I really liked this,.
    http://tampa-397.comfortkeepers.com/home/home-care-services/tampa-dementia-care-services
  • Picture of Stephen hawking
    Sat, 9 Dec 2017, 3:13 PM
    By pertinent I implied on the off chance that you are guaranteed of your principle topic utilizing/refreshed to FontAwesome 4.7, at that point you can download 4.7, else any past material adaptation. Try not to stress over utilizing a most refreshed form of this channel, regardless of whether your Theme is refreshed, the most recent symbols won't just show up, rest more established symbols will work fine. For this situation, you can simply ask for your subject designer to refresh the Font Awesome on the topic.

    Web Source: https://www.essayavenue.co.uk/write-my-essay/
  • Picture of Stella Ban
    Tue, 12 Dec 2017, 6:35 PM
    Try no longer to strain over making use of a maximum refreshed form of this channel, no matter whether or not your subject matter is refreshed, the maximum current symbols might not simply show up, relaxation extra established symbols will work pleasant. And I can not discover the element approximately the other subject. thanks.manipulate Filters and in FontAwesome icon clear out, select "content & headings" in practice to section.
    Web Source Link: http://www.essaybuzz.co.uk/ "Do my Essays"
  • Picture of Elli Noah
    Tue, 12 Dec 2017, 6:37 PM
    I can not find out the detail about the opposite concern. thank you.control Filters and in FontAwesome icon clear out, select "content material & headings" in practice to the segment. No matter whether or not your topic is refreshed, the maximum latest symbols won't simply display up, relaxation greater mounted symbols will paintings first-rate.
    Web Source Link: http://www.essayhelppros.co.uk/ "Essay"
  • Picture of Olive. Ethan
    Tue, 12 Dec 2017, 6:38 PM
    The routes you could, use CDN link into the theme of your preference, and it's going to paintings with them as properly, in contrast to in advance, in which FontAwesome link turned into publicly available. Evolve-D and so forth) then this clear out will let you use FontAwesome icons to your content material the use of the easy syntax in preference to typing the entire font embed code." a person have the equal hassle and is not capable of using the new icons furnished in FontAwesome version 4.7.
    SOURCE VIA: https://www.trueessayhelp.co.uk/ | "Essay Help Websites"
  • Picture of irene jacob
    Sat, 23 Dec 2017, 6:39 PM
    Thank you for your information, this i really helpful to new users like me, I am working with academic writing services. As a newbie to here the step by step instructions helped me to understand it's proper working. https://essayexpert.us/
  • Picture of brock lesner
    Sat, 30 Dec 2017, 6:20 PM
    nice post
  • Picture of leya peter
    Tue, 2 Jan 2018, 12:38 PM
    The information you have provided is really substantial. Please do posting such contents for references. It would be of great help. https://cybexhosting.com/
  • Picture of leya peter
    Tue, 2 Jan 2018, 12:43 PM
    Some data are not available in the context so its a bit confusing. Please try to add all the data so that it could be useful to the readers. https://expressure.in/
  • Picture of make cards
    Tue, 2 Jan 2018, 1:49 PM
    thanks for the info. im using adaptable theme for my new website of cards store ( https://www.makeyourcards.in/ ). i think this frontawesome filter help me to create icons for my website. thank you.
  • Picture of Solomon Daniel
    Wed, 10 Jan 2018, 4:48 PM
    Staggering site, greatly instructive.The data you have given is extremely significant. Kindly do posting such substance for references. It would be of incredible help. an obligation of appreciation is all together for this post, keep it up. https://www.proessay.co.uk
  • Picture of Roger Jack
    Fri, 12 Jan 2018, 4:42 PM
    I like this site, it's instructive. your post is exceptional. fundamental stores of customary resources, like oil and significant metals, are the bulwarks for setting up the systems for what's to come. Well-run libraries are stacked with people since what awesome library offers can't be easily found elsewhere: an indoor open space in which you don't have to buy anything to remain. a commitment of thankfulness is unmitigated to share this post. other than https://www.proassignment.co.uk
  • Picture of Dinu Jose
    Fri, 19 Jan 2018, 2:08 PM
    Thanks for the information. Spices manufacturers in India
  • Picture of Paul son
    Fri, 19 Jan 2018, 5:10 PM
    I am using FontAwsome equipped theme for my website. It is really cool and user-friendly. But I was not aware that it having this much advantage. Thanks so much for the information.
    thanks,
    CEO of apartments in kochi
  • Picture of Don Paul
    Tue, 23 Jan 2018, 1:41 PM
    This article describes the FantAwsome icon filter. Thanks for the information. Raised access floor Dubai
1 2 3
Please login to post comments