估计很多前端人员都知道[FontAwesome][1]是一套免费而且好用的Web字体图标,只要在CSS引入这个字体icon,它就可以直接通过class来生成一个图标,而且免费使用。目前图标数量已经更新至585个之多,包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用,这样日后做UI设计也方便多了,下面我们说说方法。

![fontawesome][2]

#### **STEP 1:下载Fontawesome字体**

官方下载地址:[http://fortawesome.github.io/Font-Awesome][3]

下载后,将TTF文件安装到系统的字体目录。

#### **STEP 2:在PS或AI上使用Font Awesome[图标字体][4]**

打开Cheatsheet页面:[fortawesome.github.io/Font-Awesome/cheatsheet/][5]

![fontawesome][6]

选中你需要的图标,复制,如下图:

![fontawesome][7]

#### **STEP 3:**

在PS或AI上粘贴上去(文字输入状态下),这时你可能看到是这样的,别急,看下面。

![fontawesome][8]

那是因为我们没有选择字体,把字体选择为Font Awesome就OK了,如下图:

![fontawesome][9]

好了,如果还有不懂的请在本文下方留言。

另附PS一次性删除所有隐藏图层和空白无内容图层方法

#### **删除所有隐藏图标**

点击图层面板右上角展开菜单,选择【删除隐藏图层】,这样软件会自动删除所有的隐藏的图层了。

![删除所有隐藏图标][10]

#### **删除所有空白图层**

点击【文件】菜单,选择【脚本 – 删除所有空图层】,这样软件就会删除所有空白、无内容的图层啦

![删除所有空白图层][11]

以上方法很简单,特别对于大文件处理,还是很有帮助的。

[0]: http://image.uisdc.com/wp-content/uploads/2015/08/use-fontawesome-in-photoshop-1.jpg
[1]: https://fortawesome.github.io/Font-Awesome/
[2]: http://image.uisdc.com/wp-content/uploads/2015/08/094649SMe.png
[3]: http://fortawesome.github.io/Font-Awesome
[4]: http://www.uisdc.com/tag/%25e5%259b%25be%25e6%25a0%2587%25e5%25ad%2597%25e4%25bd%2593
[5]: http://fortawesome.github.io/Font-Awesome/cheatsheet/
[6]: http://image.uisdc.com/wp-content/uploads/2015/08/094650WU5.png
[7]: http://image.uisdc.com/wp-content/uploads/2015/08/094650HqJ.png
[8]: http://image.uisdc.com/wp-content/uploads/2015/08/0946500aF.png
[9]: http://image.uisdc.com/wp-content/uploads/2015/08/094650DhH.png
[10]: http://image.uisdc.com/wp-content/uploads/2015/08/040136HK1.png
[11]: http://image.uisdc.com/wp-content/uploads/2015/08/040136TRV.png
[12]: http://www.uisdc.com/photoshop-gta5-style-photo
[13]: http://www.uisdc.com/skeuomorphism-icon-design-pencil
[14]: http://www.uisdc.com/photoshop-chalk-fonts-effect
[15]: http://www.shejidaren.com/
[16]: http://www.uisdc.com/
[17]: http://hao.uisdc.com/book/
[18]: http://e.weibo.com/uidesign/
[19]: http://hao.uisdc.com