Font Awesome and Moodle, Part 7 — fixed width icons

Why might you want to use fixed-width icons?

(Link to Part 1 of this series – basics)
(Link to Part 2 of this series – icons)
(Link to Part 3 of this series – colour)
(Link to Part 4 of this series – size)
(Link to Part 5 of this series – colour & size combinations)
(Link to Part 6 of this series – rotating)
(Link to Part 7 of this series – fixed width icons)
(Link to Part 8 of this series – list icons)
(Link to Part 9 of this series – pulling icons)

• Better appearance in navigations lists
• Better appearance in list groups

Think about our previous example:

<span class="fa fa-info fa-5x" style="color:blue"></span> <span class="fa fa-question-circle fa-5x" style="color:green"></span> <span class="fa fa-warning fa-5x" style="color:red"></span>

These icons don’t have a problem being used next to each other like this. But what if they were displayed vertically, perhaps with text following them?

<span class="fa fa-info fa-2x" style="color:blue"></span> Information about...<span class="fa fa-question-circle fa-52" style="color:green"></span> Questions about...<span class="fa fa-warning fa-2x" style="color:red"></span> Warning about...

Information about…

Questions about…

Warning about…

They are not really aligned very well are they? We can greatly improve this quite easily by adding the fa-fw code, which means ‘fixed width’:

<span class="fa fa-info fa-2x" style="color:blue" fa-fw></span> Information about...<span class="fa fa-question-circle fa-52" style="color:green" fa-fw></span> Questions about...<span class="fa fa-warning fa-2x fa-fw" style="color:red"></span> Warning about...

Information about…

Questions about…

Warning about…

Much better eh? More Font Awesome fun next month !

See the full collection of articles on using Font Awesome with Moodle try this dedicated (open and free) Moodle course on our ElearningWorld Academy.

• About
• Latest Posts

Stuart Mealor

Managing Director at HRDNZ

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development.His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Latest posts by Stuart Mealor (see all)

• H5P periodic table – 8th September 2023
• Moodle 4.0 – 15th May 2022
• Moodle 4.0 other highlights – 14th May 2022