Icons

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:

• UQ icon set
• Font Awesome 4.7.0 icon set.

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:

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

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

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

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.