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.

Using CSS classes

In many cases your symbol can be used to enhance a word rather than replace it. Using class names, with CSS :before pseudo elements and Unicode code points, we can append symbols to words.

<div>
  <button class="ss-reply">Reply</button>
  <button class="ss-dropdown"></button>
  <ul>
    <li><a href="#">Reply all</a></li>
    <li><a href="#">Forward</a></li>
  </ul>
</div>

Here our ss-* classes set the icon in the elements :before attribute, using its unicode value as the content.

Using keywords

Use keywords when your icon can semantically replace the word. When using the replacement technique sighted users will see symbols, and search engines and screen readers will see the semantic keyword. To use this method apply the generic ss-icon class to the wrapping element like so:

<div class="ss-icon">
  <a href="#">back</a>
  <a href="#">forward</a>
  <a href="#">refresh</a>
</div>

In the example above the ss-icon class is setting the elements font-family to SS Standard.