Font Awesome Snippets

We don't provide our own Font Awesome code snippets for download. The Font Awesome Icons website already provides code snippets for each of the available icon designs. This webpage will teach you how to use Font Awesome Icons effectively in seyDesign themes, which have support for Font Awesome Icons.

Why use Font Awesome icons?

Traditionally if you wanted to put graphical icons in your webpages, you would need to use image files. Images have to be created and edited in software like Photoshop, which can make simple edits (like resizing and recoloring) quite tedious. Lots of images will slow down page loading. And on retina displays, small images can quickly start to look blurry and less professional. Font Awesome gives us a choice of over 600 simple icons that get handled as text (fonts) thereby solving all the problems commonly experienced with image files. It's easy to resize or recolor Font Awesome icons with simple CSS code, and icon remain pin-sharp on all screen resolutions.

There is one exception to the "images are bad for icons" rule! That is SVG. SVG files (or scalable vector graphics) are still image files but come closer towards all the benefits of Font Awesome icons and other font icon libraries. If you're wanting to develop custom vector graphics (like your own simple icons or logo images) then SVG is definitely the way to go.

How do I use Font Awesome icons in seyDesign themes?

The ThemeFlood Knowledgebase already has a brilliant article all about Font Awesome icons. This is well worth reading and bookmarking for future reference. Some websites like RWExtras also have some useful Font Awesome stacks available to buy, which remove some of the need to use code. And websites like Stacks4Stacks provide free stacks like RuleStack which are superb for combing icons with other elements (like horizontal rules).

In a nutshell, you should first go to the Font Awesome icons website. Click the icons link and browse the available icon designs. If you click on an icon, it opens in a new page and the HTML markup is shown to you. The markup will look something like this:

<i class="fa fa-star"></i>

This is the snippet code you can reuse in RapidWeaver. Simply copy and paste it into your page or into a stack. Icon code can go into any styled text, HTML or markdown region of the page.

Customizing the appearance of icons

By default, Font Awesome icons will be shown with a similar appearance (size and color) to your normal text. However you can use simple CSS code to change many style aspects. You can either use inline CSS or custom CSS.

Inline CSS
Add a style attribute to the opening Font Awesome tag and enter CSS properties and values like this:

<i class="fa fa-star" style="color:#FF0000; text-size:30px;"></i>

In this example, the icon color will change to red and the icon will be 30px in size. You can refer to a website like W3Schools for a definitive guide to all the possible CSS properties and values.

Custom CSS
Add a new class selector name to the opening Font Awesome tag, do it can be identified and targeted with CSS code:

<i class="fa fa-star headingIcon"></i>

Then in any of the custom CSS boxes in RapidWeaver, write your CSS code like this:

.headingIcon {
color: #555555;
text-align: center;
font-size: 36px;
}

Again you can refer to a website like W3Schools for a definitive guide to all the possible CSS properties and values to use.
All prices shown include any applicable VAT
RapidWeaver® is a registered trademark of Realmac Software
Webpage Updated: 16/02/2017