Big Tomato Tech Knowledge Base

Font Awesome is a powerful and versatile icon library that provides a collection of over 26,000 icons, ranging from basic characters (arrows, markers) to more complex images (hands holding a heart, magic wand with sparkles).  NAMI EasySite has a Pro subscription for Font Awesome which means that you can use any of their icons (free and pro) on your website.  We have even created a special NAMI Grassroots Icon as part of our Font Awesome Library that you can pull in using the page builder icon module. The icons are designed to be scalable, meaning they can be resized without losing their quality, making them perfect for use on any screen size or device. 

On NAMI EasySite we use FontAwesome icons on menus, in page builder modules, and other areas where a picture can convey information more easily than words. FA icons can also be set with multiple colors, made to spin or bounce, and sized from tiny to huge. 

One caveat, you should use icons prudently, as too many can slow down your site.

Click Here to Learn How to Add Availability Icons and a Legend to Your Menu

=====================================

Adding Icons to Your Website

You can add icons to your website in two ways (view the live demo here):

1. Add Icons Using the Page Builder Modules
If you are on the newer theme using the Page Builder, you can add icons with either the Icon or Icon Group builder modules, and use the Style tab to choose colors and size, and the Advanced tab to add animation. 

The graphic below shows a dinosaur icon in different styles.  

To add icons using the page builder icon modules, open your page in the builder, click the + sign in the upper right corner, then choose the Icon or Icon Group module. 

Then use the Style and Advanced tabs to choose size, colors and animation.

A. Choose Icon:

=====================================

B. Set Size & Style:

=====================================

C. Add Animation:

=====================================

2. Add Icons Using Shortcodes:

For areas on your site that aren't available from the page builder, you can also use a Shortcode to add icons directly in a text block, e.g. in event text, on a menu etc.  (One caveat for affiliates on the older themes, you cannot use shortcodes in your menus).

Note: because the NAMI Icon is a custom icon, it cannot be used in a shortcode, only with the page builder icon modules. 

Using a shortcode gives you a lot of versatility, but you need to get the syntax just right.

The pattern of the Font Awesome shortcode is a left bracket, followed by icon name variable, style variable(s), class variable(s) and then closed with a right bracket. 

[icon name="YourIconName" style="color:YourColorNameorHexCode" class="FontAwesomeSizeorAnimationCode"]

So for the first pink dinosaur the shortcode is: 

[icon name="dinosaur" style="color:Fuchsia" class="fa-5x"] ...using a color name for fuschia

or 

[icon name="dinosaur" style="color:#ff00ff" class="fa-5x"] ...using the hex code for fuschia

Note: when using a Font Awesome icon in a shortcode, you must drop the 'fa-' from the name. 

You can use either color names or hex codes in your Color variable. You can see a list of valid color names here or get a hex code by using this color picker. If you put in a hex code, make sure to include the # symbol!

The Class variable lets you change the size or add animation. These codes come from FontAwesome and you size using Relative codes, or Literal Codes. 

Finally, you can add animation to your icons with special Font Awesome codes such as 'fa-bounce' or 'fa-beat-fade' in the Class variable (separated by comma for each different variable) Here are the basic codes:

=====================================

But Wait, There's More!

There are many more variations for the shortcode variables such as animation timing, stacking icons, making icons all the same width and lots more. If you're interested, you can view all of the possibilities here.

=====================================

In summary, Font Awesome allows you to customize your pages by using icons in a fun and easy way, making your website stand out from the crowd. So, go ahead and unleash creativity with Font Awesome! View all 26,000+ icons by category here!