Frequently Asked Question

Tools: How to use FontAwesome
Last Updated 2 years ago

How to use FontAwesome

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. You can add FontAwesome icons anywhere you have a text box in Moodle; these are the steps:

1. Browse the list of free FontAwesome icons here:
https://fontawesome.com/icons?d=gallery&m=free

2.Once you pick the name of the FontAwesome icon that you want to use, e.g. fa-camera-retro  insert it in the HTML code area of the Moodle text box

image



3. Paste the name of the icon, surrounded by brackets wherever you want the icon at, e.g  [fa-camera-retro]

4. Additional effects that you can add to the icon are:
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]

5. You can click on the link below for additional details regarding FontAwesome:
https://moodle.org/plugins/filter_fontawesome

Please Wait!

Please wait... it will take a second!