Icons

Social

More social icons are available in font-awesome, these are the subset that have been set up to work with the correct social brand colours and icon classes.

Default social

Each of these social icons will pick up their relevant social brand colours where ever they are used, unless specifically overridden.

<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-instagram"></span></a>
<a href="#"><span class="fa fa-youtube-play"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a>
<a href="#"><span class="fa fa-soundcloud"></span></a>
<a href="#"><span class="fa fa-snapchat-ghost"></span></a>
<a href="#"><span class="fa fa-wordpress"></span></a>
<a href="#"><span class="fa fa-wechat"></span></a>
<a href="#"><span class="fa fa-plus"></span></a>

Small round social

An additional class of .small-round-icon can be applied to display a small circular (30px) inverted social icon (white-on-colour).

<span class="fa fa-facebook round-icon small-round-icon"></span>

Round social

An additional class of .round-icon can be applied to display a circular (40px) inverted social icon (white-on-colour).

<span class="fa fa-facebook round-icon"></span>

Large round social

An additional class of .large-round-icon can be applied to display a large circular (60px) inverted social icon (white-on-colour).

<span class="fa fa-facebook round-icon large-round-icon"></span>

Last updated
11 September 2017 @ 10:19 — Dean Robinson