FontAwesome filter: Difference between revisions
| FontAwesome filter | |
|---|---|
| Type | filter |
| Set | N/A |
| Downloads | https://moodle.org/plugins/filter_fontawesome |
| Issues | https://github.com/ffhs/moodle-filter_fontawesome/issues |
| Discussion | https://moodle.org/plugins/filter_fontawesome |
| Maintainer(s) | FFHS (Fernfachhochschule Schweiz) |
Mary Cooch (talk | contribs) No edit summary |
m (Maintainer link) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Infobox plugin | {{Infobox plugin | ||
|type = | |type = filter | ||
|entry = https://moodle.org/plugins/filter_fontawesome | |entry = https://moodle.org/plugins/filter_fontawesome | ||
|tracker = https://github.com | |tracker = https://github.com/ffhs/moodle-filter_fontawesome/issues | ||
|maintainer = [ | |discussion = https://moodle.org/plugins/filter_fontawesome | ||
|maintainer = [https://moodle.org/user/profile.php?id=2706871 FFHS (Fernfachhochschule Schweiz)] | |||
|float = right | |float = right | ||
}} | }} | ||
Font Awesome provides sites with scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome is fully open source and is GPL compatible. No attribution is required when using the fonts although the project does say it is appreciated. | Font Awesome provides sites with scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome 4.7.0 is used by Moodle core. This version is fully open source and is GPL compatible. No attribution is required when using the fonts, although the project does say it is appreciated. | ||
This filter makes it easy to add Font Awesome icons to course content in any Moodle site. Please be sure to target any questions related to this filter to the [https://moodle.org/plugins/filter_fontawesome Plugins discussion] at the Moodle plugins directory, and bugs to the [https://github.com/ffhs/moodle-filter_fontawesome/issues GitHub issues tracker]. | |||
==Filter Objectives== | ==Filter Objectives== | ||
The aim of this filter was to provide an easy and functional way for content creators to easily add | The aim of this filter was to provide an easy and functional way for content creators to easily add Font Awesome icons anywhere in course content. If using the recommended method provide by Font Awesome which involves creating custom ''<code>classes</code>'' you will find that the text editor strips these out automatically as unrecognized/bad code. | ||
This filter allows you to use Font Awesome icons in the Moodle text editor without worrying about having your div's stripped out by the Moodle Atto/TinyMCE HTML cleaner. | |||
==Requirements== | |||
Your site/theme must have Font Awesome embedded already. This filter does not provide the font. | |||
*Moodle 3.3 upwards | |||
==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 Font Awesome icons in text fields, use the following syntax: [fa-*] where * is the name of the icon you wish to display. The hardest part is finding the icon you wish to use. To browse the full list of the icons, please visit [https://fontawesome.com/v4.7/icons/ this link]. Once you have found the icon, you just have to surround it with a set of square brackets. e.g.: | |||
[fa-camera-retro] | [fa-camera-retro] | ||
If you have typed in the icon name correctly, you will see the icon appear once you have hit save. More examples can be found [https://github.com/ffhs/moodle-filter_fontawesome#usage here] or below. | |||
If you have typed in the icon name correctly you will see the icon appear once you have hit save. | === Configurable Options=== | ||
If you wish to make the icon larger, you can use a multiplier. e.g.: | |||
==Configurable Options== | [fa-camera-retro fa-2x] or [fa-camera-retro fa-4x] | ||
If you wish to make the icon larger you can use a multiplier. e.g.: | |||
If you wish to rotate the icon you can specify how many degrees clockwise. e.g.: | 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.: | 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.: | 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.: | 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] | |||
====Advanced Tip==== | |||
All the settings above can be mixed and matched. For example, if I were to type in: | |||
===Advanced Tip=== | [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 many new possibilities. | |||
All the settings above can be mixed and matched. For example, if I | |||
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 | |||
You would generate: | You would generate: | ||
[[File:fontawesome_advancedtip.png]] | [[File:fontawesome_advancedtip.png]] | ||
==See also== | ==See also== | ||
*[https://moodle.org/plugins/view.php?plugin=filter_fontawesome FontAwesome | *[https://moodle.org/plugins/view.php?plugin=filter_fontawesome FontAwesome filter]'s Plugin database listing | ||
*[https:// | *[https://moodle.org/plugins/filter_fontawesome/versions Download the latest versions] | ||
*[https://github.com/ | *[https://github.com/ffhs/moodle-filter_fontawesome Browse GitHub repository] | ||
*[https:// | *[https://fontawesome.com/v4.7 FontAwesome official website 4.7.0] | ||
*[https://fontawesome.com/ FontAwesome official website nowadays] | |||
*[ | |||
[[Category:Contributed code]] | [[Category:Contributed code]] | ||
[[es:Filtro FontAwesome]] | [[es:Filtro FontAwesome]] | ||
Latest revision as of 07:24, 7 February 2022
Font Awesome provides sites with scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome 4.7.0 is used by Moodle core. This version is fully open source and is GPL compatible. No attribution is required when using the fonts, although the project does say it is appreciated.
This filter makes it easy to add Font Awesome icons to course content in any Moodle site. Please be sure to target any questions related to this filter to the Plugins discussion at the Moodle plugins directory, and bugs to the GitHub issues tracker.
Filter Objectives
The aim of this filter was to provide an easy and functional way for content creators to easily add Font Awesome icons anywhere in course content. If using the recommended method provide by Font Awesome which involves creating custom classes you will find that the text editor strips these out automatically as unrecognized/bad code.
This filter allows you to use Font Awesome icons in the Moodle text editor without worrying about having your div's stripped out by the Moodle Atto/TinyMCE HTML cleaner.
Requirements
Your site/theme must have Font Awesome embedded already. This filter does not provide the font.
- Moodle 3.3 upwards
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 Font Awesome icons in text fields, use the following syntax: [fa-*] where * is the name of the icon you wish to display. The hardest part is finding the icon you wish to use. To browse the full list of the icons, please visit this link. Once you have found the icon, you just have to surround it with a set of square brackets. e.g.:
[fa-camera-retro]
If you have typed in the icon name correctly, you will see the icon appear once you have hit save. More examples can be found here or below.
Configurable Options
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]
Advanced Tip
All the settings above can be mixed and matched. For example, if I were 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 many new possibilities.
You would generate:
