Saturday, October 5, 2013

Fontastic the best way to create "Font Icons "

0 comments
Using the tool Fontastic you can create icon fonts in online. In this site over 3000 icons from the most icon collections. If you want to add your own icon, there is a tool for upload your own icon. Using css you can modify the Color, Size, Shadow of the icon. The main good advantage is it...


gives you clear and sharp icons even on retina display. It works in all modern browsers. It will work on responsive sites also. So you no need to create separate icons for tabs and mobile devices.

Using 3 Steps you can create Icon font

1. Add icons to your font  

2. Customize your font by changing the character and CSS mapping making it easier to code.
  3.Download the package including all the fonts and Install it in your website.
 

You can copy the "fonts" folder into your website project. Then copy the following CSS Code to your website stylesheet Or add the CSS file “styles.css” to your project, and link to it from your HTML page.


/* Just click to select the code */
 
@charset "UTF-8";
 
@font-face {
  font-family: "untitled-font-1";
  src:url("fonts/untitled-font-1.eot");
  src:url("fonts/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-1.ttf") format("truetype"),
    url("fonts/untitled-font-1.svg#untitled-font-1") format("svg"),
    url("fonts/untitled-font-1.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
 
[data-icon]:before {
  font-family: "untitled-font-1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "untitled-font-1" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 
 
.icon-dashboard-speed-streamline:before {
   content: "a"; 
} 
 
.icon-pen-streamline-2:before {
   content: "b"; 
}
Insert the "data-icon" attribute into any HTML tag to add the icon:

Time
Use the following link to see the site http://fontastic.me

Read more...