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
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.