听说fontIcon 显现 图形比 img要高。 然后它是以矢量图的相似呈现,放大不会失真。 在今天开发中发现,公司有人使用了这项技术。。所以也就花时间学习了一下。。
在学过程中看了几篇文章之后完成的。。这里也推荐下:
1 http://www.chinaui.com/Knowledge/20120907/14021209040007.shtml (里面有demo, 和更重要的 图形转化在线工具:iconmoon)
2 http://iconfont.cn/ 阿里图形库, 这里提供了很多图形源,可以通过这个地方下载SVG 文件到 iconmoon 进行转化。
3 http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/( icommon使用教程)
html引用代码片段
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <!--通过样式引入 font icon 图标--> <link rel="stylesheet" href="font/iconfont.css"></link> <style type="text/css"> ul li{ cursor: pointer; list-style-type: none; line-height: 30px; } </style> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?b7b2qy'); src: url('fonts/icomoon.eot?b7b2qy#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?b7b2qy') format('truetype'), url('fonts/icomoon.woff?b7b2qy') format('woff'), url('fonts/icomoon.svg?b7b2qy#icomoon') format('svg'); font-weight: normal; font-style: normal; } /*通过样式加 content呈现图标 如: <i class="iconfont"></i> */ [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*通过样式呈现图标 <i class="icon-im"></i> */ .icon-im:before { content: "\e900"; } </style> </head> <body> <ul> <li> <!--通过样式加 content呈现图标--> <i class="iconfont"></i> </li> <li> <!--通过样式呈现图标--> <i class="icon-im"></i> </li> <li>天猫</li> <li>京东</li> <li> 3g </li> <li> 4g </li> <li> <input type="radio" name="t">速率 <input type="radio" name="t">时延 </li> <li>地图 </li> </ul> </body> </html>
难点:
1 如何 获取SVG 格式的矢量图
2 如何将SVG 的图标绑定 地址如:\e900 如如何来得?
3 转化编辑工具的选择, 网上有很多, 安装文件很大。选择是个麻烦的事情
具体操作步骤:
1 去http://iconfont.cn/ 图库 找一个图标,然后以SVG格式 下载下来。
2 通过icommon 教程 了解如何使用它
3 利用icommon 在线工具将你的SVG 转化为需要的格式,最后下载转化完成的包
4 参考里面的demo 引用图标。。
具体实现代码:http://download.csdn.net/detail/tarenahuangdw/9436695