How To Use Zocial Icon Fonts In Blogger?

Web-designing techniques is consistently improving from past few years. It's because of the popularity that freelance market has received in past 5-6 years.

Friends you know that 2-3 years back when peoples were scratching the newly launched CSS3, designers were using the old design techniques of using images, sprite images. But now everything has changed alot compared to past. Designers hate to use bitmap image files and prefer to use icon sets created using pure css3.

Why to use icon fonts?
It's a simple question that may strike your mind at the moment. But answer to this is very simple. Icon fonts are nothing but they are the shapes, designed by using pure css. That's why they don't eat much of your loading bytes and download more fast as compared to image files.

So let's start our lesson on how to use icon fonts in blogger sites?

Some Basic Steps

Easy to Use

Using icons fonts is not very tough task it's very simple now, all you need is to link the stylesheet of icon fonts in your blogger template and then start using it.

Let me simplify this more for you

Open Blogger Template → Html Editor → search <b:skin> on top
Add below given url just above it. (I've used zocial icon set for e.g.)

<link href:'http://weloveiconfonts.com/api/?family=zocial' rel='stylesheet'/> 

Now add below code in your stylesheet just before ]]></b:skin>

[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

Calling the Icons
After adding the stylesheets of icons, save your template and then you're ready to use icons.
You can call the icons only if you provide correct class name for icon. Like we're using zocial icon set which has complete set of all the social media icons.

So for e.g. we want to use facebook icon then we'll create a element like

<span class='zocial-facebook'></span>
or you can also write it like
<div class='zocial-facebook'></div>
or
<i class='zocial-facebook'></i>

you can use any tag name span, div, i, abbr, a etc. but important thing is the class name as I've mentioned earlier in few paragraphs above. If class name is wrong icon will not appear.

Play & Learn fast

Final Words

Tell me How can I help you? Though this article is lengthy one but I am sure that I've not bored you in this article. I've used all the very details so that every class of leaner either be it pro-developer or be it beginner both can learn it easily.

Do not forget to leave your comments below telling me how much you liked playing and learning in this article.

Below is the list of all zocial icons with their class name just by side of the icon.