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去分别设置两种颜色