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.

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)

Stuart Mealor

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.

3 thoughts on “Font Awesome and Moodle, Part 7 — fixed width icons

Add a reply or comment...

%d bloggers like this: