SHC Icon Font 1.4.0

About

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

For information pertaining to Icon Font accessibility, please refer to the Fontastic Accessibility page.

Note that in the current method of implementation, icons are generated by placing the character associated with a specific icon inside a set of span tags. (See below for further details.) In the future, the SHC Icon Font might be switched to a class-based system, but that is yet to be determined.

Downloads

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

Icon Font Implementation

The HTML implementation looks like this:

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

The character mapping is done within the font file itself—hidden from us—to make it so "d" becomes a magnifying glass. (See Character Mapping table below.)

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

Working 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. Put them somewhere logical 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, you will need to edit the paths in the font definition accordingly, or the font won't work in your environemnt.

How to define the font if you are working locally:

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

Character Mapping

The thin arrows (characters l, m, n, o) have been deprecated. Do not use them, they may be removed or replaced in a future version of the font.