Using icon font to generate icons has the following benefits compared to image-based icons:
1. Free change size
2. Freely modify the color
3. Add shadow effect
4.IE6 can also support it
5. Support other properties of image icons, such as transparency and rotation, etc.
6. You can add attributes such as text-stroke and background-clip:text as long as the browser supports it.
How to use it?Text modification:
<h3><span aria-hidden=true data-icon=⇝></span>
Stats
</h3>
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
Individual icon:
<a href=# class=icon-alone>Create your own icon font - IcoMoon<span aria-hidden=true data-icon=▨></span>
<span class=screen-reader-text>RSS</span>
</a>
/* Same CSS as above, plus */
.icon-alone {
display: inline-block; /* Chrome 19 was weird with clickability without this */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}
If you need to create your own iconfont, it is recommended to use iconmoon. Using it, you can generate the icon font you need by uploading SVG or fonts. This article is online demonstration using iconmoon to generate.
Step 1: Select what they provide or upload your own Step 2:Please visit the online demonstration to view the results. I hope you like the Icon font. If you think the icon is not smooth enough, you can consider using cufon for processing, so that the generated icon is more beautiful.
Source: http://www.gbin1.com/technology/css/20120827-icon-font-usage/