Including the Iconography extension

The NICE UI library has a set of brand and service related symbols as well as additional glyphs that have been designed to compliment information.

To include the iconography extension you need to include the following link in your HTML5 document <head>.

<!-- Iconography -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.iconography.css">

Combined

You will also get the iconography extension within the basic combined bundle.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.css">

Utilising glyphs

Include glyphs as icons into your web pages by using the .glyph-* classes.

<span aria-hidden="true" class="glyph-twitter"></span>
<span aria-hidden="true" class="glyph-print"></span>
<span aria-hidden="true" class="glyph-syndication"></span>

Be aware: If you add a .glyph-* class on an element that is not specifically for displaying icon glyphs then you will find that in browsers below IE8 that the content of the element is replaced by just the glyph.

Please include icon glyphs as a separate html element inline with your content.