New This website is new, your feedback will help us to improve it.

Social media

Overview

Use this component to consistently display links to the social media services BAS uses.

BAS style kit uses the Fontawesome brands icons for social media icons.

All brand assets trademarks of their respective owners, and subject to their respective licensing restrictions.
You must ensure that where you use these assets you comply with these restrictions.

Sizes

Sizes are managed by the Fortawesome class as shown here: Icon sizes

In general use the 'T-Shirt' based relative sizes. E.g. fa-2xs fa-xs fa-sm fa-lg fa-xl fa-xl

Literal sizing is also available. E.g. fa-1x fa-2x fa-3x ... fa-10x

Supported services

Colours and Icons are defined for each supported service.

Fontawsome has hundreds of available brand icons available.
Fontawesome brands

The list here is of some of the more widely used brand icons for social media.

Social Media Service Social Media Service Classes
X fa-brands fa-x-twitter fa-xl
Bluesky fa-brands fa-bluesky fa-xl
Facebook fa-brands fa-facebook fa-xl
Instagram fa-brands fa-instagram fa-xl
Linkedin fa-brands fa-linkedin fa-xl
YouTube fa-brands fa-youtube fa-xl
Email fa-solid fa-envelope fa-xl
RSS fa-solid fa-rss fa-xl 

<i class="fa-brands fa-x-twitter fa-xl"></i>
<i class="fa-brands fa-bluesky fa-xl"></i>
<i class="fa-brands fa-facebook fa-xl"></i>
<i class="fa-brands fa-instagram fa-xl"></i>
<i class="fa-brands fa-linkedin fa-xl"></i>
<i class="fa-brands fa-youtube fa-xl"></i>
<i class="fa-solid fa-envelope fa-xl"></i>
<i class="fa-solid fa-rss fa-xl"></i>

States

Static symbols

Use the sr-only class to improve accessibility.

Follow us on X Follow us on Bluesky Follow us on Facebook Follow us on Instagram

<i class="fa-brands fa-x-twitter fa-xl"><span class="sr-only">Follow us on X</span></i>
<i class="fa-brands fa-bluesky fa-xl"><span class="sr-only">Follow us on Bluesky</span></i>
<i class="fa-brands fa-facebook fa-xl"><span class="sr-only">Follow us on Facebook</span></i>
<i class="fa-brands fa-instagram fa-xl"><span class="sr-only">Follow us on Instagram</span></i>

Linked symbols

Follow us on X Follow us on Bluesky Follow us on Facebook Follow us on Instagram

<a href="#"><i class="fa-brands fa-x-twitter fa-xl text-bsk-blue"><span class="sr-only">Follow us on X</span></i></a>
<a href="#"><i class="fa-brands fa-bluesky fa-xl text-bsk-blue"><span class="sr-only">Follow us on Bluesky</span></i></a>
<a href="#"><i class="fa-brands fa-facebook fa-xl text-bsk-blue"><span class="sr-only">Follow us on Facebook</span></i></a>
<a href="#"><i class="fa-brands fa-instagram fa-xl text-bsk-blue"><span class="sr-only">Follow us on Instagram</span></i></a>

Layouts

List of symbols

Use the inline-flex class to show a list of icons next to each other horizontally.

<ul class="list-unstyled inline-flex">
  <li class="p-2"><a href="#"><i class="fa-brands fa-x-twitter fa-xl text-bsk-blue"><span class="sr-only">Follow us on X</span></i></a></li>
  <li class="p-2"><a href="#"><i class="fa-brands fa-bluesky fa-xl text-bsk-blue"><span class="sr-only">Follow us on Bluesky</span></i></a></li>
  <li class="p-2"><a href="#"><i class="fa-brands fa-facebook fa-xl text-bsk-blue"><span class="sr-only">Follow us on Facebook</span></i></a></li>
  <li class="p-2"><a href="#"><i class="fa-brands fa-instagram fa-xl text-bsk-blue"><span class="sr-only">Follow us on Instagram</span></i></a></li>
</ul>