• Share this article:

Font Awesome Icons

Font Awesome Icons are already built-in and supported in all ThemeFlood RapidWeaver themes. The purchase of additional RapidWeaver addons (to add support for Font Awesome Icons) is not necessary in our themes.

Please view the Font Awesome website to see a catalogue of available icon designs. You can use Font Awesome icons in headings, sidebars, content regions, social bars, columns, stacks, FreeStyle and ExtraContent regions, within themes. There are significant benefits for using Font Awesome Icons, over conventional image PNG or GIF icons:

  1. The Font Awesome Icon library is fully cacheable, meaning that most web browsers only load it once and store it within their memory. That is more efficient than loading multiple images or sprites time and time again
  2. Icons behave like text, so you can apply sizing, colours, padding, margins, borders and various other embellishments using CSS code
  3. Font Awesome Icons are all retina-display compatible, ensuring that icons remain pin-sharp on retina devices and don't become a blurry, pixelated mess
  4. Easily add icons next to navigation links, buttons, tabs, labels and table headers etc.
  5. Apply basic animations to icons, rotate icons or layer multiple icons together

Like the Bootstrap Toolkit, Font Awesome is already built-into all ThemeFlood themes and available for you to use straight away, should you choose to use it. There is nothing additional that you have to download, install or modify in the theme. Everything you need is already in place and ready for you to use right now! Just make sure you have CSS consolidation enabled.

Font Awesome Icon markup

In essence, Font Awesome icons are created by typing standard italicised HTML tags into a page like this:

<i class=''></i>

Into the class= attribute, you then type the name of the icon (e.g. fa fa-star). So your code snippet would look something like this:

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

At that point, Font Awesome will embed the icon image for you in the page, like the one pictured below.

Font Awesome star

Font Awesome icons can be styled using custom CSS code. Inline CSS code like this is supported:

<i class='fa fa-star' style='font-size:100px; color:#ff0000;'></i>

In this example, the icon will be 100px tall and coloured red.

Likewise, you can also use conventional CSS code to target one or more Font Awesome icons in specific parts of the page, like the main content container:

#content [class^="fa fa-"] {
    font-size: 100px;
    color: #FF0000;
}

In this example, the icon will be 100px tall and coloured red.

Adding Font Awesome Icons to page navigation links

Something else you can do is to display Font Awesome icons before or after page navigation links in your website. This is supported in most ThemeFlood RapidWeaver themes. To achieve this, simply type the code for the icon in the Page Title box, in the RapidWeaver Page Inspector (alongside the existing title). The icon will then get rendered before or after the page title, and some themes will automatically hide the icons from locations like the breadcrumbs or footer navigation bar.

Icons before page links are useful to give a quick visualisation about what the page is about; for example a home page could have a house icon, and a user can quickly see that clicking that link would take them to the homepage. Icons placed after page links are useful to perform tasks like emphasising that subpage links are available for selection. The screenshot below from the Haze RapidWeaver theme shows some icon-down arrows after some parent page links, used to denote that a drop-down menu of options is available for selection.

Font Awesome Icons in Haze

So as well as being a cosmetic feature, these navigation icons can also help people navigate a website. Unlike some other RapidWeaver themes which force these icons into the page all the time, these icons are not compulsory. You can have complete freedom to choose not to display any icons or choose to use different icon designs. Alternatively instead of Font Awesome icons, you could also make use of HTML entities like arrows, brackets or simple math characters before or after page navigation links. Experiment and see what works best for your particular website.

You may find that you need to add a bit of padding to the left or right of the icon, to introduce some space between the icon and page title like this:

<i class='fa fa-home' style='padding-left:10px;'></i>Homepage

Normal CSS code to change icon colours within the navigation can continue to be used if you prefer. To prevent the code for icons showing in browser window titles, simply ensure every page in your project has a unique Browser Title provided in the RapidWeaver Page Inspector.

Font Awesome Icons in the RapidWeaver Page Inspector

Note the use of single quotes in the Font Awesome code, instead of double quotes. This is done on purpose to aid RapidWeaver when it generates your site map, and stops the site map becoming contaminated with class or style attributes.

Important: In ThemeFlood themes, Font Awesome Icons are configured to only work if you have CSS consolidation turned on in RapidWeaver. If you see squares instead of icons, this is a sure-sign that you've not turned on consolidation, and therefore the links to the icons are broken. If you don't know what CSS consolidation is or whether it is turned on, please read the 10 minute quick start article. Should you have questions about Font Awesome Icons, please contact me first (instead of the original developers).

Font Awesome Icons are ignored in IE7 and will not be displayed; this is because IE7 has weak CSS support and does not understand the code being used to display the icons. IE7 is no longer actively developed or supported by Microsoft.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.