PS插件iconfont

Posted 2020-09-27 jzdwajue

iconfont简单介绍

iconfont是一款为设计师开发的Photoshop图标字体插件，如今通常所指的Icon Font。是用字体文件代替图片文件，来展示图标、特殊字体等元素的方法。

功能使用及优缺点介绍

这是一淘网用到Icon Font的地方

这是新浪微博微吧用到Icon Font的地方

这里还有我们自己做的小浪人

以下我们看看Icon Font都有什么优缺点。从而决定我们是否要使用它：
首先它的体积要比图片小的多

这是做出来的一组Icon Font字体文件，试想一下假设这是图片的话要有多大。50K？100K？甚至很多其它？然而如今这个文件的大小只唯独13K

不仅体积小，并且还具有更好的可维护性（由于是矢量，所以拉伸不变形。颜色能够自行更换，支持一些CSS3对文字的效果）

像这些图片全然能够用Icon Font制作

而且还能够通过base64置于CSS内。从而不产生图片的http请求
当然，Icon Font也是有缺点的，因为是字体，所以仅仅支持图片上是纯色的。多种颜色的就不支持了

这当中的表情有多种颜色。因此就没法使用Icon Font了

可是在Win8下大量的纯色图标的出现，是否是Icon Font能够普及的一个机会呢？

尽管制作Icon Font自然而然要添加重构的成本，可是跟后期维护相比还是值得的

iconfont插件下载安装及使用

下载安装：

1、点击链接下载安装文件并解压；
2、关闭Photoshop。首先尝试执行iconfont.zxp（假设安装了adobe套装软件则会成功）。假设执行失败。将iconfont文件夹copy到 Photoshop安装文件夹\Plug-ins\Panels\；
3、启动Photoshop，点击 窗体 > 扩展功能 > iconfont，就可以打开插件面板。
4、导入字体图标。

例如以下图所看到的：

    

插件使用：

1、创建新文档。
2、刷新iconfont面板（两次双击插件页卡，例如以下图红框所看到的） 

     

推荐IconFont字体图标字库

阿里巴巴矢量图标库-Iconfont：http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包括了淘宝图标库和阿里妈妈图标库。

Fontello：http://fontello.com/

在线定制你自己的icon font字体图标字库，也能够直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome：http://fortawesome.github.io/Font-Awesome/

一套绝佳的图标字体库和CSS框架，仅仅为Bootstrap设计，推荐学习和使用。

拓展链接：高效神器！

21款强大有用的PHOTOSHOP扩展插件。