• Create great vector icons within the Atmosphere theme using Font Awesome

Time to read: 4 minutes

Clean, crisp vector icons seem to abound on the web nowadays. Everywhere you go you'll find simple silhouetted imagery denoting specific areas of a site or being used in numerous other ways. This increased use of iconography on the web is thanks to the increase of font based icon sets. One of the most popular around is called Font Awesome, and we've embedded a version of it in the Atmosphere theme for you to use.

The Font Awesome icon font is like any other font that is embedded into a website, with the exception that instead of letters and numbers you’ve got stylish, vector icons instead. And with a bit of CSS, which is included in the theme, you can insert these little icons where you like — for the most part.

The basics

The format for using these icons is as follows. First you’ll need figure out where you want your icon to appear. That’s where we’ll be inserting the following bit of code:

<i class="icon-search"></i>

This code indicates to the theme that you wish to insert an icon in that location. It then looks at the class name, within the double quotes, to figure out which icon you wish to use. But how do you know which icon you wish to use?

Choosing your icon

To find an icon that fits your needs I’ve added a chart to the Atmosphere theme’s product page. If you visit the product page you’ll find a tab, just below the theme’s introduction, labeled “Icons.” Click that tab and you’ll be presented with all of the icons that are available in the Atmosphere theme for you to use.

So say you look over the chart and find an icon that fits your needs… You’ll simply take that icon’s name, which is listed next to it on that chart, and insert it in the class name of the code snippet. So for instance, say you wish to use the checkmark icon from the list — this would be your code snippet:

<i class="icon-check"></i>

Supersizing

The are a few other things you can do with the icons as well. Say we wish to make the icon a bit bigger than the default. That’s easy! We just use a simple multiplier in the class name as well. So we’ll use our checkmark example and make it 3 times as big as it was:

<i class="icon-check icon-3x"></i>

The “icon-3x” in the class name above multiplies the size of the icon by 3. These multipliers help you to quickly and easily increase your icon’s size. The available multipliers are:

  • icon-2x
  • icon-3x
  • icon-4x
  • icon-5x

Bulleted icon list

You can even make lists whose bullets are comprised of icons instead of the traditional bullets. You can use a snippet of code like this to create such a list:

<ul class="icons-ul">
  <li><i class="icon-li icon-search"></i>This is my</li>
  <li><i class="icon-li icon-search"></i>list of items</li>
  <li><i class="icon-li icon-search"></i>using icons in</li>
  <li><i class="icon-li icon-search"></i>place of bullets</li>
</ul>

This would make a list on your page where each item’s bullet would be a magnifying glass. This is the sort of result you’d see:

List Example

Do note that if you’re using snippets of code like the list above on a page like a styled text page in RapidWeaver you’ll want to make sure that you highlight the entire code block and then, while it is highlighted, choose “Ignore Formatting” from the Format menu in RapidWeaver. This simply tells RapidWeaver you’re using a bit of code here and that you don’t need it adding any more formatting to it.

While code might scare some, the code used for these little vector icons really is quite simple. Have fun inserting beautiful icons right into your content.

For more on the Atmosphere theme, be sure to check out the product page and the live preview site.