手把手教你如何获取字体图标ttf里的每个图标的矢量图形？
无论是设计师还是前端工程师，都跟图标打过交道，然而怎么制作字体图标文件可能大部分设计师都不知道（怎么制作具体本文不做介绍，网上一堆教程）。本文将介绍如何将获取到的字体文件转成矢量图形图标供设计师使用。
首先你得先获取到一个网页字体图标字体文件，最好是ttf文件，因为后面要把这ttf文件安装到你的系统里。（其他格式的字体文件最好先转换成ttf）；
拿fontawesome字体来做例子吧，首先打开网站http://fontawesome.io/icons/
F12调出开发者工具选择Network，然后按图示一步一步做就是了：
到新的标签页地址栏粘贴这段链接，修改后缀.woff2和版本号（?v=4.7.0），修改为.ttf。
回车，直接访问，然后浏览器就会让你下载这个ttf文件。
获取到这个ttf文件之后双击安装到系统字体库里，然后打开你的AI或PS，用文字工具画一个文本域，然后问题来了，怎么把图标像打字一样打出来呢？且看分解如下：
打开百度字体编辑工具：http://font.baidu.com/editor/
在预览页面F12或右键》检查调出开发者工具，接下来我们要把无关的文字全部隐藏掉！熟悉前端样式的朋友肯定有办法（display:none;），不熟悉的朋友往下看。
于是我们获得一个干净的只有图标的页面，这个时候Ctrl + A全选页面里的“文字”（图标），复制，然后到PS或AI里，文字工具画个框框，Ctrl + V 粘贴进去，选择字体，输入fontawesome直接可以看到，选择fontawesome字体即可。
到此我们差不多也可以用这些图标来作图了，但是为了便于分享和合作，你可以在AI里把他转曲（Ctrl+Shift+O），也可以在PS里右键转换成形状，然后保存文件，于是，矢量的图标文件就可以用于作图了，也可以分享给其他童鞋直接用了（省去安装字体的麻烦）。
好了，截图截到手抽筋，本文最关键的是要你会点前端调试工具使用，学会这个技能相信对你和你的同事帮助甚多，不多说，看明白了给好评哦~
