Photoshop CC 2015

In Tips on

Photoshop CC 2015

Symbolset on GitHub

In Tips on

If you plan on using Symbolset, or any licenced fonts, in your public project remember to add them to your .gitignore file to prevent others from freely downloading them.

This is what a .gitignore typically looks like at Symbolset.

.DS_Store
public/webfonts/*

Fancy circles with Sass

In Tips on

Image

Image

How to properly serve webfonts

In Tips on

Not all web servers know how to handle webfont formats (like WOFF) out of the box.

When using Symbolsets on the web, make sure your web server is sending the correct MIME types for the best possible experience across browsers.

Browser support

In Tips on

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

  • 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.
  • IE 7 (and IE 7 compatibility mode) supports keywords natively without Javascript (experimental), however Microsoft removed this functionality in IE 8 and 9.

Using multiple sets

In Tips on

Symbolsets are built to work together. Here’s how to pair our first two sets, SS Standard and SS Social, on the same page.

If you havent already read Symbolset on the web, go read it and come back.

Image

Using Symbolset with Photoshop

In Tips on

Get the free PSD or watch the demo on Vimeo.

Symbolset on the web

In Tips on

There are two common methods to use and reference symbols on the web.

The first is use a symbol alongside a complementary word. The second way is to use a symbol in place of a word.

It’s important to know when each is appropriate.

 
rss