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.
The most interesting matter is using all of the icons are totally free of charge.
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.
6. Now click SAVE button.
Now go to https://fontawesome.com/v4.7.0/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.
This is your full icon code. Remember each icon has a different code name that I highlighted with green color and you have to use different codes for different icons. Ok.
Now paste the full icon link from (<i **********</i>) where you want to add it. That's all.
Simply add a piece CSS class code just before / above ]]></b:skin> tag for each of your icon code like below.
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.
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:
Actually it is really Awesome.
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="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
6. Now click SAVE button.
Now go to https://fontawesome.com/v4.7.0/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 a different code name that I highlighted with green color and you have to use different codes for different icons. Ok.
Now paste the full icon link from (<i **********</i>) where you want to add it. That's all.
LOVE TO READ: 10+ Reasons Why Should Start Blogging Career
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:
Post a Comment
Please DON'T spam here. Spam comments will be deleted just after our review.