Font Awesome For Fast, High-Resolution, Accessible Icons In Moodle 3.3

--- Advertisement ---

Connected 2023
Connected Conference OpenLMS

No matter how much internet speeds increase in each new generation, efficiency is a critical concern of every IT operation. The entry of mobile as a more dependable connection to the internet (including, of course, LMS) poses a new challenge when it comes to efficiency in the User Interface (UI), as sites have to guarantee a perfect look no matter the platform used to access it.

Responsiveness became the answer. One interface, with behavior rules that would change its layout and size, solved all the web designers’ prayers. With one exception. Images used as key navigation pointers across a site are harder to optimize for all sites. If they are too small, they look pixellated on larger and higher resolution screens. If they are too large, they make the site take longer to load on small devices where the image will not even be appreciated.

Open Source developer Dave Gandy saw how widespread this problem was and came up with a clever solution based on fonts. Unlike images, fonts can scale without losing their form. Just open a text editor, write anything, and make the text as gigantic as you want. Try it on any font. You will never see pixels.

Even today, after 4 versions of Font Awesome developed by Gandy (with the support of volunteers, and the addition of many new icons each time) the font excels at giving designers hundreds of icons, while being lighter than a high resolution image. Now, in Moodle 3.3, Font Awesome comes as the default method of display for all the icons on the Site.

Here are some of the advantages of Font Awesome for Moodle, as shown in the video:

  • A comprehensive list of frequently used icons, available at low bandwidth and speed costs.
  • A unified selection offering a visual standard across sites.
  • Improved performance and efficiency when showing pages.
  • High contrast and prominence that remains so when scaled to any size.
  • Conformity of the site’s icons to modern accessibility standards.
  • Easily-changed color with CSS properties.
  • The need for only a single download, if the official BootstrapCDN is used to source Font Awesome, to display icons from every site that uses the CDN.
  • Last but not least, Open Source license.

The Font Awesome icons are enabled by default across Moodle 3.3. menu items, and the options on the text editors. Up-to-date themes can take advantage of Font Awesome, but they can also override it.

Check out our complete Moodle 3.3 coverage.

Download the latest Moodle 3.3 at

Moonami LogoThis Moodle Technology related post is made possible by: Moonami a company that provides a full range of Moodle services that combine the flexibility, scalability, and power of Amazon’s world-leading cloud platform (AWS) with fanatical Moodle support. Click here to learn more.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Dive Deeper On

The Latest

The eLearn Podcast

Connected Conference OpenLMS

--- Advertisement ---

Post Pages - Sidebar 4 - CourseMerchant

--- Advertisement ---

Post Pages - Sidebar 7 - Titus Learning

--- Advertisement ---

Post Pages - Sidebar 5 - Edwiser (RemUI)

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.