For the online learning world


Font Awesome and Moodle, Part 4 – Size

In part three of this series we looked at how to add colours to Font Awesome.

(Link to Part 1 of this series)
(Link to Part 2 of this series)
(Link to Part 3 of this series)

In this post, we will be looking at how to size Font Awesome characters.

We haven’t even mentioned it so far

If you have been trying out the examples from previous posts, you may notice that I haven’t really explained the size statement?  We just sort of had the size in there all along, using that simple fa-3x value.

<i class="fa fa-camera-retro fa-3x"></i>

[wpfa icon=”camera-retro” size=”3x” color=”black”]

That’s basically because it made the Font Awesome characters 3 times their normal size, and so far easier to see in these posts.

Here is the same icon but without a size increase:

<i class="fa fa-camera-retro"></i>

[wpfa icon=”camera-retro” color=”black”]

Pretty tiny eh?

So we just added the 3x statement so we could see what we are doing right from the start.

What size can Font Awesome be?

Well, let’s look at the following and see what they look like:

Normal size:

<i class="fa fa-camera-retro"></i>

[wpfa icon=”camera-retro” color=”black”]

Twice normal

<i class="fa fa-camera-retro fa-2x"></i>

[wpfa icon=”camera-retro” size=”2x” color=”black”]

Three times

<i class="fa fa-camera-retro fa-3x"></i>

[wpfa icon=”camera-retro” size=”3x” color=”black”]

Five times

<i class="fa fa-camera-retro fa-5x"></i>

[wpfa icon=”camera-retro” size=”5x” color=”black”]

Note that using this technique will mean the normal size is the same as the existing font on your page.

In technical language, it’s relative to the size of it’s “container” – which basically means the existing size of text on the page at that location. So if it’s 12pt, and you add fa-2x, it will become 24pt.

Small, extra-small, or large fries ?

It’s also possible to use the fa-xs (extra small), fa-sm (small), and fa-lg (large):

<i class="fa fa-camera-retro fa-xs"></i>

[wpfa icon=”camera-retro” size=”xs” color=”black”]

<i class="fa fa-camera-retro fa-sm"></i>

[wpfa icon=”camera-retro” size=”sm” color=”black”]

<i class="fa fa-camera-retro fa-lg"></i>

[wpfa icon=”camera-retro” size=”lg” color=”black”]

The lg tag will increase the size by 33% over the existing size.

Try zooming your browser in and out to see how this affects the size?

So, now you can size your icons using a number of methods 🙂

All good ?

OK, so your task before my next Font Awesome post is to see if you can add some Font Awesome icons to your course, maybe as icons for each Section (Topic or Week) at a size that works well 🙂

Good luck !

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

Add a reply or comment...