All web browsers are not created equal. Here’s how to get the most out of using Symbolset on the web.

When using Symbolset on the web, you have a few options. We generally recommend using CSS classes when icons are used with text, and keywords when icons are used in place of text. Choose the method (or combination of methods) that make the most sense for your project.

MethodIESiOSACFFO
Unicode 7+ 2+ 3.2+ 1+ 1+ 3.5+ 10.5+
CSS classes 8+ 2+ 3.2+ 1+ 1+ 3.5+ 10.5+
Keywords 10+ 5+ 4.2+ 3+ 11+ 3.5+ 15+
Keywords w/ JS 7+ 2+ 3.2+ 1+ 1+ 3.5+ 10.5+

Symbolset extensively tests and strives to have the widest browser support as possible, across as many devices and operating systems as possible. This table will be periodically updated as improvements and browser changes are made.

Method overview

Unicode

Each Symbolset icon is mapped to a unique Unicode value. Where possible, icons use semantic Unicode standards (for example, is used to represent a heart). This method has the widest browser support and should work in any browser that can load webfonts. When using this method, insert the Unicode value and apply the ss-icon class to the wrapping element:

<i class="ss-icon">&#x2665;</i> Favorites

CSS classes

Each icon has a unique CSS class name which will prepend the icon using the :before pseudo element. Choose this method if you wish to use a symbol alongside a complementary label. In this example, ss-check will prepend a checkmark to this ‘Submit’ button:

<button class="ss-check">Submit</button>

Keywords

Symbolset also allows you to use semantic plain text keywords to call symbols. Use this method when icons are used instead of text, making your icons accessible to screen readers and search engines. When using this method, apply the generic ss-icon class to the element wrapping the keyword. In this example, the word ‘Cart’ will show as a cart icon:

<i class="ss-icon">Cart</i> 3 items

Keywords work in modern browsers, and have the benefit of falling back to regular text in older browsers. For consistency, keywords can also be made backwards compatible with older browsers using the optional Javascript fallback for your set. For example, to use the Javascript fallback for SS Standard, add the following script:

<script src="webfonts/ss-standard.js"></script>

Unicode values, CSS classes, and available keywords for each icon can be viewed in your set’s documentation.html file (found in your download).

Additional notes