Font Awesome (free)

Font Awesome is a free stack that allows you to use Font Awesome icons on any Stacks page. This is simply a importing tool to activate the use of Font Awesome. Most of our themes already have Font Awesome built-in, in which case you don’t need to add this to the page.

Many of our own stacks use Font Awesome, though when multiple instances of the stacks are called on a page they were calling Font Awesome over and over again as well. To avoid this so sites would run quicker we now provide this free stack :)

Font Awesome (Free)

1. Drag Font Awesome onto the page anywhere (it won’t display in preview or when the site is published). This allows you to start using Font Awesome.

Snippet File

2. Drag the Font Awesome snippet into any text/html section. Then change the class to any Font Awesome icon you wish to use – see full list here.

Version 1.0.0 & 1.0.1 uses Font Awesome version 4.0.3.

Go grab it on our RapidWeaver Stacks page.

Note, even if you’re using Font Awesome Pro, you still need the free Font Awesome to activate the icons.

Font Awesome Pro

Font Awesome Pro

The pro version allows customization of the Font Awesome icons. You still need the free version to activate Font Awesome (if your theme doesn’t have it running already). After Font Awesome is activated/imported Font Awesome Pro’s customization options will work.

Note, occasionally fonts may not appear in Edit Mode and often saving the page will cause a reload and then display the icons correctly.

Category: Allows you to select from Font Awesome’s icon categories that they have on their website. Depending on the category you select will depend on what icons appear available in the next drop-down menu. The categories include Web Applications, Form Controls, Currencies, Text Editor, Directional, Video Player, Brand Icons, Medical, and Manual. I added the manual icon in case you want to skip locating the icon in the drop-down menu and simply type in the icon name as found on their website here.

Icon URL On: Make available the following field ‘Icon URL’ which you can type in any URL that will wrap only around the Font Awesome Icon (including any padding and borders you have added).

Icon Size: Pixel size of the icon.

Icon Color: Color of the Font Awesome Icon

Icon Shadow: Sets a text shadow to the Font Awesome Icon (this is not needed if you select the ‘Flat Icon Shadow’ further down).

Shadow Color: Color of the text shadow.

Shadow Amount: Control over the direction and blur of the shadow (x, y, blur).

Flat Icon Shadow: Enables the flat shadow effect you can see on our preview page.

Fade On: Sets the flat shadow to fade if turned on.

Flat Direction: South East, South West, North East, North West.

Icon Background: Enables a background color (following option).

Bg Color: Adds a color to the background behind the icon, though this will not display well without adding some padding and possibly a border (in options bel0w).

Add Section for Text: Creates a Stack’s text section. Note that these may not appear to well unless you float the icon left or right (in options below) or if you center the icon (also in the options below).

Add Section for Stack: Creates an empty Stack’s section (slice) where you can add other stacks in.

Float Direction. Sends the icon left or right, which is most useful when a Stack or Text section is added.

Center Icon. Centers the icon.

Icon Padding amounts (top, right, bottom, left): Adds space between the icon and its outer edges. If a border is used it will display on the outer most edge of the padding and background color will also fill this space.

Icon Margin amount (top, right, bottom, left): Adds space between the icon and surrounding elements. This is most useful when a Stack or Text section is added – you will want to add space so that they are not so close together.

Turn Border On: Adds a border allowing you to control the width, radius (round corners) and color.

Second Border: Adds another border on the outside allowing you to control the width, radius (round corners) and color.

Changelog

v2.0.0 (June 23, 2014)

  • Includes all new Font Awesome 4.1 icons including new categories
  • Removed a few duplicate Font Awesome items

v1.1.10 (Apr 9, 2014)

  • Fixed 4 directional icons calls

v1.1.9 (Apr 3, 2014)

  • Added option to control fade distance

v1.1.8 (Feb 5, 2014)

  • Vimeo fixed

v1.1.7 (Feb 3, 2014)

  • URL Option added for URL to open in a new tab
  • Rotate Hover added
  • Transition Speed Controls (in/out)
  • Size Hover Added
  • Flat Shadow Hover Removed (currently not supported)
  • URL Default changed from empty to “http://”
  • Corrected Mispellings

v1.0.3 (Jan 29, 2014)

  • New Icon added
  • Added option to add a URL to the icon
  • Fixed built-in breifcase icon