Sizing an icon

If you want to make the icon bigger or smaller, you just add a simple size factor. We've been using this below (in bold) so far:

<span class="fas fa-grauation-cap fa-5x"></span>

...change the number to change the size - easy !

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

<span class="fa fa-graduation-cap fa-5x"></span>

That's basically because it made the Font Awesome characters 5 times their normal size, and so much easier to see in these examples.

Here is the same icon but without a size increase:

<span class="fa fa-graduation-cap"></span>

Pretty tiny eh?

So we just added the fa-5x 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-graduation-cap"></i>

Twice normal

<i class="fa fa-graduation-cap fa-2x"></i>

Three times

<i class="fa fa-graduation-cap fa-3x"></i>

Five times

<i class="fa fa-graduation-cap 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 smile