Icon font colour
Change the colour of a Icon font with class names.
Usage
By default Icon fonts inherit the colour of its parent element, for example, when placed in a list item with a text colour of white and hover colour of blue, the Icon font will do the same for both states.
To change the icon colour to any brand colour use the colour utility modifiers, doing so will remove the inherited colour from the hover state.
To see a full list of the modifiers, go to the colour utility page.
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. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-colour-blue |
The default blue brand colour. |
slb-colour-blue-alt |
The alternative blue brand colour. |
slb-colour-yellow |
The default yellow brand colour. |
slb-colour-yellow-alt |
The alternative yellow brand colour. |
.slb-colour-blue - Default blue.
fa fa-mobile-phone slb-colour-blue
.slb-colour-blue-alt - Alternative blue.
fa fa-mobile-phone slb-colour-blue-alt
.slb-colour-yellow - Default yellow.
fa fa-mobile-phone slb-colour-yellow
.slb-colour-yellow-alt - Alternative yellow.
fa fa-mobile-phone slb-colour-yellow-alt