Looking for startup ideas.? Visit Reinventor.ca

How to Add Web Based Icons to your Website/Blog

How to Add Web Based Icons to your Website/Blog

Add Comment

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPKZ8PcvSfaQZyNrQLdkm3Sbt_L1f98h01siholaMxFj7zRfdSBrdXi27dcNVPCO3p_W7rK4YohcmB2bedp3GYhQrxYhjGuVTHXRJIr2HV4yZDs6dcAb4P4mBEclWl47DDGmzfBwI01_q/s1600/kcxn.jpgToday, in web designing the use of web based fonts-Icons have increased considerably.
The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.
Typicons Yet set of well-made, clean icons for Web-font use.

Check out Typicons 

How to Use Typicons

Download/Github

You can also find all the bits and peices you need to get set up in the download or available on GitHub.

Setting up
The first step is to include typicons.min.css in your the head of your HTML. Make sure you change the path to point to the file on your server.

<link rel='stylesheet' href='path/to/typicons.min.css' />
The CSS file uses the @font-face rule to point to several font files, providing a the best possible cross-bwroser solution.
@font-face {
  font-family: 'typicons';
  src: url("path/to/typicons.eot");
  src: url("path/to/typicons.eot?#iefix") format('embedded-opentype'),
       url("path/to/typicons.woff") format('woff'),
       url("path/to/typicons.ttf") format('truetype'),
       url("path/to/typicons.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;
}

Again, ensure that the path to the files matches the setup on your server. Typicons uses Fontspring's bulletproof @font-face CSS for including fonts on your website.
Now your ready to include any icons you want on your site. Just add a span or i tag with the appropriate class name.

<span class="typcn typcn-arrow-left"><span>

That's it! Remember to include both the typcn and typcn-class-name classes. I prefer this over the [class^="typcn-"], [class*=" typcn-"] method simply because the selector performs better on low performance devices.
There is one caveat, though. Typicons is very large, weighing in at about 80kb (unzipped). I therefore strongly suggest reading the 'Making Typicons' article or checking out the resources in order to make a custom build of Typicons.



Some Similar Websites Yet Free
1. Font Awesome (free): Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Above you can see the font in use to make buttons, navigation, and more.
2. Fontello (free):  Differing from Font Awesome, Fontello is actually a tool that lets you easily piece together your own icon font based on icons from a number of sources, including: Entypo, Font Awesome, Iconic and Brandico.
3. Modern Pictograms (free): The first icon font we discovered, Modern Pictograms was designed to work on-screen at sizes down to 18 pixels, and is remarkably pixel-perfect and useful as a pictographic font.
Foundation Icon Fonts 2 (free): Built by the awesome folks at ZURB, Foundation Icon Fonts 2 follows Foundation 2′s responsive framework, but can be used separately as well.

The next Post will be based on adding these icons to blogger blog

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )