3个步骤建立自己的图标字体库 3个步骤建立自己的图标字体库

图标字体

在前端开发中，图标是最常见的用于美化页面的元素。

早前还需由UI人员做成各种小图片然后放到页面中，随着移动端应用的普及，为了更好的缩放效果，节省流量，提高运行效率，现在都已经改成了图标字体的技术，而很少需要用图片来完成了。

图标字体，就是一种特殊的字体，只不过显示出来不是字而是一个图形。

最常见的一种就是windows自带的特殊字符，比如我们可以直接写出“○●◎→←↑↓”这样的简单图形，由于无需调用图片，能像写字一样写出来，性能优异而且使用方便。

windows自带的特殊字符是很有限的，所以图标字体的技术逐渐发展起来，工程师们自己造图形文字，写成字库，现在很多前端UI框架，像流行的bootstrap，ElementUI等，几乎都内置了大量的图标字体。

为什么要做自己专属的图标字库

既然框架里都集成了图标字体，那我们还去做自己的图标字库有什么意义呢？

当然是有意义的，首先，并非每个项目都会使用到那些框架。其次，即使用了这些框架，他们集成的图标也是有限的，并不一定能满足使用需求。再次，即使只使用少量的几个图标，也需要带上整个框架的庞大图标字库，那不是很低效吗？

所以，制作自己的精选图标库，或者为自己的某个项目制作专属的图标库，就显得非常有必要了，也方便以后重复使用或移植。

今天，就教给大家如何只用3个步骤制作自己的图标字体库

第一步，打开阿里图标库

网址 https://www.iconfont.cn

这是阿里巴巴开源的图标库，全部免费使用，而且还是矢量图标哦！赶紧注册登录吧！

第二步，选择图标加入购物车

阿里巴巴号称里面已经有585万个免费图标了，是的，你没有看错，总有一款适合你！点击加入购物车！

第3步，下载图标

进入购物车，直接下载，当然这个是免费的哦！

图标字体的使用

首先把字库文件全部放到比如font目录下

然后在页面里引入

<link rel="stylesheet" href="./font/iconfont.css">

现在就可以使用了。在下载的压缩包里有个demo_index.html，里面有图标列表，还有详细的说明，可以用3种方式使用，区别在于易读性和浏览器兼容性。文档很长，要是你没耐心读，那么就用我教你的这个法子好了，先看图标列表，比如可能是这样：

如果我们需要用户头像这个，对应的是 icon-user，那就这样写：

<span class="iconfont icon-user"></span>

于是span这个地方就会变成人像图标了，是不是很好用呢？

除了使用现成的图标，也可以自己创作或者编辑修改，网站上也提供了丰富的工具。