11 May 2016

How To Easily Add FontAwesome icons To Your Blogs

In this article, we learn how to add FontAwesome icons into your Blogs. FontAwesome icons are the awesome and beautiful pictures for all designers. These icons / fonts are nice and using for website designing. You can use these icons into your blogger blogs or any other blogs, apps, in graphics designing and many other places . These can made your work more awesome and more beautiful .

These icons are most useful as compared to any other PNG or Gif images. Because these are must faster than other images or icons. Bloggers and designers use these icons to their works, blogs, apps etc and given them a new look.

How To Easily Add FontAwesome icons To Your Blogs

If you want to customize your blogger template or design of your website, then this article is fully for you. You can use these icons to your templates different sections, like footer, header, navigation, forms, buttons etc. Mostly people try to add high quality images , instead of these, but these images can increased the page load time due to the image size. So use these icons easily to get rid of this problem.

What are Font Awesome icons ?

In general, Font Awesome icons are just like logo images called icons , which are especially designed for Bootstrap.These are also called "Web Design Fonts" . It is a huge collection of different Scalable Vector Graphics icons which you can easily customized and use it any where in HTML / CSS coding, like into your templates, websites etc. You can use these icons or fonts in website design.

How To Easily Add FontAwesome icons To Your Blogs

The size of these icons are much small as compared to any other icons due to their scalable and compact sized effect. As a developers and designers, i'll also use these to create and develop a professional and well looking awesome designs for our webpages or templates.

Customize Using CSS

Basically these icons are used CSS, so you can customized it as it's size, color, shadow and many other default setting. You can easily add these icons into your blogger blog templates as a CSS StyleSheet using the class "i" tag.

Fast Loading Time

The biggest benefits of these icons is that, these not need any JavaScript code for working into your blog templates. So no more loading time required, and in a result , your site loads more fast. You can use these icons free of cost into anywhere into your templates.

Adding Font Awesome Icons To Blogger Template

Now simply follow below steps for adding these nice Awesome Fonts into your blog designs / blogger blogs. If you use blogger, then simply follow these simple steps.

Step 1 - First of all go to blogger dashboard.

Step 2 - Select your blog and go to your "Template", then backup your template first an click on the "Edit HTML" button.

How To Easily Add FontAwesome icons To Your Blogs

Step 3 - Now click anywhere and press "CNTRL + F " to find this tag. 


How To Easily Add FontAwesome icons To Your Blogs

Step 4 - Just copy the below the line of code, which is the CSS Stylesheet of Font Awesome icons. Add this code and paste just below the <head> tag. After adding this code, you're able to place any icon where you want to appear using the <i> tag. 

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

Adding Font Awesome icons

Now you can first view the complete list of available icons in Font Awesome here. Simply see all the icons and choose which you want to appear on anywhere into your webpage and design your website. Simply go there, and choose any icon name ( e.g : fa-home, arrows-h ) and adding anywhere using the <i> tag. See the example below :

<i class='fa fa-home'></li>

You can simply change the name of the icons (e.g: fa-home) with your own icone username which you want to display. If you want to add this icons, into your main menu / navigation links then see the below :

<li><a href='http://www.techora.net'><i class='fa fa-home'></i>Home</a></li>

Customizing the Font Awesome icons

Basically these all icons are in a same pattern, shadow, and colors, but you can change and customize it as you want. Simply taking the class name which you use , and write a CSS code inside it which you want to add or change colors, shadow, size etc.

.fa-home {
font-size: 22px;
color: #000344;
padding: 5px;
border: 1px solid #000000;

Well !!! we Hope you understanding everything , but if you not understand any thing, or facing any difficulties or problems with these icons ? then don't hesitate, we always hear to your nice words, simple use comment section below. Also we covers some other icons tutorials and customization with different tools, so don't miss out, stay tunned ! ! !

Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!