uniapp/vue 引入iconfont并动态修改icon颜色

一、引入iconfont

iconfont官网：

iconfont-阿里巴巴矢量图标库

1-选择想要的icon至购物车

2-添加至自己的项目

3-这里我选择的font，属于个人喜好，觉得更方便，还有其他方式选择，步骤差不多，点击生成代码，下载至本地（当然你也可以选择在线使用）

4-将iconfont.css等添加至自己的项目 

 5-在main.js中引入css文件

至此就可以使用我们的iconfont

使用方法如下

在iconfont.css中有我们下载的icon名称，比如我这个商城

那么在需要使用他的地方 通过i标签以及添加对应的class即可使用（要记得必须添加类iconfont） 

效果图：

 

二：动态修改iconfont颜色

如果只是修改颜色而不需要动态修改，那么只需要在iconfont.css文件中直接设置颜色即可

如果想要动态修改颜色，我们可以看到，iconfont其实是使用伪类来实现的，所以本质上是动态修改我们的伪类css，这就需要借助css中var函数，这里不过多赘述，直接上方法

 使用动态style，设置颜色，将我们的变量color的颜色赋值给--color，然后在伪类中使用var设置颜色

 这个时候就可以实现动态修改iconfont的颜色啦！

同样有其他需要修改伪类的需求也是可以通过var来实现的。