微信小程序版Vant自定义字体图标（Icon）样式

微信小程序版Vant自定义字体图标（Icon）样式

阿里云图标

1.进入阿里图标库

搜索想要的图标，再点加入购物车

2.打开购物车，下载源代码

3.保存download.zip

4.复制iconfont.ttf到小程序项目 /images/icon-ttf/

5.打开demo_index.html就能看到自定义图标用法

Vant自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

复制iconfont.json中的icon样式部份，放到my-icon样式后面，在前面都加上my-icon-前缀。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'iconfont';
  src: url('./images/icon-ttf/iconfont.ttf?t=1782982543261') format('truetype');
}
.my-icon {
    font-family: 'iconfont';
}

.my-icon-icon-shangpin:before {
    content: "\e64f";
}

.my-icon-icon-fuwu:before {
    content: "\eb36";
}

.my-icon-icon-shangpin1:before {
    content: "\e852";
}

.my-icon-icon-fuwu1:before {
    content: "\e616";
}

使用自定义图标

<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="icon-fuwu1" />

在其它控件里使用自定义图标，指定icon-prefix即可

 <van-grid-item url="/test/test" icon-prefix="my-icon" icon="icon-fuwu" icon-color="DarkCyan" text="服务" />

发布可用性

经测试 字体文件放小程序项目中，开发工具能正常显示图标，但发版后真机不能正常显示。

解决办法

把ttf文件放到后端服务器上，如下所示

@font-face {
  font-family: 'iconfont';
  src: url('https://www.xxxxx.com/statics/icon-ttf/iconfont.ttf?t=1782982543261') format('truetype');
}

这样真机也能正常显示，同时也省去了占用小程序空间的问题。

注意，如果项目比较大，建议先收藏标图，再从我的收藏里添加购物车下载源代码，或保留好每次下载的图标源码。便于以后添加图标使用。