March 5, 2017 / by admin / Articles / No Comments

9 Awesome Uses of Font Awesome for WordPress

Font Awesome is – just like it’s name – AWESOME. For Web Designers and Developers, it provides solutions to many problems related to icons, fonts, mockups and what not. As, you might be already aware, Font Awesome is a Font and CSS toolkit with a collection of over 675 icons. All the icons are vector which can be customized completely using the normal CSS rules.

Let’s take a look at some of the areas Font Awesome has been crucial in. I will be limiting my discussion to only the WordPress development environment. If you have any other awesome use for Font Awesome, be sure to share it in the comments section. So, let’s get into it-

Social Icons

This is perhaps the most common use of Font Awesome. Almost every theme integrates Font Awesome to show Social Icons in the Header (sometimes Footer) of the Theme. Authors employ many techniques to enhance the visual appeal of the Icons like stacking, Drop Shadow and many more. Since whole CSS is present at their disposal, authors can come up with rather creative ideas for Social Icons.

 

Archive Pages

This is out of my Personal Handbook. I use Font Awesome to style the Archive Pages of the themes that I develop. Nothing fancy, but the corresponding icon is placed before the Page Heading of the respective Archive Pages like a Calendar Icon for the Date Page, Tag Icon for the Tag Page etc.

 

Post Formats

Just like the Archive Pages, Post Formats can also identified with Font Awesome. Almost all the Post Formats have their respective Icons and for those that don’t have any direct icon, authors usually get creative like the Aside or the Gallery. But in all honesty, the Gallery Icon NEEDS to be added in the collection. It is just too important to ignore.

 

Arrows

This is also a pretty important Application of Font Awesome. The Directional Icons of Font Awesome prove to be of very high utility to a WordPress Theme Developer. Arrows are used in many areas of a Theme from the Slider, Navigation Bar to the ‘Go to Top’ Icon.
The Directional Icons also save a lot of time which had earlier been wasted in creating PNG files or Sprites and then coding them into the Theme.

 

The Search Icon

The all Important Search Icon. This is one of the surest ways to utilize Font Awesome. Whenever a Search Bar needs to be included in the Theme, the Search Icon gets included next to the Search Bar. This i, however, the most basic application of the search icon and much more creative applications have been coming up recently with the rise of CSS3 and jQuery. InkHive and Divjot.Co have some exceptional applications for the search icon.

 

Separators and Bullets

Apart from the conventional uses of Icons, Font Awesome Icons can also be used as separators between the posts on the Blog Page. Instead of using fancy PNGs and patterns, Font Awesome provides for some awesome separators.
Another major application of Font Awesome lies in its usage as bullets. The dash and bullets have been too generic. Users like to see something unique and creative and Font Awesome provides exactly that. Many icons like the tick, angle and chevron provide for some unique bullets.

 

Loader

This one is for the more advanced themes. Loader usually appears during the loading of a website or an app(the unforgettable rainbow circle of Mac). Font Awesome can also be used to create loaders for the loading screen. The animations, when applied on the icons, can create for some interesting loader icons.

 

Walker

The navigation bar of WordPress is capable of many great things. You can add menu item description and icons using the Walker functionality of WordPress. While user can manually add description to the menu items, the icons are the part where Font Awesome comes into play. User can manually add Font Awesome icons once it is integrated into the theme and the Customizer.

 

Hover Elements

Font Awesome can also be used in hover elements for various buttons and boxes. Along with CSS and jQuery, Font Awesome is capable of producing some stunning animations and hover effects.

 

These are just some of the uses I was able to recall. I am sure there are many other uses I have not added here. I would love to hear about them in the Comments.

Share :

Leave a Reply

Your email address will not be published. Required fields are marked *