Social media links

<style>
#content aside ul ul.social-icons {
    padding: 0;
    margin: 0;
    list-style: none;
}
#content .social-icons .fa {
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#content .social-icons .fa:hover, .social-icons .fa:active { color: rgba(255, 255, 255, 0.8); }
#content .social-icons .fa-facebook { background-color: #3C599F; }
#content .social-icons .fa-twitter { background-color: #32CCFE; }
#content .social-icons .fa-linkedin { background-color:#0085AE; } 
#content .social-icons .fa-youtube { background-color:#C52F30; }
#content .social-icons .fa-flickr { background-color:#FF0084; }
#content .social-icons .fa-pinterest-square { background-color:#CC2127; } 
/* Instagram flat colour background */ 
/*#content .social-icons .fa-instagram { background-color:#A1755C; }*/
/* Instagram gradient background */ 
#content .social-icons .fa-instagram {
    background: #f9d26d;
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #f9d26d), color-stop(50%, #ee4c37), color-stop(91%, #6140c2), color-stop(100%, #423de1));
    background: -webkit-linear-gradient(45deg, #f9d26d 0%, #ee4c37 50%, #6140c2 91%, #423de1 100%);
    background: linear-gradient(45deg, #f9d26d 0%, #ee4c37 50%, #6140c2 91%, #423de1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d26d', endColorstr='#423de1', GradientType=1 );
}
#content .social-icons .fa-weibo { background-color:#bb3e3e; } 
#content .social-icons .fa-google-plus { background-color:#CF3D2E; }
</style>
<ul class="social-icons list-unstyled list-inline">
    <li><a href="http://www.facebook.com/oxfordbrookes"><span class="fa fa-facebook" aria-label="Facebook"></span></a></li>
    <li><a href="https://twitter.com/oxford_brookes"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
    <li><a href="http://www.linkedin.com/edu/school?id=12621&amp;oxfordbrookes"><span class="fa fa-linkedin" aria-label="Linkedin"></span></a></li>
    <li><a href="http://www.youtube.com/oxfordbrookes"><span class="fa fa-youtube" aria-label="Youtube"></span></a></li>
    <li><a href="http://www.flickr.com/photos/40003115@N05/"><span class="fa fa-flickr" aria-label="Flickr"></span></a></li>
    <li><a href="http://www.pinterest.com/oxfordbrookes/oxford-brookes-university/"><span class="fa fa-pinterest-square" aria-label="Pinterest"></span></a></li>
    <li><a href="https://instagram.com/oxfordbrookes/"><span class="fa fa-instagram" aria-label="Instagram"></span></a></li>
    <li><a href="http://www.weibo.com/OxfordBrookesUni"><span class="fa fa-weibo" aria-label="Weibo"></span></a></li>
</ul>

Important Add the CSS styles included or the items will not display correctly.

Visit the Font Awesome site for more social media icons.

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

Top of page

<div class="contact-us">
    <h2>Contact us</h2>
    <h3>Bryan Day</h3>
    <h4>Web Developer</h4>
    <p>tel: <a href="tel:+44-1865-484460">+44 (0)1865 484460</a><br />
    fax: +44 (0)1865 484460<br />
    <a href="mailto:bryan.day@brookes.ac.uk">bryan.day@brookes.ac.uk</a></p>
</div>
<ul class="social-icons list-unstyled list-inline">
    <li><a class="fg-pink" href="/add-your-social=media-link-here/"><span class="fa fa-facebook" aria-label="Facebook"></span></a></li>
    <li><a class="fg-pink" href="/add-your-social=media-link-here/"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
    <li><a class="fg-pink" href="/add-your-social=media-link-here/"><span class="fa fa-linkedin" aria-label="Linkedin"></span></a></li>
</ul>

Important Add the CSS styles included or the items will not display correctly.

Visit the Font Awesome site for more social media icons.

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

Top of page

<style>
#content aside .social-icons-wrapper ul.social-icons {
    padding: 0;
    margin: 0;
    list-style: none;
}
#content aside .social-icons-wrapper .social-icons .fa {
    background: transparent;
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#content aside .social-icons-wrapper .social-icons .fa-facebook { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa-twitter { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa-linkedin { background: transparent; } 
#content aside .social-icons-wrapper .social-icons .fa-youtube { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa-flickr { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa-pinterest-square { background: transparent; } 
#content aside .social-icons-wrapper .social-icons .fa-instagram { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa-weibo { background: transparent; } 
#content aside .social-icons-wrapper .social-icons .fa-google-plus { background: transparent; }
#content aside .social-icons-wrapper .social-icons .fa:hover, 
#content aside .social-icons-wrapper .social-icons .fa:focus, 
#content aside .social-icons-wrapper .social-icons .fa:active {
    color: rgba(255, 255, 255, 0.5);
}
</style>
<div class="social-icons-wrapper bg-pink fg-white padding10 text-center">
    <p>Follow us for the latest information on getting ready</p>
    <ul class="social-icons list-unstyled list-inline text-center bg-pink">
        <li><a class="fg-white" href="https://www.snapchat.com/add/oxfordbrookes/" target="_blank"><span class="fa fa-snapchat-ghost" aria-label="Snapchat"></span></a></li>
        <li><a class="fg-white" href="https://instagram.com/oxfordbrookes/" target="_blank"><span class="fa fa-instagram" aria-label="Instagram"></span></a>    </li>
        <li><a class="fg-white" href="http://www.twitter.com/oxford_brookes" target="_blank"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
        <li><a class="fg-white" href="http://www.facebook.com/oxfordbrookes" target="_blank"><span class="fa fa-facebook" aria-label="Facebook"></span></a></li>
    </ul>
</div>

Important Add the CSS styles included or the items will not display correctly.

Visit the Font Awesome site for more social media icons.

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

Top of page

<style>
#content aside .social-icons-wrapper ul.social-icons {
    padding: 0;
    margin: 0;
    list-style: none;
}
#content .social-icons-wrapper .social-icons .fa {
    background: transparent;
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#content .social-icons-wrapper .social-icons .fa-facebook { background: transparent; }
#content .social-icons-wrapper .social-icons .fa-twitter { background: transparent; }
#content .social-icons-wrapper .social-icons .fa-linkedin { background: transparent; } 
#content .social-icons-wrapper .social-icons .fa-youtube { background: transparent; }
#content .social-icons-wrapper .social-icons .fa-flickr { background: transparent; }
#content .social-icons-wrapper .social-icons .fa-pinterest-square { background: transparent; } 
#content .social-icons-wrapper .social-icons .fa-instagram { background: transparent; }
#content .social-icons-wrapper .social-icons .fa-weibo { background: transparent; } 
#content .social-icons-wrapper .social-icons .fa-google-plus { background: transparent; }
#content .social-icons-wrapper .social-icons .fa:hover, .social-icons-wrapper .social-icons .fa:focus, .social-icons #content .social-icons-wrapper .fa:active {
    color: rgba(255, 255, 255, 0.5);
}
</style>
<div class="social-icons-wrapper bg-pink fg-white padding10 text-center">
    <p>Follow us for the latest information on getting ready</p>
    <ul class="social-icons list-unstyled list-inline text-center bg-pink">
        <li><a class="fg-white" href="https://www.snapchat.com/add/oxfordbrookes/" target="_blank"><span class="fa fa-snapchat-ghost" aria-label="Snapchat"></span></a></li>
        <li><a class="fg-white" href="https://instagram.com/oxfordbrookes/" target="_blank"><span class="fa fa-instagram" aria-label="Instagram"></span></a>    </li>
        <li><a class="fg-white" href="http://www.twitter.com/oxford_brookes" target="_blank"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
    </ul>
</div>

Important Add the CSS styles included or the items will not display correctly.

Visit the Font Awesome site for more social media icons.

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

Top of page

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <h2 class="sr-only">Contact us</h2>
                <p>Oxford Brookes University<br>
                Headington Campus<br>
                Oxford<br>
                <a href="https://maps.google.com/maps?q=OX3+0BP">OX3 0BP</a> <br>
                UK<br>
                Tel: <a href="tel:+441865741111">+44 (0)1865 741111</a></p>
                <p><a href="https://www.brookes.ac.uk//about-brookes/contacts-maps-and-campuses/campus-addresses/">Campus addresses »</a></p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <h2 class="sr-only">Location map</h2>
                <p><a id="map-footer-click" href="https://www.brookes.ac.uk/about-brookes/contacts-maps-and-campuses/"><img src="https://www.brookes.ac.uk/FrontendResources/img/map-homepage.png" alt="Oxford Brookes University map"></a></p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <h2 class="sr-only">Social media</h2>
                <ul class="social-icons list-inline">
                <li><a href="http://www.facebook.com/oxfordbrookes" class="icon-facebook"><span class="fa fa-facebook" aria-label="Facebook"></span></a></li>
                <li><a href="https://twitter.com/oxford_brookes" class="icon-twitter"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
                <li><a href="http://www.linkedin.com/edu/school?id=12621&amp;oxfordbrookes" class="icon-linkedin"><span class="fa fa-linkedin" aria-label="Linkedin"></span></a></li>
                <li><a href="http://www.youtube.com/oxfordbrookes" class="icon-youtube"><span class="fa fa-youtube" aria-label="Youtube"></span></a></li>
                <li><a href="http://www.flickr.com/photos/40003115@N05/" class="icon-flickr"><span class="fa fa-flickr" aria-label="Flickr"></span></a></li>
                <li><a href="http://www.pinterest.com/oxfordbrookes/oxford-brookes-university/" class="icon-pinterest"><span class="fa fa-pinterest-p" aria-label="Pinterest"></span></a></li>
                <li><a href="https://instagram.com/oxfordbrookes/" class="icon-instagram"><span class="fa fa-instagram" aria-label="Instagram"></span></a></li>
                <li><a href="http://www.weibo.com/OxfordBrookesUni" class="icon-weibo"><span class="fa fa-weibo" aria-label="Weibo"></span></a></li>
                <li><a href="http://plus.google.com/+oxfordbrookes" class="icon-google-plus"><span class="fa fa-google-plus" aria-label="Google plus"></span></a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h2 class="sr-only">Footer Navigation</h2>
                <ul class="list-inline text-left">
                    <li>© 2017 Oxford Brookes University &nbsp; -</li>
                    <li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/">Policies</a> </li>
                    <li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/privacy-policy/">Privacy</a> </li>
                    <li><a href="https://www.brookes.ac.uk/About-Brookes/Structure-and-governance/Policies-and-financial-statements/Cookie-policy/">Cookies</a> </li>
                    <li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/modern-slavery-and-human-trafficking/">Modern slavery statement</a> </li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Important Add the CSS styles included or the items will not display correctly.

Visit the Font Awesome site for more social media icons.

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

Top of page

Basic example

Links in sidebar

Links in sidebar with background colour

Links in content

Links in the default footer

Changelog