Iconography & Social Media
Font Awesome
Font Awesome 6 Pro has been implemented in the template, allowing for over 5000 icons to be implemented without the use of graphics.
These icons can be implemented by adding an italics tag with inline classes to your standard markup.
For the icon to appear, you must have at minimum, one of the five classes 'fas', 'far', 'fal', 'fad' or 'fab' which alter the style; as well as the 'fa-icon-name'.
For example, a graduation cap can be displayed as follows: .
<i class="far fa-graduation-cap"> </i>The colour will stay the same as your existing text, unless changed with a helper class like so: .
<i class="far fa-graduation-cap bluetext"> </i>Example of classes 'fas', 'far', 'fal', 'fad' and 'fab'.
font awesome solid (fas)
font awesome regular (far)
font awesome light (fal)
font awesome duotone (fad)
font awesome brands (fab)
In the above examples, in between the italics tags, you will notice a non-breaking space tag ( ) used. The use of this tag is necessary for Font Awesome to work with our template.
Icon Sizes
In order to change the size of the icons, add the class 'fa-lg' or 'fa-2x' up to 'fa-5x', depending on the desired size of the icon.
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
<p><i class="far fa-graduation-cap fa-lg"></i> fa-lg</p>
<p><i class="far fa-graduation-cap fa-2x"></i> fa-2x</p>
<p><i class="far fa-graduation-cap fa-3x"></i> fa-3x</p>
<p><i class="far fa-graduation-cap fa-4x"></i> fa-4x</p>
<p><i class="far fa-graduation-cap fa-5x"></i> fa-5x</p>What icons can I use?
Font Awesome has over 5000 icons available for use. In addition to using them as shown on this page, icons can be stacked, rotated, or set to display at a fixed width.
Social Media Icons
Social Icons in a vertical list
<ul class="fa-ul footer-social-links">
<li><a href="#" class="nobg"><i class="fab fa-2x fa-facebook-square"> </i><span class="lh-32"> Facebook</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-x-twitter"> </i><span class="lh-32"> Twitter</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square"> </i><span class="lh-32"> YouTube</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-instagram"> </i><span class="lh-32"> Instagram</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-flickr"> </i><span class="lh-32"> Flickr</span></a></li>
</ul>Inline - Icons and text
Facebook Twitter YouTube Instagram Flickr
<p>
<a href="#" class="nobg"><i class="fab fa-2x fa-facebook-square"> </i><span class="lh-32"> Facebook</span></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-x-twitter"> </i><span class="lh-32"> Twitter</span></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square"> </i><span class="lh-32"> YouTube</span></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-instagram"> </i><span class="lh-32"> Instagram</span></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-flickr"> </i><span class="lh-32"> Flickr</span></a>
</p>Inline - Icons only
2x-sized Icons
<p>
<a href="#" class="nobg"><i class="fab fa-2x fa-facebook-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-x-twitter"> </i></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-instagram"> </i></a>
<a href="#" class="nobg"><i class="fab fa-2x fa-flickr"> </i></a>
</p>lg-sized Icons
<p>
<a href="#" class="nobg"><i class="fab fa-lg fa-facebook-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-lg fa-x-twitter"> </i></a>
<a href="#" class="nobg"><i class="fab fa-lg fa-youtube-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-lg fa-instagram"> </i></a>
<a href="#" class="nobg"><i class="fab fa-lg fa-flickr"> </i></a>
</p>Regular-sized Icons
<p>
<a href="#" class="nobg"><i class="fab fa-facebook-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-x-twitter"> </i></a>
<a href="#" class="nobg"><i class="fab fa-youtube-square"> </i></a>
<a href="#" class="nobg"><i class="fab fa-instagram"> </i></a>
<a href="#" class="nobg"><i class="fab fa-flickr"> </i></a>
</p>