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