在仿写小米手机官网的时候，遇到了一个购物车小图标，会随着文字一起变色，记录一下如何实现这个

素材下载

首先登陆阿里巴巴矢量图标库iconfont

iconfont.cn阿里巴巴矢量图标库

然后搜索图标

可以看到有600多个购物车的图标

我们选择一个，然后添加入库

这时候可以看到右上角的购物车的标号变为了1

点开，选择添加至项目，新建项目并确定

然后就可以在资源管理>我的项目中找到这个项目

在项目中选择Font class并下载到本地

我们就得到了一个文件夹，里面有这些东西

我们将这个文件将放入项目中，我这里是把这个文件夹改名为iconfont

引入方法

在html文件中引入

1
<link rel="stylesheet" href="./iconfont/iconfont.css">

之后我们就可以在这个文件中使用这个图标

使用span或者i引入

1
2
<span class="iconfont icongouwuchekong"></span>
<i class="iconfont icongouwuchekong"></i>

这个图标的大小和颜色控制方式和文字相同，所以和文字放在一起的时候，可以一同通过font的属性来调整

这样就能成功在页面上使用了

需要引入的两个class分别是iconfont和对应的图标名字，图标名在下载前在网页上是可以修改的

在value值中使用

如果想要在value值里面使用iconfont图表，则需要用unicode

unicode在图标项目的界面可以查看

引入方式如下

1
<input type="submit" class="iconfont" value="&#xe682;">

注意需要设置class为iconfont，然后在value值中填入对应的unicode即可

效果如下