• Share a link to 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. Should you require an extra stack that can accomplish more fanciful effects with Font Awesome icons, the Font Awesome stack from RWExtras is a good choice.

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 in your website settings.

Font Awesome Icon (5.x) markup

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

<i></i>

Add a class attribute within the opening tag:

<i class=''></i>

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

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

At that point, Font Awesome will embed the icon 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='fas 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 i {
    font-size: 100px;
    color: #FF0000;
}

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

Font Awesome Icon (4.x) 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.

Differences between Font Awesome 4 and Font Awesome 5

Font Awesome 5 was released in early 2018. The basic icon library remains free to use in personal and commercial websites. All new and updated themes we release in 2018 (and going forwards) will be including Font Awesome 5.

The icon markup in version 5 has changed slightly (e.g. 'fa' is now 'fas' or 'far'), so you should pay particular attention towards the markup you use for icons. As always, refer to the official Font Awesome website for the complete reference of Font Awesome icons.

If you are unsure what version of Font Awesome your theme / version uses, simply look at the specification table, in the sidebar of the theme product page. Cheatsheets for older versions of Font Awesome (like 4.7) still exist online, if you do a web search.

'Pro' versions of Font Awesome are now available; which include more icons in different weights. These 'pro' packs are not bundled in our themes, but you are welcome to buy a copy separately from the Font Awesome website, to add to your website.

Why are no icons showing after I update my theme?

The most plausible explanation for this occurrence is simply that the markup for your icons may have changed. This is especially true if the theme update you installed moved you from Font Awesome 4 to Font Awesome 5. In Font Awesome 5, many of the markup snippets for icons got changed to 'far' or 'fas'.

A hot-fix is to simply put a Font Awesome 4.7 call back in the page somewhere:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

However, loading multiple versions of Font Awesome is not ideal. This should only be considered a temporary quick-fix. Long term you should go through your pages and update the icon markup to the latest. The theme product page tells you in the sidebar what version of Font Awesome the latest build of the theme includes. Then you can find the relevant Font Awesome reference sheet or cheat sheet online, for the corresponding markup.

Another reason for no icons showing is you may have turned-off CSS consolidation. This inadvertently breaks the relative path to the font files.

Why do ThemeFlood themes include Font Awesome Icons?

Most often because icons are needed for the user interface, of a mobile menu or search bars. The 'hamburger' or 'plus' icon is typically used for the menu toggle. Angle, chevron or arrow icons often get used for indication of child subpages.

Sure, there are loads of other font icon libraries available we could have used instead. But Font Awesome is by-far the most widely used and supported library that most developers are familiar with. Font Awesome is also bundled with many other RapidWeaver addons (like Stacks).

Our implementation of Font Awesome is provided in such a way as to encourage theme users to make use of the icons too. The complete Font Awesome library is typically included, rather than a smaller subset. Icons like social media are popular to use. Buttons and page links can also be supplemented with icons too.

The Font Awesome CSS and font files are all stored within the theme. Our policy going forwards is not make use of CDNs (content delivery networks) to serve Font Awesome Icons. Our implementation ensures your icons will continue to show offline and completed websites are compliant with GDPR and other privacy laws.

Manually updating Font Awesome to 'pro', a CDN or a newer version

The easiest way is to open the theme contents and open the index.html file in your preferred code editor (see the chapters on theme modification if you are unsure how to do this). Towards the top of the index.html file, you will see the line of markup that calls the Font Awesome icons:

<link rel="stylesheet" media="all" href="%pathto(font-awesome-icons/css/font-awesome.css)%" />

Replace this line of markup with the new markup for your Font Awesome Icons CDN (content delivery network):

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

Save the changes when done and close the file. Working from a duplicated / renamed theme is recommended, if you want to prevent subsequent theme updates undoing your changes.

If you would prefer to continue serving your own version of Font Awesome (instead of relying on an external CDN), download Font Awesome from the website. Open the theme contents and navigate into the font-awesome-icons directory.

Font Awesome Icon files in the theme

Retaining the original directory and file names as are currently present, replace the existing files with your new ones. The css directory contains the definitions of the icon markup. The fonts or webfonts directory stores the font files. Font Awesome icons are provided in several different font formats, for maximum compatibility with more web browsers.

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.