1. Design System
  2. Components
  3. Social media links

Social media links

We use Font Awesome icon fonts to display social media icons. These examples include links to the university's official social media accounts.

<ul class="sab-social-icons m-bottom-0 p-20">
    <li><a href="https://www.facebook.com/oxfordbrookes"  aria-label="Facebook"><span class="fab fa-facebook-f"></span></a></li>
    <li><a href="https://www.twitter.com/oxford_brookes"  aria-label="Twitter"><span class="fab fa-twitter"></span></a></li>
    <li><a href="https://www.linkedin.com/edu/school?id=12621&amp;oxfordbrookes"  aria-label="Linkedin"><span class="fab fa-linkedin-in "></span></a></li>
    <li><a href="https://www.youtube.com/oxfordbrookes"  aria-label="Youtube"><span class="fab fa-youtube"></span></a></li>
    <li><a href="https://www.flickr.com/photos/40003115@N05/"  aria-label="Flickr"><span class="fab fa-flickr"></span></a></li>
    <li><a href="https://www.pinterest.com/oxfordbrookes/oxford-brookes-university/"  aria-label="Pinterest"><span class="fab fa-pinterest-p"></span></a></li>
    <li><a href="https://www.instagram.com/oxfordbrookes/"  aria-label="Instagram"><span class="fab fa-instagram"></span></a></li>
    <li><a href="https://www.weibo.com/OxfordBrookesUni"  aria-label="Weibo"><span class="fab fa-weibo"></span></a></li>
</ul>
<ul class="footer-social-icons m-bottom-0 has-background-dark p-20">
    <li><a href="https://www.facebook.com/oxfordbrookes"  aria-label="Facebook"><span class="fab fa-facebook-f"></span></a></li>
    <li><a href="https://www.twitter.com/oxford_brookes"  aria-label="Twitter"><span class="fab fa-twitter"></span></a></li>
    <li><a href="https://www.linkedin.com/edu/school?id=12621&amp;oxfordbrookes"  aria-label="Linkedin"><span class="fab fa-linkedin-in "></span></a></li>
    <li><a href="https://www.youtube.com/oxfordbrookes"  aria-label="Youtube"><span class="fab fa-youtube"></span></a></li>
    <li><a href="https://www.flickr.com/photos/40003115@N05/"  aria-label="Flickr"><span class="fab fa-flickr"></span></a></li>
    <li><a href="https://www.pinterest.com/oxfordbrookes/oxford-brookes-university/"  aria-label="Pinterest"><span class="fab fa-pinterest-p"></span></a></li>
    <li><a href="https://www.instagram.com/oxfordbrookes/"  aria-label="Instagram"><span class="fab fa-instagram"></span></a></li>
    <li><a href="https://www.weibo.com/OxfordBrookesUni"  aria-label="Weibo"><span class="fab fa-weibo"></span></a></li>
</ul>

Usage

Read the Font Awesome documentation for more information

Accessibility

Use aria-label attributes for each icon (i.e., Facebook, Twitter, etc.).