iconfont怎么用到ps里

使用icon font来生成图标相对于基于缉弧光旧叱搅癸些含氓的图标来说，有如下的好处： 1自由的变化大小 2自由的修改颜色 3添加阴影效果 4IE6也可以支持 5支持图标的其它属性

（此步骤时可以精简文件，只复制保留iconfontwxss文件到assets/iconfont文件下，其余文件删除，依然会正常显示图标）

准备工作到此已经完成，接下来进入项目配置使用；

可以使用view text等标签引入iconfont；

页面效果：

其中：

引入VantUI组件内容可参考 VantUI官网快速上手 进行配置；

页面效果：

iconfont的使用

平时的网页开发该如何使用iconfont？在这边微信小编给大家推荐一个工具：Iconfont-阿里巴巴矢量图标库。

WEB前端开发，图标的快速制作

iconfont svg是没有办法直接引入的。

PS：可以通过<use x="0" y="0" xlink:href="#icon-xxx"/>的方式，从缓存里曲线引用svg>defs>symbol中的SVG图标。

<use x="0" y="0" xlink:href="#icon-xxx"/>引用举例：

<svg style="display: none;">
   <defs>
       <symbol id="icon-XXX">
           <svg width="24" height="24" viewBox="0 0 48 48">
               <path d="XXXXXXXX"></path>
           </svg>
       </symbol>
   </defs></svg><svg>
   <use xlink:href="#icon-XXX"></use></svg>

iconfont的优缺点：

大小可以自由地变化。

颜色可以自由地修改。

添加阴影效果。

IE6也可以支持。

支持一些CSS3对文字的效果。

字体文件比文件小很多。

由于是字体，所以只可以显示纯色，不支持多种颜色的（缺点）。

定义：字体图标是一种自定义字体。

每个字都有对应的unicode，这个unicode渲染出来是一个图标(符号)的形状。

常见提供字体图标的网站： iconfont 、 IcoMoon 、 Font Awesome 等等。

优点：

缺点：

如何制作字体图标？

What Are Icon Fonts
What are the icon fonts, how do they work, how a font can be an image
Iconfont字体生成原理及使用技巧
解密Icon Font

---