How to Use Font Awesome

Plain text is now quite boring; you would agree! So how do you make your website design fun and appealing to your users? Well, there are the conventional ways of adding images, color, and all over to make things looks better. Everybody does that. So how are you going to be a little different, and better? Think icons!

Font icons are what is being referred to here. These allow you to beautify not only your pages but also posts and menus too, with really catchy icons. For Icons are so much better and user-friendly. So where do you get this and how do you use it?

Font Awesome

Enter Font Awesome. When you need icons for such a purpose, this is all you should need to use. You can integrate the massive collection of Font Awesome icons into your WordPress site.

Font Awesome offers more than 600 icons that you can use and add anywhere onto your WorPress website. You can customize stuff, use vectors which will never pixelate, and also be assured that whatever you use is compatible with all browsers.

How to Use Font Awesome

Now there are two ways you can go about adding Font Awesome to your website.

Adding Font Awesome Icons to WordPress With a Plugin

This is the easy way if you can call it so, for those of you who do now want to play around with any code. To start off, install and activate this plugin. One this is done, in your dashboard, you will see a link called ‘Better Font Awesome’ in the settings menu.

Now you can start using the icons simply by shortcodes. The code will be like – [icon name=” actually NAME”], where the word name is just for understanding. So, to actually add icons you will use code like [icon name=”fa-thermometer-quarter”] or [icon name=”fa-battery-full”]. If you want to increase the size of font awesome, all you need to do is add a class tag t the code. So you would need to put [icon name=”fa-battery-full” class=”fa-2x”]. There you go; it is as simple as that.

Manually Adding Font Awesome Icons to WordPress

This isn’t as difficult as you might assume! First of all, just add the Font Awesome stylesheet in the header section of your theme. You can get a stylesheet directly from Font Awesome. Or, you could just add this code – to the header of your theme. This is in case you are using a Divi theme.

For other themes, the code you need to as is – add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
function enqueue_load_fa() {

wp_enqueue_style( ‘load-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css’ );

}

Now you are good to go. You can start adding Font Awesome icons wherever you wish to. Just search for any icon on their website and click on it to download. The icon will show up in different sizes, along with its code. You just need to insert this code in the text tab of the editor that you use on your website. If you are not much of a plugin person, go the manual way.

Already Using Font Awesome?

If you are, you can expect the following:

  • 16px vase size
  • Consistent visual design
  • New grid system for consistency
  • Easy stacking
  • New animations
  • New designs
  • New CSS

Now that is awesomeness personified, right?

Alternatives to Font Awesome

If you are looking for another alternative, which isn’t really necessary, here are some other options that you could try out too.

A) Icons Mind
b) Ionicons
c) Iconshock
d) Fontello
e) Pictos
f) Foundicons
g) The Noun Project
h) IcoMoon
i) Sosa
j) Raphael Icon-set
k) Typicons
l) MFG Labs

So, back to talking about Font Awesome. It is a robust set of icons that has vector icons that are scalable. And what’s more? It is free! These icons will add visual appeal to your pages, posts, menus, and anything else that you could think of. All browsers too are in favor of Font Awesome, and they treat these icons just like any other font on the World Wide Web.

There is so much flexibility of styling available, and the icons will appear as sharp and clear as the device they are being viewed on will permit. Lastly, no need to worry about responsive designs too! This stuff will work anywhere and everywhere just fine. Let’s simply call it – quality iconography.

About the Author

Pooja loves all things WordPress and thoroughly enjoys coming to work every day. Her team loves her too, though she suspects it is a little to do with the fact that she cooks and bakes yummy goodies for them often.

Leave a Reply

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