How to add icons (T4 legacy templates only)

These guides are specific to content in T4's legacy templates. If your content uses T4's responsive templates, please see our user guides for web publishers in SharePoint.

Last updated: 24/10/2014

Before you start

Like buttons, icons should be used sparingly. See the guidance on how to add buttons

Button icons

The following icons can be added to buttons:

  • apply
  • arrow-right
  • download
  • information
  • search

How to add an icon to a button

To add the icon, add the appropriate class to the link:

How to apply How to get here Download a prospectus Before you arrive Search for a course 

<a href="" class="btn btn-b-purple icon-apply">How to apply</a>
<a href="" class="btn btn-b-lime icon-arrow-right">How to get here</a>
<a href="" class="btn btn-b-pink icon-download">Download a prospectus</a>
<a href="" class="btn btn-b-yellow icon-info">Before you arrive</a>
<a href="" class="btn btn-b-blue icon-search">Search for a course</a>

See the full range of button colours.

UoB access only

The UoB access only icon should appear automatically when ‘https’ is is included in the link, eg

Council papers 

<a href="https://www.bris.ac.uk/" class="btn btn-b-blue">Council papers</a>

Social media icons

Social media icons are displayed in the left navigation. On corporate sites they are yellow, on departmental sites they will pick up the local colour scheme. Please contact us if you would like to add a social media icon to your left navigation.

There are separate modules with social media icons.

Icons in modules

See How to add modules for details about applying icons within a module.