首先，打开阿里巴巴矢量图标库的地址：iconfont-阿里巴巴矢量图标库

 第二步，登录账号，没有账号注册一个就可以了

第三步，在上方的搜索框中输入自己需要查找的图标，比如我想要查找有关清除相关的图标，直接在输入框中搜索清除即可，下方就会自动筛选出有关坐标的图标，并在界面下方展示出来

 第四步：选择自己需要的图标，鼠标悬浮在图标上方，点击第一个购物车的小图标，添加入库

 第五步：点击右上方的购物车小图标，会在右侧弹出加购物车里图标的列表

 第六步：在【我的项目】中，找到需要引入的项目，点击下载到本地，会在本地下载一个zip压缩包，选择后路径后，直接下载即可

 第七步：将下载好的zip压缩包，解压后，将这些文件移动到vue所管理的项目中，可以在assets下新建一个font文件夹

 第八步：更改iconfont.css中的红框地方的信息，将.iconfont更改成以下格式

 第九步：需要在main.js中，引入字体图标

import './assets/font/iconfont.css'

 第十步：在.vue的文件中使用图标

<i class="dl-icon-cancel" v-if="clearable && value" @click="clear"></i>

其中，dl-icon-cancel默认是iconfont-qingchu，可以根据项目要求进行更改名字

 展示效果

 项目中我们想改变矢量图的大小或者颜色也很简单：

.dl-icon-cancel {
    font-size: 50px;
    color: pink
              }

项目中我们经常想要扩大图标的点击区域，我们可以利用伪类来实现

.dl-icon-cancel {
    position: relative;
    font-size: 50px;
    color: orange;
              }
.dl-icon-cancel:after {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    bottom: -15px;
    right: -15px;
}

当我们给span绑定一个监听点击事件后，点击的区域就会有很大的区域（红色区域都是点击区域）