iconfont图标

什么是 iconfont

iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。

为什么要使用 iconfont

在互联网刚起步的时候，较多使用的是png图片，但是png图片更换起来很麻烦， 并且自适应效果很差，有时候会出现锯齿以及马赛克模糊的情况，加载起来也较慢，影响用户体验。

iconfont 的产生就是来解决上面的问题，将 icon 做为字体来使用，它具有很多优势：

对 web 和 app：

• 弹性，在网页或者 app 上，展示字体是很便捷的。用 iconfont 可以很方便的改变 icon 的颜色，或者加入一些其他的效果。

• 可缩放，可以很方便的改变图标的大小。

• 矢量，iconfont 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊。
• 节省加载时间，iconfont 很小，每个小图标只有几 kb，大大节省了加载时间。

对设计师来说：

• 可以本地使用，这个是我最喜欢的功能，将 iconfont 安装到本地的系统上，然后就可以在Ps，Ai，Sketch这些设计软件里使用啦~

推荐的两个 iconfont 工具

那么对于设计师来说，要做 iconfont 需要怎么操作呢？

首先，需要一个转换设计稿的平台。

目前，国内用的最多的是阿里巴巴矢量库，优点是这是国内的中文网站，使用起来无语言障碍，缺点就是版权问题，因为上传上来的图标全部是做为公开库的，其他人可以进行浏览下载。

在此，推荐一个国外的网站，iconmoon 创建于2011年，其上有很多成熟的图标集，大多数都是精心制作，要收费的，可以看看拿来参考。主要还是要用它提供的制作 iconfont 的功能。

找到图标管理->我的项目->然后新建项目:

右边点击新建项目,用于保存自己常用的图标;

项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

 

 我现在将第一个安卓图标加入我的项目,点击加入购物车

添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

自动跳转到对应的项目里了,如图:

接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

下载下来解压后的文件如下:

强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

 

到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

具体代码如下:

好了,刷新页面,图标是不是出来了呢?