Vant UI中使用iconfont实现自定义图标

痛点

Vant中的icon很少,只是提供了一些常用的图标,但是在实际项目中UI设计有自己的一套风格图标,那么就需要在Vant中自定义图标,官方是提供了怎么自定义图标说明的。
https://youzan.github.io/vant/#/zh-CN/icon

开始

1. 上传图标

我的项目都是叫UI设计把图标上传到https://www.iconfont.cn/,然后把项目分享给我。

Vant UI中使用iconfont实现自定义图标_第1张图片
image.png

这里最好把项目的前缀统一设置一下,方便后续的操作,因为后面会用到这个前缀。这里我修改成 my-icon-前缀。
Vant UI中使用iconfont实现自定义图标_第2张图片
image.png

Vant UI中使用iconfont实现自定义图标_第3张图片
image.png

2. 下载到本地

把项目下载到本地,然后把iconfont.cssiconfont.ttf复制到项目的assets/css文件夹中。

Vant UI中使用iconfont实现自定义图标_第4张图片
image.png

Vant UI中使用iconfont实现自定义图标_第5张图片
image.png

3.修改iconfont.css文件

Vant UI中使用iconfont实现自定义图标_第6张图片
image.png
@font-face {
  font-family: 'my-icon';
  src: url('./iconfont.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

这里的font-family就用到前面修改的前缀名称。

4.修改main.js文件

Vant UI中使用iconfont实现自定义图标_第7张图片
image.png
import "./assets/css/iconfont.css";

5.页面中使用


Vant UI中使用iconfont实现自定义图标_第8张图片
image.png

6.其他

可以看到在van-icon中是添加了class-prefix="my-icon"这个属性的,如果是想把这个去掉,只写name属性,可以把前面说到的前缀名称修改为 vant-icon-,然后iconfont.css中做相应的修改就可以了。

2019-05-24 补充

上图的图标是斜的,改如何解决?

方式一(推荐)

给my-icon加上相应的样式


Vant UI中使用iconfont实现自定义图标_第9张图片
image.png
.my-icon {
  font-family: 'my-icon';
  position: relative;
  font: 0.37333rem/1 "my-icon";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

方式二

直接把iconfont.css文件中的my-icon全部换成van-icon
不推荐这样做,引文这样不容易区分框架图标和自己自定义的图标,并且还有可能由于名字重复覆盖框架图标。

你可能感兴趣的:(Vant UI中使用iconfont实现自定义图标)