Choose icons from Font Awesome. Iconography should provide a simple, visual indicator of key actions or tasks. Use icons to create stronger contextual emphasis on a page.
Icons will be read aloud to screen readers by default. If the icon is purely decorative in nature, add aria-hidden="true"
to the <i>
tag to prevent it from being announced by screen readers.
Additionally, if the icon has meaning in the current context, use the aria-label
attribute with a value that identifies the way the icon is being used or the location the link take the user.
<a class="site-search" aria-label="Search">
<i class="fas fa-search fa-5x" aria-hidden="true"></i>
</a>
Version 1.0 of the Digital Standards no longer includes FontAwesome bundled in. Contact websupport@phila.gov with your use case and we will help you implement FontAwesome.