微信小程序中 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. 页面效果

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

在这里插入图片描述


相关文章
|
12月前
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
433 2
|
12月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
151 1
|
12月前
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
375 58
|
11月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
740 1
|
11月前
|
JSON 小程序 前端开发
vant weapp 在小程序中的使用
vant weapp 在小程序中的使用
436 1
|
7月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
892 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
11月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2366 7
|
5月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
11月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1838 1

热门文章

最新文章