The Seattle Times Icons are a webfont that allow you to include optimizied iconography in your project.
To use the Seattle Times icons in your project, there are three steps:
- import the Sass partial into your stylesheet -
- copy the font files from
node_modules/st-ui/icons/distto a servable directory in your project.
- create a Sass variable
$font-icon-paththat points to the location of the copied icons files
On your pages or components, you can add the follow markup to display an icon:
Icons are symbols that may convey visual information. It is important to consider how an icon should be used in certain contexts, so that it makes sense for as many users as possible.
In cases when an icon is non-interactive and purely decorative, the
aria-hidden attribute effectively removes the element from a screen readers aural rendering.
When an icon non-interactive itself but provides context for another interaction, use the
aria-hidden attribute and then include an element that is visually hidden but provides context for screen readers.
When an icon is part of an interative element, use the
aria-label on the interactive element to inform screen readers what it does and is used for.