Iconfont多⾊图标和渐变⾊图标的应⽤
之前在项⽬中遇到这样⼀个需求：同⼀个页⾯⽀持不同主题的换肤。对于背景⾊、⽂字颜⾊可⽅便的通过CSS实现；⼀些纯⾊⼩图标也可通过先转换为字体图标，再使⽤CSS来设置颜⾊、⼤⼩。⽽页⾯中的另⼀种元素——Logo是⼀个渐变⾊的图标，传统⽅式是将不同主题下的Logo分别切成图⽚再引⼊。这种⽅式的不便之处在于每新增⼀个主题，都得再次切图。于是乎想到，Logo能否也采⽤字体图标 + 实现渐变⾊，从⽽⽅便的使⽤CSS来设置颜⾊、⼤⼩？
在讲述上述问题的解决⽅法之前，这⾥先简单介绍⼀下传统⼩图标（如下图）会涉及到的⼏种使⽤⽅式。
传统：图⽚
最基本却也是最不好的⼀种⽅式，⼀个⼩图标就是⼀张图⽚，势必会加⼤HTTP的请求次数，这也是⽹站性能优化⽅向之⼀；且如果在移动端使⽤，还要考虑2倍屏、3倍屏问题。当然，最⼤的优点在于兼容性最好。
进⼀步：雪碧图（CSS Sprites）
该⽅法是将⽹页中⼀些背景图⽚整合到⼀张⼤的图⽚中，再利⽤CSS的背景定位来显⽰需要显⽰的图⽚部分。
•
优点：减少加载⽹页图⽚时对服务器的请求次数，从⽽提⾼页⾯的加载速度；
•
缺点：⼩图标与⼩图标之间的距离要确定好，避免雪碧中相邻的图⽚被“露进来”；如果雪碧图⾜够复杂，则⼤⼤增加了CSS代码的编写和维护难度。
现在：字体图标
⼀种⽐CSS雪碧图技术更优雅的图标应⽤⽅式，⽐如说：Font Awesome、IcoMoon、Iconfont等。
•
优点：
优点：
•svg图
图标⽮量化，再也不⽤担⼼会在2倍屏、3倍屏下失真了；
•
本质上是字体，所以可以⽤CSS来灵活控制图标的⼤⼩、颜⾊、阴影等；
•
各⼤平台图标丰富，可⽅便到⾃⼰需要的，如果有定制需求，可快速上传;
•
⽂件，转换为字体图标。
•
缺点：
•
多⾊图标的⽀持还不完善。
2以Iconfont为例讲述字体图标使⽤
第⼀步：进⼊Iconfont官⽹，选择合适的图标（可⾃⼰上传SVG⽂件⽣成图标），添加⾄我的项⽬中，点击下载到本地，也可以直接使⽤在线链接；
第⼆步：使⽤图标。下载的⽂件中，以下三个⽂件分别介绍了unicode、font-class、symbol三种⽅式的使⽤，介绍的很详细，此处不再赘述。
这⾥简单对⽐下3种引⽤⽅式：
•
unicode（最原始、兼容性最好Ie6+、不⽀持多⾊。）
•
font-class（unicode⽅式的变种，书写更直观，主要是解决unicode书写不直观，语意不明确的问题、兼容性良好Ie8+，不⽀持多⾊。）
•
symbol（兼容性较差，⽀持 ie9+及现代浏览器、⽀持多⾊图标）
⼀种全新的使⽤⽅式，应该说这才是未来的主流。其实是做了⼀个svg的集合。
2单⾊图标、多⾊图标、渐变⾊图标的使⽤
2单⾊图标、多⾊图标、渐变⾊图标的使⽤
单⾊图标
3种引⽤⽅式都⽀持，建议使⽤font-class⽅式，书写简便且直观。
多⾊图标
只有symbol⽅式⽀持。在symbol的引⽤介绍⾥有这样⼀句话“通过⼀些技巧，⽀持像字体那样，通过font-size，color来调整样式。” 在⾃⼰的实践过程种，发现font-size控制图标⼤⼩很容易实现，但是color调整颜⾊⼀直不成功。
⼏经研究，发现⽣成字体图标的SVG⽂件⾥包含了1个或多个path标签，⽽每⼀个path可以指定fill填充⾊，表现为该颜⾊填充整个path路径，但是⼀旦指定了fill属性，即使svg标签设置color，也不会改变path的颜⾊。详见下图：
可见：svg标签设置的color：red，并没有表现在图标上。
基于此，如果想修改字体图标某部分颜⾊，有3种⽅式：
1.
由设计转化为SVG⽂件时，设置对应path不填充颜⾊或填充为#000000；
2.
SVG⽂件中到对应的path，去掉fill属性，或者设置fill=”#000000”，再将该SVG⽂件上传转换成图标；3.
修改iconfont.js，到对应的path，去掉fill属性。
在浏览器控制台的elements⾥打开，表现为下⾯的形式：
接下来就可以愉快的实现多⾊图标的颜⾊修改啦～
但是注意：只有未指定fill填充⾊的path（可以有多个）才能响应svg 标签的color。
其本质是：svg标签指定的color⾊渲染在所有未指定fill填充⾊的⼦path上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。