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…


<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.

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.

One thought on “Font Awesome and Moodle, Part 8 – list icons

Add a reply or comment...

%d bloggers like this: