您的位置:首页> 日志> 前端技术 正文

在以往的项目中我们都是使用cssSprite来实现图标,背景图。

随着项目越来越多,遇到了很多问题。

1、如何对图标进行分类:刚开始还比较好,对图标进行分类,大概有菜单图标,首页图标,内页图标,等等。但随着,图标的不断增加和重复应用,发现分类变得很困难。如果把所有图标集成到一张图,但是这样一种情况:有些页面只使用了一个图标,同时用户只在这个页面进行操作;却要下载一整张大图,浪费资源。

2、排版不容易控制:导致使用时图标位置不好控制,因为图标的大小不一样,很难使所有图标按照一定的规律排列;而且,更加痛苦的是,很多时候为了background-position:定位准确,特别保证鼠标hover效果的图片区域和默认图片的区域完全重合;我们常常会每个像素去尝试,调整。

3、不利于维护:新增图标不得不修改psd,有时候为了保证某一类型的在一块区域,不得不调整其他图标的位置。

4、Retina下图标会失真,模糊。

iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者,积极在线分享矢量图标制作经验、前端应用说明,及应用中常见的一些问题。

Iconfont优缺点:

1、兼容性良好。现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。

2、使用方便;开发人员直接调用样式,不用为了background-position:准确定位看瞎眼睛。

3、利于维护,新增,修改,删除图标方便,各个图标之间相对独立。

4、体积很小,请求速度快,可以带来比较好的用户体验。

5、矢量图,放大,拉伸不会失真。

6、单色图标

下面分享一下iconfont实例的制作:

1、打开iconfont矢量图标库上传svg格式:http://www.iconfont.cn/icons/uploadShow

     上传后的图标:

     

2、选中图标存储项目:

3、下载到本地后就可以使用了。还提供了使用方法:

4、使用方法:

1、使用字体编码

<i class="gzccfont">&#x33;</i>

2、通过伪类实现(建议方法)

这样我们的图标就可以通过样式来进行对文字图标的控制了。

鼠标的hover,mouseove,click等事件改变动画,内容,大小就显得容易了。

生成图标的方法二:

建议使用FontCreator,推荐一篇博客 http://www.uisdc.com/learning-icon-font

Tips: iconfont SVG图标转换方法: http://www.iconfont.cn/help/platform.html