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.