Font Awesome icons

I love the Font Awesome icons and regularly use them to spice up my website, like this example at www.thegatewaychurch.info.

Very soon I’ll be adding an icon chooser block to the Church Admin Theme, but for now here’s how to add them yourself.

You’ll need to head over to the Font Awesome website.

All the icons that are not greyed out are included free in my theme.

For the purposes of this tutorial, we will use the globe europe icon. Search for it and you get the page like this…

We will need to grab the HTML code <i class=”fas fa-globe-europe”></i>. Thankfully you can click it to copy it to your clipboard.

Next you need to put it on your page in a Custom HTML block

– but goodness that is small and black!

You can change the size of it by adding fa-5x, fa-4x, fa-3x, fa-2x just in the class section

<i class=”fas fa-globe-europe fa-5x”></i>

<i class=”fas fa-globe-europe fa-4x”></i>

<i class=”fas fa-globe-europe fa-3x”></i>

<i class=”fas fa-globe-europe fa-2x”></i>

You can add some colour like so…

<i class=”fas fa-globe-europe fa-5x danger-color”></i>

<i class=”fas fa-globe-europe fa-5x danger-color-dark”></i>

<i class=”fas fa-globe-europe fa-5x warning-color”></i>

<i class=”fas fa-globe-europe fa-5x warning-color-dark”></i>

<i class=”fas fa-globe-europe fa-5x success-color”></i>

<i class=”fas fa-globe-europe fa-5x success-color-dark”></i>

<i class=”fas fa-globe-europe fa-5x info-color”></i>

<i class=”fas fa-globe-europe fa-5x info-color-dark”></i>

This is all available on my Church Admin Theme!