阿里图标库使用

1.iconfont基本使用

进入iconfont官网:https://www.iconfont.cn/,将需要的图标加入到购物车,在购物车中点击下载代码.

将下载的文件解压之后会出现这样一些文件

打开demo_index.html,里面会介绍三种引用的方式，推荐使用Symbol 引用。

图标样式修改

图标的样式可以直接通过他的类名去设置CSS样式进行修改，例如font-size，font-weight等等

单色，双色，多色图标颜色修改

1.Unicode,font-class 引用

通过这两种方式引用的图标只能是单色的, 直接修改他的color属性就可以了

2.Symbol引用

如果需要双色图标，那么就只能使用Symbol方式去引入。如果我们需要修改他的颜色的话，就需要对他的js文件去进行修改。
打开iconfont.js文件,找到fill: currentColor;，把这个去掉。
然后找到需要修改的图标对应的svg标签，可以直接通过id搜索.

1.单色图标svg

通过id找到对应的symbol标签之后,需要把里面的fill=’'删除

<svg class="icon zhongzi" aria-hidden="true">
   <use xlink:href="#icon-zhongzi"></use>
</svg>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.zhongzi{
	fill:red;
	color: blue;
} 

之后通过color或者fill属性修改颜色

2.双色图标

1.对于双色图标（不管有几条path，只有两种颜色的都算）多采用，删除其中一种颜色path的fill属性，然后设置另外一种颜色path的fill=“currentColor”,

<svg class="icon  warning" aria-hidden="true">
  <use xlink:href="#icon-warning"></use>
</svg>
.warning{
	fill:red;
	color: blue;
}

然后通过fill和color去分别设置两种颜色