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.

Start by referencing the CSS files in the head of your document. Make sure the font you want to use as default goes last (in our case, Standard).

<head>
  ...
  <link href="webfonts/ss-social-regular.css" rel="stylesheet" />
  <link href="webfonts/ss-social-circle.css" rel="stylesheet" />
  <link href="webfonts/ss-standard.css" rel="stylesheet" />
  ...
</head>

If you’ve been using Standard on your site already, and are adding Social, we recommend ordering it this way as nothing should have to change in your previous markup.

Now in our markup we can access Social Regular by adding the ss-social-regular class to those elements, and we can access Social Circle with the ss-social-circle class.

Because we referenced Standard last in our head, it’s kicking in with just the ss-icon class. If you ordered them the other way around, or just want to be extra safe, you’d add the ss-standard class to that element.

Lastly, if you are including the optional Javascript for legacy browsers, don’t forget to add it for both sets.

Happy Symbolsetting.