Font Awesome and Moodle, Part 8 – list icons

Why might you want to use Font Awesome list 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)

Unordered lists are often called bulleted lists, and look like this:

• They are great
• For organisation
• And layout 

In HTML we call this an unordered list, with the alternative being a numbered list:

1. Numbered lists
2. Are also
3. Pretty useful

But let’s see how Font Awesome can be used to replace the standard bullets:

• List item 1
• List item 2
• List item 3

Let’s make this a bit more attractive using this code to replace the bullets with ticks…

[wpfa icon=”fa-check-square”]
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-check-square"></i>as bullets</li>
  <li><i class="fa-li fa fa-check-square"></i>in lists</li>
</ul>

Pretty good !

• List icons
• can be used
• as bullets
• in lists

Cool eh?

How about this in a travel and tourism course…

<ul class="fa-ul">
  <li><i class="fa-li fa fa-plane"></I>Aviation</li>
  <li><i class="fa-li fa fa-plane"></I>Destinations</li>
  <li><i class="fa-li fa fa-plane"></I>Passports</li>
  <li><i class="fa-li fa fa-plane"></I>Demographics</li>
</ul>

Let’s see how that looks:

• Aviation
• Destinations
• Passports
• Demographics

Or what about a course about music…

<ul class="fa-ul">
  <li><i class="fa-li fa fa-music"></I>Classical</li>
  <li><i class="fa-li fa fa-music"></I>Jazz</li>
  <li><i class="fa-li fa fa-music"></I>Popular</li>
  <li><i class="fa-li fa fa-music"></I>Progressive</li>
</ul>

• Classical
• Jazz
• Popular
• Progressive

The only limit is your creativity 🙂

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