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

简介: 本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。

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

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

在这里插入图片描述

2. 前往iconfont图标官网,添加图标并拷贝在线链接

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

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

在这里插入图片描述
在这里插入图片描述

3. 下载iconfont代码,解压之后拷贝到小程序的目录中

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

4. 修改iconfont.wxss 将本地链接替换为在线链接

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

在这里插入图片描述

5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式

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

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

6. 页面使用,以van-icon为例

<van-icon  class="iconfont" class-prefix="icon" name="duihuazixun"  />
  1. class = “iconfont” 代表的就是 iconfont 这个类
  2. class-prefix = “icon” 代表的是 样式的前缀 为 icon
  3. name = “duihuazixun” 表示的就是某个图标

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

在这里插入图片描述

tips :补充一句,使用其他标签引入icon时,语法如下

<text class="iconfont icon-duihuazixun"></text>

7. 页面效果

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

在这里插入图片描述


相关文章
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
738 2
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
271 1
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
534 58
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
1162 1
|
JSON 小程序 前端开发
vant weapp 在小程序中的使用
vant weapp 在小程序中的使用
670 1
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
715 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
391 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
439 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4250 3
下一篇
开通oss服务