微信小程序中 vant weapp 使用外部的icon作为图标的步骤

这篇具有很好参考价值的文章主要介绍了微信小程序中 vant weapp 使用外部的icon作为图标的步骤。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 在项目中创建静态资源文件夹

首先在当前项目的根目录中，创建assets文件夹，用于存放静态资源，assets里面的文件夹可以自己定义，图片，css…

vant引入icon,微信小程序,微信小程序,notepad++,小程序

iconfont官网 https://www.iconfont.cn/

添加一个图标到iconfont项目中，点击生成在线链接，记得选unicode，然后再生成在线链接（待会儿会使用）

vant引入icon,微信小程序,微信小程序,notepad++,小程序

接着将当前项目的代码下载下来

vant引入icon,微信小程序,微信小程序,notepad++,小程序

下载完毕之后，将压缩包解压，会得到类似下面的目录结构

vant引入icon,微信小程序,微信小程序,notepad++,小程序

将这些解压的资源全部拷贝到微信小程序的assets目录中，并且将iconfont.css重命名为iconfont.wxss （因为微信小程序不识别.css）

vant引入icon,微信小程序,微信小程序,notepad++,小程序

然后对iconfont.wxss进行编辑修改，将刚刚复制的在线链接，替换掉本地的链接

vant引入icon,微信小程序,微信小程序,notepad++,小程序

在app.wxss中，使用@import 将wxss样式导入

/*用自己项目的路径啊，这只是我的项目的路径*/
@import './assets/iconfont/iconfont.wxss';

<van-icon  class="iconfont" class-prefix="icon" name="duihuazixun"  />

可以打开iconfont的项目设置进行对比观察就一目了然了

vant引入icon,微信小程序,微信小程序,notepad++,小程序

tips :补充一句,使用其他标签引入icon时，语法如下
<text class="iconfont icon-duihuazixun"></text>

页面显示效果（我这里为了方便截图，将图标的尺寸调大了一些）

vant引入icon,微信小程序,微信小程序,notepad++,小程序文章来源地址https://www.toymoban.com/news/detail-743842.html

到了这里，关于微信小程序中 vant weapp 使用外部的icon作为图标的步骤的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！