Destino Solutions

+91 9747866100

How to use Icon Font Packs

April 9th, 2014

Popular Websites and Blogs are using Indivisibly part is Eye catchy Icons, Icons are attractive and Sensitive for a webpage, commonly icons are using bmp,png formats but now it is old trend,It always slow Page loading speed and Low Quality icon. Today I’m sharing Icon fonts, It is Reliable path and icon fonts are used high quality raster SVG format.

Icon fonts are small file size and get high quality and flexible icons for Customize with CSS. Icon font packs and SVG custom icons are some differences  SVG directly using the property embed code or direct property of SVG  and icon font is not one icon it is collection of svg and we can use the icon id to wherever you want to add just use that icon id example: ‘twitter-icon’ we can use this icon via HTML example: class=’twitter-icon’ and customize with CSS,
example: .twitter-icon { and add CSS effects change colors and hover effect. Icon fonts are avilabe two types premium Icon fonts and free Icon fonts.

Using A Free (Open source) Icon Font Pack

First, Add following CSS ‘Icon-font’ script  to CSS section.
@import url(;
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
  font-size: 100px;
  color: #e63a7f;

And Wherein you want to show Font icon, Just add Following code in HTML section.

<span class="zocial-dribbble"></span>

It is a Simple Dribbble Icon  and  This font pack support too much awesome icons. We can use more css effects, Font-size, drop-shadow and more, Icon fonts support almost css effects.

.zocial-dribbble:hover {
  color: #b6a6ac;

Some Icon-fonts Ids ( Avilable more icon ids @weloveiconfonts.)

android, angellist, aol, appnet,appstore,bitbucket,bitcoin,

Using Icon id<span class=”zocial-dribbble“></span> this dribbble id change to facebook

<span class="zocial-facebook"></span>

This Icon-font pack created by ‘weloveiconfonts‘ Also available more icon Font id’s and Icon Font packs @weloveiconfonts.

You have Any Questions? Please feel free mentioned it below comment box.

Categories: Web Development