Latest Updates:

How To Setup Font Awesome Iconic Fonts In Blogger?

If you want to design your blog or webpages with eye catching icons what you will do? Of course you will think to use image based icons. Do you know it will increase your page loading time which is hated by Google and other search engines. So what to do to deal with your icons, buttons and other icon based points in your blog. Well, here is a smart solution named Font Awesome.

Actually it is really Awesome.

Setup Font Awesome Fonts In Blogger


What Is Font Awesome?

Font Awesome is a SVG font based icon system. They have huge collection of iconic based web fonts that can be customize with CSS code. You can simply change the size, colors, styles and what not. They have more than 675 SVG (Scalable Vector Graphic) icons in their database on various categories.
The most interesting matter is using all of the icons are totally free of charge.


How To Add Font Awesome Icons in Blogger Blog

Adding Font Awesome icons to a webpage or blogger blog is pretty much easy. Follow me.

1. Log in to your blogger blog.

2. Go to Theme from left side of blogger dashboard.

3. Backup your template. (Important for safety)

4. Click EDIT HTML

5. Search for <head> and paste the following code just below <head> tag.

<!-- Font Awesome fonts by shinemat.com-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 

6. Now click SAVE button.

Now go to http://fontawesome.io/icons/ and click on your favorite icon that you want to use. You will see a code something looks like below for each font awesome icon.

<i class="fa fa-address-book" aria-hidden="true"></i>

This is your full icon code. Remember each icon has different code name that I highlighted with green color and you have to use different codes for diffrent icons. Ok.

Now paste the full icon link from (<i **********</i>) where you want to add it. That's all.


How To Style Font Awesome Icons With CSS?

Font Awesome icon customization is very essential part because you have to maintain its size, color, border etc according to your blog design.

Simply add a piece CSS class code just before / above ]]></b:skin> tag for each of your icon code like below.

.fa-address-book {
font-size: 30px;
color: #EA3131;
padding: 5px;
border: 1px solid #B00E0F;
float:left;
}

For example: Here, I use fa-address-book icon so I created this CSS element. Follow this way to your all icons. SEE THE YELLOW POINTS.

<i class="fa fa-address-book" aria-hidden="true"></i>

That's all to add Font Awesome icons to your blogger blog. Isn’t it easy? If you still have any confusion about setting up Font Awesome icons just ask me anytime. I will be with you.
Stay well and Allah Hafez pals.

SOME MORE BLOGGER TUTORIALS FOR YOU:

  1. 11+ Reasons Why Should Buy A Custom Domain For Blogger Blog
  2. 20+ Spicy Tips To Make A Blog Popular
  3. Unlimited Backgrounds, Themes & Patterns For Comment Box
  4. How To Change Newer, Older And Home Link With Image Buttons?
  5. How To Add Related Posts Widget With Thumbnails In Blogger Blog?
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Hi, Your are most welcome and feel free to share your comment(s). We will try to response your comment(s) as soon as possible.

Please DON'T spam here. Spam comments will be deleted just after our review.

Thank You For Being With Us.