Icons

Skill Level: 
Intermediate

The WDN 4.1 Framework comes with a handful of useful icon-fonts built it.

These icons can be added before nearly any HTML element by simply placing the icon class on the element. For accessibility reasons, it is best to place the icon in its own span which is hidden from screen readers, see the accessibility considerations for more details.

Code:
<span class="wdn-icon-rocket" aria-hidden="true"></span><span class="wdn-text-hidden">rocket icon</span>

Example:
rocket icon

You can select which icon you'd like to use by changing out the word that comes at the end of the class.

<span class="wdn-icon-icon-name"></span>

Icon Reference List

mail icon .wdn-icon-mail
<span class="wdn-icon-mail" aria-hidden="true"></span><span class="wdn-text-hidden">mail icon</span>
phone icon .wdn-icon-phone
<span class="wdn-icon-phone" aria-hidden="true"></span><span class="wdn-text-hidden">phone icon</span>
location icon .wdn-icon-location
<span class="wdn-icon-location" aria-hidden="true"></span><span class="wdn-text-hidden">location icon</span>
user icon .wdn-icon-user
<span class="wdn-icon-user" aria-hidden="true"></span><span class="wdn-text-hidden">user icon</span>
snapchat icon .wdn-icon-snapchat
<span class="wdn-icon-snapchat" aria-hidden="true"></span><span class="wdn-text-hidden">snapchat icon</span>
search icon .wdn-icon-search
<span class="wdn-icon-search" aria-hidden="true"></span><span class="wdn-text-hidden">search icon</span>
comment icon .wdn-icon-comment
<span class="wdn-icon-comment" aria-hidden="true"></span><span class="wdn-text-hidden">comment icon</span>
comment icon .wdn-icon-comment-alt
<span class="wdn-icon-comment-alt" aria-hidden="true"></span><span class="wdn-text-hidden">comment icon</span>
cancel icon .wdn-icon-cancel
<span class="wdn-icon-cancel" aria-hidden="true"></span><span class="wdn-text-hidden">cancel icon</span>
attention icon .wdn-icon-attention
<span class="wdn-icon-attention" aria-hidden="true"></span><span class="wdn-text-hidden">attention icon</span>
info icon .wdn-icon-info
<span class="wdn-icon-info" aria-hidden="true"></span><span class="wdn-text-hidden">info icon</span>
double right arrow icon .wdn-icon-angle-double-right
<span class="wdn-icon-angle-double-right" aria-hidden="true"></span><span class="wdn-text-hidden">double right arrow icon</span>
circled star icon .wdn-icon-star-circled
<span class="wdn-icon-star-circled" aria-hidden="true"></span><span class="wdn-text-hidden">circled star icon</span>
double left arrow icon .wdn-icon-angle-double-left
<span class="wdn-icon-angle-double-left" aria-hidden="true"></span><span class="wdn-text-hidden">double left arrow icon</span>
okay icon .wdn-icon-ok
<span class="wdn-icon-ok" aria-hidden="true"></span><span class="wdn-text-hidden">okay icon</span>
plus icon .wdn-icon-plus
<span class="wdn-icon-plus" aria-hidden="true"></span><span class="wdn-text-hidden">plus icon</span>
minus icon .wdn-icon-minus
<span class="wdn-icon-minus" aria-hidden="true"></span><span class="wdn-text-hidden">minus icon</span>
key icon .wdn-icon-key
<span class="wdn-icon-key" aria-hidden="true"></span><span class="wdn-text-hidden">key icon</span>
small icon .wdn-icon-up-small
<span class="wdn-icon-up-small" aria-hidden="true"></span><span class="wdn-text-hidden">small icon</span>
calendar icon .wdn-icon-calendar-empty
<span class="wdn-icon-calendar-empty" aria-hidden="true"></span><span class="wdn-text-hidden">calendar icon</span>
rss icon .wdn-icon-rss-squared
<span class="wdn-icon-rss-squared" aria-hidden="true"></span><span class="wdn-text-hidden">rss icon</span>
calendar icon .wdn-icon-calendar
<span class="wdn-icon-calendar" aria-hidden="true"></span><span class="wdn-text-hidden">calendar icon</span>
youtube icon .wdn-icon-youtube-play
<span class="wdn-icon-youtube-play" aria-hidden="true"></span><span class="wdn-text-hidden">youtube icon</span>
linkedin icon .wdn-icon-linkedin-squared
<span class="wdn-icon-linkedin-squared" aria-hidden="true"></span><span class="wdn-text-hidden">linkedin icon</span>
instagram icon .wdn-icon-instagram
<span class="wdn-icon-instagram" aria-hidden="true"></span><span class="wdn-text-hidden">instagram icon</span>
flickr icon .wdn-icon-flickr
<span class="wdn-icon-flickr" aria-hidden="true"></span><span class="wdn-text-hidden">flickr icon</span>
vimeo icon .wdn-icon-vimeo
<span class="wdn-icon-vimeo" aria-hidden="true"></span><span class="wdn-text-hidden">vimeo icon</span>
pinterest icon .wdn-icon-pinterest
<span class="wdn-icon-pinterest" aria-hidden="true"></span><span class="wdn-text-hidden">pinterest icon</span>
tumblr icon .wdn-icon-tumblr
<span class="wdn-icon-tumblr" aria-hidden="true"></span><span class="wdn-text-hidden">tumblr icon</span>
foursquare icon .wdn-icon-foursquare
<span class="wdn-icon-foursquare" aria-hidden="true"></span><span class="wdn-text-hidden">foursquare icon</span>
google plus icon .wdn-icon-gplus
<span class="wdn-icon-gplus" aria-hidden="true"></span><span class="wdn-text-hidden">google plus icon</span>
share icon .wdn-icon-share
<span class="wdn-icon-share" aria-hidden="true"></span><span class="wdn-text-hidden">share icon</span>
twitter icon .wdn-icon-twitter
<span class="wdn-icon-twitter" aria-hidden="true"></span><span class="wdn-text-hidden">twitter icon</span>
facebook icon .wdn-icon-facebook
<span class="wdn-icon-facebook" aria-hidden="true"></span><span class="wdn-text-hidden">facebook icon</span>
link icon .wdn-icon-link
<span class="wdn-icon-link" aria-hidden="true"></span><span class="wdn-text-hidden">link icon</span>
blogger icon .wdn-icon-blogger
<span class="wdn-icon-blogger" aria-hidden="true"></span><span class="wdn-text-hidden">blogger icon</span>
play circled icon .wdn-icon-play-circled
<span class="wdn-icon-play-circled" aria-hidden="true"></span><span class="wdn-text-hidden">play circled icon</span>
map icon .wdn-icon-map
<span class="wdn-icon-map" aria-hidden="true"></span><span class="wdn-text-hidden">map icon</span>
clock icon .wdn-icon-clock
<span class="wdn-icon-clock" aria-hidden="true"></span><span class="wdn-text-hidden">clock icon</span>
rocket icon .wdn-icon-rocket
<span class="wdn-icon-rocket" aria-hidden="true"></span><span class="wdn-text-hidden">rocket icon</span>
pause icon .wdn-icon-pause
<span class="wdn-icon-pause" aria-hidden="true"></span><span class="wdn-text-hidden">pause icon</span>
print icon .wdn-icon-print
<span class="wdn-icon-print" aria-hidden="true"></span><span class="wdn-text-hidden">print icon</span>
phone icon .wdn-icon-phone
<span class="wdn-icon-phone" aria-hidden="true"></span><span class="wdn-text-hidden">phone icon</span>
home icon .wdn-icon-home
<span class="wdn-icon-home" aria-hidden="true"></span><span class="wdn-text-hidden">home icon</span>
Facebook circled icon .wdn-icon-facebook-circled
<span class="wdn-icon-facebook-circled" aria-hidden="true"></span><span class="wdn-text-hidden">Facebook circled icon</span>
Twitter circled icon .wdn-icon-twitter-circled
<span class="wdn-icon-twitter-circled" aria-hidden="true"></span><span class="wdn-text-hidden">Twitter circled icon</span>
mini right arrow icon .wdn-icon-right-open-mini
<span class="wdn-icon-right-open-mini" aria-hidden="true"></span><span class="wdn-text-hidden">mini right arrow icon</span>
wrench icon .wdn-icon-wrench
<span class="wdn-icon-wrench" aria-hidden="true"></span><span class="wdn-text-hidden">wrench icon</span>

Using an icon as a link

It is often desirable to use an icon as a link. When you do this, be sure to give the .wdn-text-hidden text enough meaning so that a screen reader user is able to understand the purpose of the link.

<span class="wdn-icon-mail"></span>
<span class="wdn-text-hidden">send {name} an email</span>

Accessibility Considerations: 

Because these icons are included into the page as actual text characters, most screen readers will attempt to "read" them and fail in a less than predictable way. For this reason it is always a best practice to include an attribute of aria-hidden="true" on the icon to hide it from screen readers and a descriptive piece of substitute screen reader text that is visually hidden with the .wdn-text-hidden class.

Whenever possible try to use screen reader text in a way that creates a phrase that can be easily understood by humans. In the example below the Facebook icon and words "University of Nebraska–Lincoln" are visible on screen while the words "University of Nebraska–Lincoln on Facebook" are read by screen readers.

<span class="wdn-icon-facebook" aria-hidden="true"></span>University of Nebraska–Lincoln<span class="wdn-text-hidden"> on Facebook</span>

If descriptive text is already visible, it is not necessary to provide screen reader only text for the icon. For example, if you are using an icon-font in an <h2> where the heading text is already visible, you do not need to provide redundant screen-reader only text.

Contributed By: 
IIM