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>

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>

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>

Twice normal

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

Three times

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

Five times

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

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>

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

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

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

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.

Add a reply or comment...

%d bloggers like this: