Circumference uses font icons from icomoon.io which means you can have different sizes just like a font. You can use icons almost anywhere, especially with the html snippets that Circumference has like “icon boxes”. You get a preset selection of icons available to you, but you can always add more to your theme by using the icomoon.io/app and the included selection.json file in the icon folder to add to the existing selection.
The icons are added to the style.css at the beginning and looks like a massive long string of characters…this means that the font itself is embedded directly into the theme from the stylesheet.
View Icons
In the downloaded theme package, go to this location: circumference-package >> icons >> icomoon
Open the demo.html file that is there to view the available icons. You will also see their names which also become their classes. So for example, if you see the icon-twitter, that name is also the class. Add an icon to a page like this:
<i class="icon-twitter"></i>
How to Add an Icon
Adding an icon requires you to do one of two things:
- Add an icons using the stylesheet
- Adding an icon directly into your content
When you know which icon you want to use, you will simply use this html code to add it into your page html like this:
<i class="icon-twitter"></i>
In some cases like adding an icon into a theme file like a page template, you can use a span like this:
<span class="icon-twitter"></span>
Screencast Tutorial