SHC Icon Font

Please note: This documentation is for the new version of the icon font, currently in QA. Click here for the current production documentation.

About

SHC icons are created using the SHC Icon Font. This font was created with Fontastic.

With the release of Icon Font v1.5.0, the font makes the jump to a class-based system. (In older versions, icons are generated by placing the character associated with a specific icon inside a set of span tags. See the Deprecated section at the bottom of the page for what not to do.) Read on for more about what's new.

ADA Compliance

For information pertaining to Icon Font accessibility, refer to the Font Awesome Accessibility page. It covers topics such as:

  • Adding the aria-hidden="true" attribute for icons that are purely decorative
  • Conveying meaning to assistive technologies when icons have an interactive or semantic purpose

Please be sure that all icon usage adheres to the recommendations in the page linked to above. For more examples, visit the the Font Awesome Examples page.

Downloads

Download a copy of the icon font files. Includes .eot, .ttf, .woff, and .woff2.

Implementation

The HTML implementation looks like this:

<span class="shc-icon shc-icon-search"></span>

If you've worked with Font Awesome icons, this implementation is already familiar. Include the shc-icon class, along with a second class that is a combination of the prefix shc-icon plus the icon's name. E.g., shc-icon-search.

Though a set of <span></span> tags is the most semantically correct, using <i></i> tags is also acceptable:

<i class="shc-icon shc-icon-search"></i>

This is all you need to do to use the Icon Font in a stack that loads Enterprise.

Developing Locally

If you are developing locally, there are a few steps you will need to take to use the font in your local environment.

  1. Download the font files. (See Download link above.) All of the files in the zip folder are necessary to ensure that the font works across all browsers.
  2. Store them somewhere on your machine, such as in the same parent directory as your local copy of the Enterprise css file(s).
  3. If you choose to put the font files somewhere else, edit the paths in the font definition in accordance with their location.

How to define the font if you are working locally:

@font-face {
  font-family: "SHC Icons";
  src: url("../fonts/shc-icons.1.5.0.eot");
  src: url("../fonts/shc-icons.1.5.0.eot?#iefix") format("embedded-opentype"), 
       url("../fonts/shc-icons.1.5.0.woff2") format("woff2"), 
       url("../fonts/shc-icons.1.5.0.woff") format("woff"), 
       url("../fonts/shc-icons.1.5.0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

Character Map

add

alert

barcode-scanner

cart

checkbox

checkbox-selected

checkmark

close

close-small

credit-card

credit-card-sears

deals-and-coupons

delivery

edit

font-version

gift-card

gift-center

grid-view

help

home

home-services, repair-services

in-vehicle-pickup

knowledge-center

layaway

less

less-small

list-view

local-ad

location, store-locator

logo-kmart

logo-kmart-secondary

logo-paypal

logo-sears

logo-shopyourway

member-guest

member-join

member-signed-in

menu

menu-more

more

more-small

next

next-small

notification-center

order-center

pharmacy

play (deprecated)

prev

prev

prev-small

radio

radio-selected

remove

schedule

search

secured

settings

shop-departments

starempty

starfilled

starhalf

success, verified

Deprecated

This style of implementation is deprecated. Avoid using it.

<span class="font-SHC-Icons">d</span>

(This code would yield a search icon.)