前端开发中很多时候我们都会遇到一些比较小的icon图标(例如购物车图标),这些图标在进行操作以后往往需要改变自身颜色。传统PC端的方法一般是使用"精灵图",将所有的小图标切在一张比较大的透明图层里,然后通过改变位移来切换图片,避免一次加载过多图片资源。但是移动端时代,我们大部分的处理方法是将小图标生成字体文件,然后就可以通过改变字体的color值来实现颜色变化的效果了。
推荐图标下载网址:iconfont.cn可以搜索自己想要的图标并且直接生成字体文件。
1、点击官方图标库,搜索自己想要的图标并加入购物车
2、进入购物车点击添加至项目,此处可新建一个项目用来存储当前项目所需的所有图标
3、图标管理我的项目,将项目下载至本地
4、解压下载来的安装包,将红色框框类的文件单独拷贝出来
5、在项目中新建文件夹,将拷贝的文件放入文件夹内
6、打开iconfont.css查看引入的五个字体的路径,注意引入路径的正确性,我这里将iconfont.css放在外面,另外五个文件放在新建的iconfont文件夹中所以里面改了路径
7、因为我用的是vue,所以在mani.js中引入iconfont.css
8、项目中使用引入的字体文件,第一种是直接饮用iconfont.css最下面提供的class名,第二种是直接去iconfont.cn我的项目中使用它的值,具体呈现效果如下图,修改它的color值即可改变图片的颜色。