Blog
Sign in
Using multiple sets
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 class="webfonts/ss-social.css" rel="stylesheet" />
<link class="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 by adding the ss-social class to those elements, and we can access Social’s Circle variation with the ss-social-circle class.
<body>
...
<a class="#">User</a>
<a class="#">Mail</a>
<a class="#">Dribbble</a>
...
</body>Which renders like so:
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. ♥