美文网首页
Vue自定义图标

Vue自定义图标

作者: _小生不才_ | 来源:发表于2019-06-01 11:15 被阅读0次

阿里矢量图标库

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>

相关文章

网友评论

      本文标题:Vue自定义图标

      本文链接:https://www.haomeiwen.com/subject/ivpotctx.html