List icons

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

  • They are great
  • For organisation
  • And layout smile
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>

Let's see how that looks:

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

Pretty 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
<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 imagination !