在实践项目中，多多少少都会用到各式各样的图标，作为WEB前端技术人员，又不得不每一次单个单个的切出图标以及重新命名，如果需求又说要将所有图标整合在一张PNG图片里，这样又得耗费很多时间。随着互联网快速的发展，移动端的网站也崛地而起，因此，在浏览移动端的网站时，图标也出现新的问题——“变得模糊了”。

经过度娘的回答，也有了很多解决图标模糊的方法，我这里就不一一例举。本文也只探讨一下其中的一种方法，使用“字体图标”；网上也有很多现成的图标字体下载，那些都只是别人已经做好了的，我们如果要在那些图标里找出和自己项目中一模一样的图标，简直犹如大海捞针。好了，废话有点多了，接下来准备准备，按照下面的说明做出属于自己项目中的图标字体吧！

1.准备一个带有图标的项目文件（PSD格式或AI格式的都可以），我这里以一个用户头像图标为例：

2.打开PSD项目文件，复制该图标的选区。如下图：

3. 在Illustrator里新建1024X1024画布或者点击下载图标制作样板（这里直接应用已经下载好了的样板），粘贴该图标到画布中心位置，粘贴选项为第一个，可编辑的，在画布中将图标路径大小拉满整个画布，不要超出:

4.最后另存为SVG格式的文件，SVG选项直接点击确定：

注:以上为PSD格式项目中的图标转换成SVG格式的，但有些图标在photoshop里直接点击图层就被导入到Illustrator软件中，然后就直接复制路径到样板中去，进行以上第3步以后的操作。

接下来就是怎样将SVG格式的文件利用某些字体图标的网站上的生成器转换成属于自己的字体图标库。这里我以阿里巴巴矢量图标库为例：

首页点击右上角的，会出现你一个让你上传的大框框，前提是你要先登录才可以的继续下面的操作；然后就直接上传或者拖拽到你所看到的大框框里，接着就说了一句“放开那个图标，让我来上传”。后面就一步一步的确认、添加名称、标签、最后完成上传，就能看到你上传的图标了。这时直接点击该图标加入了购物车（不要误会，这里不要钱的）。最后就点击右上角的购物车的图标，下载到本地或者存储为项目都可以。

这里我只是简要的概述一下，具体怎么操作，阿里巴巴矢量图标库有很详细的教程（其他的网站也类似，后面贴其他的网站的地址）。

下载到本地的文件如下图（如何使用请查看demo.html文件，官网也有相应的教程）：

如何制作属于自己的图标字体