How to use Icons

February 25, 2014| Sushil Adhikari

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:

  1. Add an icons using the stylesheet
  2. 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>

Attention:

The WordPress editor has this nasty way of deleting empty tags such as the ones shown above. It appears the <i> option is better than the <span> when adding icons to your page or post content because it won’t strip this tag out. When adding icons to a theme file, then using a <span> is acceptable.

 

Screencast Tutorial


Categories: Setup Tutorials for Circumference

Leave a Reply