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