标签：
很久以前，我们如何使用图标？
1.切图
2.拼合（Sprites）
原始社会啊！
后来
CSSGaga
grunt-css-sprite
字体图标
相见不曾相识
Emoji绘文字
iconfont.cn直接上传SVG
如何使用字体
@font-face { font-family: ‘FontName‘; src:url(‘FileName.eot‘); /* IE9+ */ /* IE6-IE8 */ src:url(‘FileName.eot?#iefix‘) format(‘embedded-opentype‘), /* CR,FF */ url(‘FileName.woff‘) format(‘woff‘), /* CR,FF,OP,Safari,Android, iOS 4.2+ */ url(‘FileName.ttf‘) format(‘truetype‘), /* iOS 4.1- */ url(‘FileName.svg#FontName‘) format(‘svg‘); }
定义一个class使用字体
.iconfont { font-family: "iconfont"; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
获取图标编码
<span class="iconfont">#3301</span>
图标矢量化规范化，让样式回归CSS
<h2 class="icon-size">标题前面有一个图标</h2> <style> .icon-size { content: "\3436"; } </style>
标签：
原文地址：http://www.cnblogs.com/zcynine/p/5014589.html
