Skip to main content

HOP noticeboard

Font Awesome

Font Awesome
by Tomasz Szopa -
Number of replies: 1


A new, simple way to add Font Awesome fonts! Anywhere you write, and like to add one of hundreds, free Font Awesome icons, just put its name in square brackets with fa- (with no spaces that I have added just to visualise the text for you), for instance for "smile" icon .

[ fa-smile ]


If you have typed in the icon name correctly you will see the icon appear once you have hit save. If you wish to make the icon larger you can use a multiplier .

[ fa-smile fa-2x ] or [ fa-smile fa-4x ]


Changing colour is more than easy. Just modify the colour of the square brackets with fa-icon name inside . If your editor does not allow to change colours, choose "TinyMCE" from drop-down menu -> preferences ->editor preferences, it has many more options to edit text.


You can also flip an icon horizontally or vertically .

[ fa-smile fa-flip-vertical ]


And you can "pull" the icon to the left or right. If it is "pulled" to the left text will wrap to the right.

[ fa-smile pull-left ]


And of course you can mix all different options to get the expected outcome. Enjoy!

Your HOP admin

In reply to Tomasz Szopa
Re: Font Awesome
by Tomasz Szopa -

As you might already realise, the icons for activities and resources in the HOP courses were substituted with the good looking ones from Font Awesome. Hope this modification will add to simplification of the platform's layout and will let you focus at the courses' content, not the colourful and chaotic icons we had previously.

Your HOP admin