Documentation

Search value is required

All font icons

full screen new window example

Standard Life websites utilise Font awesome icons from version 4.7.

Usage

Icon fonts are powered by CSS and a font file, these icons are fully customisable, allowing the flexibility of changing the size and colour.

Accessible attributes

Accessible attribute Description
aria-hidden="true" When an icon is used for only decorative purposes add this attribute to the icon's tag.

fa fa-home

<span class="fa fa-home"> </span>
Copy

fa fa-sign-in

<span class="fa fa-sign-in"> </span>
Copy

fa fa-sign-out

<span class="fa fa-sign-out"> </span>
Copy

fa fa-search

<span class="fa fa-search"> </span>
Copy

fa fa-user

<span class="fa fa-user"> </span>
Copy

fa fa-external-link

<span class="fa fa-external-link"> </span>
Copy

fa fa-file-pdf-o

<span class="fa fa-file-pdf-o"> </span>
Copy

fa fa-download

<span class="fa fa-download"> </span>
Copy

fa fa-pencil

<span class="fa fa-pencil"> </span>
Copy

fa fa-trash

<span class="fa fa-trash"> </span>
Copy

fa fa-plus-circle

<span class="fa fa-plus-circle"> </span>
Copy

fa fa-chevron-circle-down

<span class="fa fa-chevron-circle-down"> </span>
Copy

fa fa-chevron-circle-up

<span class="fa fa-chevron-circle-up"> </span>
Copy

fa fa-plus

<span class="fa fa-plus"> </span>
Copy

fa fa-minus

<span class="fa fa-minus"> </span>
Copy

fa fa-facebook

<span class="fa fa-facebook"> </span>
Copy

fa fa-google-plus

<span class="fa fa-google-plus"> </span>
Copy

fa fa-linkedin

<span class="fa fa-linkedin"> </span>
Copy

fa fa-twitter

<span class="fa fa-twitter"> </span>
Copy

fa fa-youtube-play

<span class="fa fa-youtube-play"> </span>
Copy

fa fa-mail-reply

<span class="fa fa-mail-reply"> </span>
Copy

fa fa-heart

<span class="fa fa-heart"> </span>
Copy

fa fa-retweet

<span class="fa fa-retweet"> </span>
Copy

fa fa-phone

<span class="fa fa-phone"> </span>
Copy

fa fa-flag

<span class="fa fa-flag"> </span>
Copy

fa fa-exclamation-triangle

<span class="fa fa-exclamation-triangle"> </span>
Copy

fa fa-wrench

<span class="fa fa-wrench"> </span>
Copy

fa fa-info-circle

<span class="fa fa-info-circle"> </span>
Copy

fa fa-check

<span class="fa fa-check"> </span>
Copy

fa fa-times

<span class="fa fa-times"> </span>
Copy

fa fa-trophy

<span class="fa fa-trophy"> </span>
Copy

fa fa-info

<span class="fa fa-info"> </span>
Copy

fa fa-spinner

<span class="fa fa-spinner"> </span>
Copy

fa fa-star

<span class="fa fa-star"> </span>
Copy

fa fa-star-half-full

<span class="fa fa-star-half-full"> </span>
Copy

fa fa-star-o

<span class="fa fa-star-o"> </span>
Copy

fa fa-users

<span class="fa fa-users"> </span>
Copy

fa fa-user-plus

<span class="fa fa-user-plus"> </span>
Copy

fa fa-calendar

<span class="fa fa-calendar"> </span>
Copy

fa fa-caret-up

<span class="fa fa-caret-up"> </span>
Copy

fa fa-caret-down

<span class="fa fa-caret-down"> </span>
Copy

fa fa-hand-o-right

<span class="fa fa-hand-o-right"> </span>
Copy

fa fa-print

<span class="fa fa-print"> </span>
Copy

fa fa-bolt

<span class="fa fa-bolt"> </span>
Copy

fa fa-money

<span class="fa fa-money"> </span>
Copy

fa fa-envelope

<span class="fa fa-envelope"> </span>
Copy

fa fa-lightbulb-o

<span class="fa fa-lightbulb-o"> </span>
Copy

fa fa-area-chart

<span class="fa fa-area-chart"> </span>
Copy

fa fa-comments

<span class="fa fa-comments"> </span>
Copy

fa fa-databse

<span class="fa fa-databse"> </span>
Copy

fa fa-calculator

<span class="fa fa-calculator"> </span>
Copy

fa fa-credit-card

<span class="fa fa-credit-card"> </span>
Copy

fa fa-compress

<span class="fa fa-compress"> </span>
Copy

fa fa-calendar-plus-o

<span class="fa fa-calendar-plus-o"> </span>
Copy

fa fa-child

<span class="fa fa-child"> </span>
Copy

fa fa-gbp

<span class="fa fa-gbp"> </span>
Copy

fa fa-table

<span class="fa fa-table"> </span>
Copy

fa fa-university

<span class="fa fa-university"> </span>
Copy

fa fa-pie-chart

<span class="fa fa-pie-chart"> </span>
Copy

fa fa-newspaper-o

<span class="fa fa-newspaper-o"> </span>
Copy

fa fa-signpost

<span class="fa fa-signpost"> </span>
Copy

fa fa-graduation-cap

<span class="fa fa-graduation-cap"> </span>
Copy

fa fa-ticket

<span class="fa fa-ticket"> </span>
Copy

fa fa-question-circle

<span class="fa fa-question-circle"> </span>
Copy

fa fa-file-text-o

<span class="fa fa-file-text-o"> </span>
Copy

fa fa-refresh

<span class="fa fa-refresh"> </span>
Copy

fa fa-lock

<span class="fa fa-lock"> </span>
Copy

fa fa-map-marker

<span class="fa fa-map-marker"> </span>
Copy

fa fa-check-square-o

<span class="fa fa-check-square-o"> </span>
Copy

fa fa-user-circle-o

<span class="fa fa-user-circle-o"> </span>
Copy

fa fa-exchange

<span class="fa fa-exchange"> </span>
Copy

fa fa-comment

<span class="fa fa-comment"> </span>
Copy

fa fa-list

<span class="fa fa-list"> </span>
Copy

fa fa-shield

<span class="fa fa-shield"> </span>
Copy