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.
|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.
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">♥</i> Favorites
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:
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
Unicode values, CSS classes, and available keywords for each icon can be viewed in your set’s documentation.html file (found in your download).
- Firefox 3.6 on Mac OS X Lion 10.7.0 and 10.7.1 does not support webfonts due to bugs in the browser. Webfonts were re-enabled for Lion 10.7.2.
- Firefox 22 and bellow do not support keywords with spaces.