How to Add Stunning Icons to Your Blog With Font Awesome Icons

How do you deal with icons in your blog posts and landing pages? Do you still use png icons ?

If your answer is yes for my second question then you really don't know about the smart and professional way to insert elegant looking icons in your daily writings and designing.

Today, I am going to show you a really smart and pro way to use icons in your posts and themes.

What are Font Awesome Icons?

Font awesome is a set of cool and elegant looking vector icons that are easy to use and customizable. These icons are purely made of CSS and don't affect your blog's loading time anyhow. You can also customize the size and color in your preferred way. Font Awesome requires no javascript and that's the beauty that it don't down your blog's loading time. Also, these icons are totally free to use for personal and commercial use.

Features of Font Awesome Icons

Here's I am listing some of the awesome features of font awesome. I'm sure you are gonna fall in love.

No JavaScript Required
Infinite Scalability
Perfect on Retina Displays
Desktop Friendly
Free to Use.
CSS Control

Allright! Lets start the implementation!
I am going to share the tutorial to add font awesome icons for Blogspot (blogger) and wordpress blogs. Just follow the below steps carefully and thats it.

How to Add Font Awesome Icons to Blogger?

Log in to blogger dashboard and select a blog.
Now, Go to Template > Edit Html.

Now, Click anywhere inside the html box and search the <head> tag. Use CTRL+F or Cmd+F to Search. After finding the <head> tag copy-paste the below code there.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">

After it, Click on Save Template.

Above code is the CSS stylesheet of Font Awesome Icons. You have successfully added the stylesheet on your blog. Now lets start the usage of these icons that how can we insert icons anywhere.

How to Get the Html/Code of a Icon?

Font awesome has a very long list of icons. To view the list of all icons, you can use this link. Using the search bar, you can search your required icon. Here's a screenshot.

Here, I clicked on Home icon and grabbed the value fa-home from there.
After that, Put the value in the below html code.

<i class="fa fa-home"></i>

Thats All and I got the result.

These icons can be used by the tag and we can use it under <div>, <a> and <li> HTML tags. Below is a simple example of how to insert Mobile icon. Just look at the HTML structure.

Result:

Did you notice the mobile icon? Yes, its small in size and as i said in above para, we can customize the size and color of these icons. Below is a html structure ti increase the icon size.

Result:

To change the color, you can use the below html tag.

Result:

To change the size and color all along, use the below html tag.

Now, Lets move to wordpress. How to use these icons in wordpress blogs? Well, Wordpress have plugins to automate the task.You can get the Better Font Awesome plugin to insert icons.

How to Add Font Awesome Icons to Wordpress?

Download Better Font Awesome wordpress plugin.
Upload it to /wp-content/plugins/ directory.
Activate the plugin through the "Plugins" Menu.
Thats All. You can use the icons by using shortcodes and html.

I hope you enjoyed this tutorial to add font awesome icons and successfully add it to your blog. Have you any issues to discuss? Leave a comment below and I will try my best to get back to you.

Want to thank me? Share this with your blogger mates and thanks me. Happy Blogging :)

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.