字体图形面板与图标字体使用 字体图标的优势和劣势

一、基础篇：以图标字体Font Awesome为例

① 图标字体的下载和安装

附件中有提供最新版的Font Awesome字体下载

温馨提示：

安装方式建议右键选择快捷方式安装，这样可减少内存消耗，避免卡机；如果没有显示快捷安装方式，请先打开控制面板，然后按下图顺序操作:

② PS、AI 字形面板的使用

字体已经准备好了，那么现在就开始使用它吧！记得将PS和AI更新至Adobe CC版哦~我用的是CC 2015版本

1. 点击窗口菜单调出字形工具面板

2. 在字形面板红色框中输入字体名称（如：FontAwesome、iconfont等）搜索或使用上拉菜单进行查找已安装的Font Awesome字体或iconfont字体；（或者在字符面板输入fontawesome或iconfont，字形面板那边字体可以同步，这样操作更方便）

3. 选择字体工具（快捷键T）后，点击画布，在光标处于输入状态时，双击字形面板中的任意图标，即可出现想要的图标字体；

4. 开始任意修改图标字体的大小和颜色吧！

二、进阶篇：使用iconfont平台的项目图标管理功能自定义图标库

1. 查找想要的图标

点击顶部导航栏菜单中“图标库”选项后，在右上方输入框输入关键字进行搜索即可；

比如输入Google后，按键盘上的Enter键，出现下面的搜索结果；

2. 将图标放进暂存架

点击你喜欢的图标，图标变为橙色，说明该图标已放入你的暂存架中（红色箭头所指的地方）；

3. 将喜欢的图标存储为项目，即创建“个人图标素材库”

请按照下图顺序进行操作（没有创建过项目的可以点击“存储为新项目”，然后给项目命名）

创建项目很重要，个人强烈建议喜欢的图标都添加至同一个项目，在增删和修改项目图标后，方便一键下载更新iconfont字体，避免一个个点击再批量下载后给前端工程师时造成麻烦（养成好习惯，可减少工作量）。

4. 点击下载“个人图标素材库”项目的图标字体打包文件iconfont.zip

5. 安装字体

解压iconfont.zip，找到iconfont .ttf字体文件(.ttf即truetype font简写) iconfont .otf字体(.otf即opentype font简写)文件也可使用；双击安装或使用右键快捷方式安装。

如更新过“个人图标素材库”项目（如新添加项目图标，删除项目中不需要的图标），下载更新的图标字体即可；

6. iconfont图标字体的使用

请参考前面Font Awesome结合“字形面板”的使用方法。

三、补充：自定义图标字体

如果想要将自己设计的图形或常用的形状（比如logo，前提是单色，可缩放SVG彩色图标转变为图标字体后全部变为黑色）上传转换成图标字体，请先参考iconfont平台”帮助“菜单， 查看SVG图标绘制规范，然后点击首页的图标上传入口进行上传。

四、干货总结

1. PS和AI “字形（文字图形）面板” 结合图标字体对我来说是一个设计利器，利用好iconfont平台，自定义图标库素材，可以直接跟那些收费的第三方图标插件说拜拜了；养成经常更新和管理图标项目的好习惯，便可以提升设计效率。

2. 图标字体本身是一种可缩放的矢量图形，因为它是由SVG格式转换过来的，但是具有了更多的可编辑的属性，如颜色可随意更换；所以我觉得PS和AI的 “字形面板”是专门为图标字体开发的，字形面板中其他特殊的字符，也同样可以作为素材使用，将字体轮廓化或转换为形状后，可随意修改，比PS中的自定义形状工具更方便灵活使用。所以“字形面板”是个很强大的工具，省去很多寻找素材的麻烦。

3. 本教程只适用于设计师将图标字体作为素材使用，但如果是给开发者使用，则需要新建一个图标管理项目，然后把界面中使用到的所有图标放进去，最后导出成字体给前端工程师使用，在下载之前请和前端工程师沟通好是导出Unicode还是Font Class格式（下图红色框部分），方便他们编码。最后要注意的是：将图标的大小和色值像字体一样标注出来。

参考链接：

第一次写教程，感觉好累，因为这是写的第二遍。。。

第一遍没保存，你如果想问为什么，说多了都是泪啊。。。。。。。。。。。。

如果这篇文章对你有用，请点个赞啊！非常感谢！！！