Icons can provide extra contextual information to help guide users through your website.

There are two sets of icons you can use on UQ websites:

These icons are font icons – they'll display in the same size and colour of the content they're attached to. Font icons respond on mobile devices the same way as text.

Adding icons

You can add icons to your website by adding HTML tags to the 'Source' tab of the WYSIWYG editor. Icons need at least two classes:

  • icon – identifies the element as an icon.
  • icon-iconname – identifies which icon to use. Replace 'iconname' with the actual name of the icon you want to use. You can find icon names in the icon sets mentioned above.

If you're using a Font Awesome icon, you'll also need to change the icon class from 'fa' to 'icon' (e.g. change fa-adjust to icon-adjust).

To add an icon within your text, use <span> tags:

Code

Display

<span class="icon icon-search"></span>

To add an icon in a link, use <a> tags:

Code

Display

<a class="icon icon-search" href=""> Search</a>  Search

Icons can also be used with a range of other HTML elements and combined with styles such as buttons.

Positioning icons

You can position icons before or after text within an element by adding these modifier classes to your code:

  • icon--prefix
  • icon--suffix

Code

Display

<a class="button" href=""><span class="icon icon-search icon--prefix"></span>Search</a> Search
<a class="button" href=""><span class="icon icon-paper-plane icon--suffix">Order now</span></a> Order now

Increasing icon size

You can make an icon bigger by adding these modifier classes to your code:

  • icon-2x
  • icon-3x
  • icon-4x
  • icon-5x

Code

Display

<span class="icon icon-search icon-2x"></span>
<span class="icon icon-search icon-3x"></span>
<span class="icon icon-search icon-4x"></span>
<span class="icon icon-search icon-5x"></span>

Best practice

When adding icons to your website, there's a few things to keep in mind:

  • Keep icons the same size as the text they're associated with.
  • Never use icons without associated text. Although icons are helpful, some users and devices may not recognise what an icon means. Always ensure important information is also available to users in writing.
  • Like images, icons should only be used if they provide context and not just for visual appeal.