如何巧妙的将小图片转化成字体图标(一)

2019-05-31  本文已影响0人  橙色流年

前端开发中很多时候我们都会遇到一些比较小的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值即可改变图片的颜色。

使用字体文件
效果图
上一篇下一篇

猜你喜欢

热点阅读