Iconography

The SWE uses Font Awesome v4.7 icons for an easily implementable and consistent user experience.

Icons should not be used on their own as they may be interpreted differently by different users. Provide accompanying text that equally conveys the meaning represented by the icon.

View example in Storybook

Code

Icons use the span element and not the i element. This is more semantically correct and prevents the icons being flagged in accessibility checking tools. This change was initially introduced in SWE v4.0.11.

<h3 class="text-success"><span class="fa fa-check  mr-1" aria-hidden="true"></span> Success</h3>
<h3><span class="fa fa-phone mr-1" aria-hidden="true"></span> Contact us</h3>
<button type="button" class="qg-btn btn-secondary mt-2"><span class="fa fa-download mr-1" aria-hidden="true"></span> Download</button>