Website design guidelines

Icons and buttons

Buttons and icons combined

Button icon and text combination

Font awesome icons may be selected to work along side button text.

  • Button text is always aligned left
  • The icon is always aligned right
  • The icon may be replaced to match button functionality

Examples

Right chevron = navigate forwards

Left chevron = navigate backwards

Magnify = submit search

Button minimum heights

  • Where space is available buttons should have a minimum height of 50px
  • Where space is limited a button height of 40px may be used

50px height example:

40px height example:

Flexible height

  • Where text runs on multiple lines the button height must be flexible
  • The contained text and icon must be centred vertically
  • Where buttons are positioned adjacent to each other, ensure button heights are equal

Flexible button height example: