Website pattern library


Service icons

Service icons on the homepageExternal link icon provide an immediate entry point into the most commonly used or promoted services.

The service titles, Font awesome icons, and links can be defined in the website content management system (Drupal).

Code tips

Adding the circle behind the icon

Use a CSS background colour and border radius to create the circle behind the icon. The following example creates a 50px black circle.

i {
	background: #000000;
	border-radius: 25px;
	width: 50px;
	height: 50px;

Useful informationRead more about sourcing new icons in the icon cheat sheet