Thompson Rivers University
Thompson Rivers University

Iconography & Social Media

Font Awesome

Font Awesome 5 Pro has been implemented in the template, allowing for over 2700 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 four classes 'fas', 'far', 'fal', or 'fab'; as well as the 'fa-icon-name'.

For example, a closed captioning icon can be displayed as follows:   .

<i class="far fa-closed-captioning">&nbsp;</i>

The colour will stay the same as your existing text, unless changed with a helper class like so:   .

<i class="far fa-closed-captioning bluetext">&nbsp;</i>
&nbsp;

In the above examples, in between the italics tags, you will notice a non-breaking space tag (&nbsp;) 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-camera-retro fa-lg"></i> fa-lg</p>
<p><i class="far fa-camera-retro fa-2x"></i> fa-2x</p>
<p><i class="far fa-camera-retro fa-3x"></i> fa-3x</p>
<p><i class="far fa-camera-retro fa-4x"></i> fa-4x</p>
<p><i class="far fa-camera-retro fa-5x"></i> fa-5x</p>

What icons can I use?

Font Awesome has over 2700 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.

See all the icons
See all the examples

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">&nbsp;</i><span class="lh-32"> Facebook</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-twitter-square">&nbsp;</i><span class="lh-32"> Twitter</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square">&nbsp;</i><span class="lh-32"> YouTube</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-instagram">&nbsp;</i><span class="lh-32"> Instagram</span></a></li>
<li><a href="#" class="nobg"><i class="fab fa-2x fa-flickr">&nbsp;</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">&nbsp;</i><span class="lh-32"> Facebook</span></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-twitter-square">&nbsp;</i><span class="lh-32"> Twitter</span></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square">&nbsp;</i><span class="lh-32"> YouTube</span></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-instagram">&nbsp;</i><span class="lh-32"> Instagram</span></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-flickr">&nbsp;</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">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-twitter-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-youtube-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-instagram">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-2x fa-flickr">&nbsp;</i></a></p>

lg-sized Icons

           

<p><a href="#" class="nobg"><i class="fab fa-lg fa-facebook-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-lg fa-twitter-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-lg fa-youtube-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-lg fa-instagram">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-lg fa-flickr">&nbsp;</i></a></p>

Regular-sized Icons

           

<p><a href="#" class="nobg"><i class="fab fa-facebook-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-twitter-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-youtube-square">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-instagram">&nbsp;</i></a>&nbsp;&nbsp;
<a href="#" class="nobg"><i class="fab fa-flickr">&nbsp;</i></a></p>