Styles

Icons

The Seattle Times Icons are a webfont that allow you to include optimizied iconography in your project.

Usage

To use the Seattle Times icons in your project, there are three steps:

• import the Sass partial into your stylesheet - node_modules/st-ui/scss/components/icons
• copy the font files from node_modules/st-ui/icons/dist to a servable directory in your project.
• create a Sass variable $font-icon-path that points to the location of the copied icons files

On your pages or components, you can add the follow markup to display an icon:

Accessibility

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.

Decorative Icons

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.

Non-interactive Icons

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.

Interactive Icons

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.

Icons