Thompson Rivers University
Thompson Rivers University

Iconography & Social Media

Please note:

In order for FontAwesome icons to work consistently, you need to insert them using HTML, including a non-breaking space tag. This will keep them from breaking when your page is edited with the visual editor.

To clarify, if you want to insert a camera icon, an &nbsp; tag needs to be inserted between the <i> tags </i> as follows:

<i class="fa fa-camera-retro fa-2x">&nbsp;</i> Camera Icon

FontAwesome has been implemented in the template, allowing for a huge number of icons to be implemented without using graphics.

General Usage

FontAwesome is implemented by adding an italic tag with several classes inline with your standard markup. For the icon to appear, you must have at minimum, the classes 'fa' and 'fa-icon-name'. For example,   This has a Closed Caption icon. The colour will stay the same as your existing text, unless changed with a helper class like so:   Note: Blue text!

<span class="bluetext"><i class="fa fa-exclamation-circle">&nbsp;</i> Note: Blue text!</span>

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="fa fa-camera-retro fa-lg">&nbsp;</i> fa-lg<br>
<i class="fa fa-camera-retro fa-2x">&nbsp;</i> fa-2x<br>
<i class="fa fa-camera-retro fa-3x">&nbsp;</i> fa-3x<br>
<i class="fa fa-camera-retro fa-4x">&nbsp;</i> fa-4x<br>
<i class="fa fa-camera-retro fa-5x">&nbsp;</i> fa-5x</p>

What Icons can I use?

FontAwesome has over 580 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.

To use a particular icon, insert the name of it after 'fa fa-' in the class as shown on this page.

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

lg-sized Icons

           

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

Regular-sized Icons

           

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