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