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.
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.
Contents
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.
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.
<head>
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=’https://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;
float:left;
}
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 ! ! !
