EXTERNAL - Documentation

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-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