交互设计 » UI设计福利 在Photoshop上直接使用FontAwesome图标!

UI设计福利 在Photoshop上直接使用FontAwesome图标!

发表于: 交互设计, 视觉设计. 评论 (10)
Sponsor

估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标,只要在CSS引入这个字体icon,它就可以直接通过class来生成一个图标,而且免费使用。目前图标数量已经更新至585个之多,包含常用的APP UI应用图标、品牌图标等。

今天教大家如何将FontAwesome直接在Photoshop或AI上使用,这样日后做UI设计也方便多了,下面我们说说方法。

fontawesome

STEP 1:下载Fontawesome字体

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

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

STEP 2:在PS或AI上使用Font Awesome图标字体

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

Tips:如果觉得这个网址不好记,可以在设计导航的素材的图标栏目找到Font Awesome打开。

fontawesome

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

fontawesome

STEP 3:

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

fontawesome

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

fontawesome

好了,如果还有不懂的请在本文下方留言,设计达人网小编看到会一一回复的。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论10 Responses to “UI设计福利 在Photoshop上直接使用FontAwesome图标!”

  1. Laws - 回复

    试了下这个方法现在不行 cheatsheet的页面已经不是这样了 按现在的代码 比如f641 改成[]也用不了

    • 设计 达人 -

      依然可以用,不要选错字体

  2. 倒着走的猪 - 回复

    确实方便多了 感谢

  3. 陻裑丶呮潙等伱 - 回复

    字体下载不了

    • 设计 达人 -

      可以的

  4. JcC - 回复

    font awesome 下载不了…

    • 设计 达人 -

      2021年,依然可以,还更新了更多

  5. awolf - 回复

    GOOD

  6. 倡萌 - 回复

    太赞了,专程过来顶一下

    • 一听可乐! -

      我的为什么下载不了!


{ 发表评论 }