Vue自定义图标

阿里矢量图标库

1.将需要的图标加入购物车，点击购物车，然后。。。。

2.解压下载的文件

3.将iconfont.ttf文件加入assets文件夹中

4.打开iconfont.css文件，复制

.iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.van-icon-camera:before {

  content: "\e7d7";

}

.van-icon-image:before {

  content: "\e7de";

}

至所需文档中

加上前缀van-icon-为

.camera:before {

  content: "\e7d7";

}

.image:before {

  content: "\e7de";

}

5.添加

@font-face {

  font-family: "iconfont";

  src: url("../../assets/iconfont.ttf") format("truetype");

}

.van-icon {

  font-family: "vant-icon", "iconfont" !important;

}

6.使用

<van-icon class="icon-camera" name="camera" custom></van-icon>