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

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

  • [1. 在项目中创建静态资源文件夹](#1. 在项目中创建静态资源文件夹)
  • [2. 前往iconfont图标官网,添加图标并拷贝在线链接](#2. 前往iconfont图标官网,添加图标并拷贝在线链接)
  • [3. 下载iconfont代码,解压之后拷贝到小程序的目录中](#3. 下载iconfont代码,解压之后拷贝到小程序的目录中)
  • [4. 修改iconfont.wxss 将本地链接替换为在线链接](#4. 修改iconfont.wxss 将本地链接替换为在线链接)
  • [5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式](#5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式)
  • [6. 页面使用,以van-icon为例](#6. 页面使用,以van-icon为例)
  • [7. 页面效果](#7. 页面效果)

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样式导入

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

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

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

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

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

html 复制代码
<text class="iconfont icon-duihuazixun"></text>

7. 页面效果

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


相关推荐
说私域6 小时前
开源2+1链动模式AI智能名片S2B2C商城小程序:突破流量与创意困境的新路径
人工智能·小程序·开源·流量运营
计算机-秋大田6 小时前
基于微信小程序的医院预约挂号系统设计与实现(LW+源码+讲解)
java·spring boot·微信小程序·课程设计
大美B端工场-B端系统美颜师14 小时前
小程序设计和开发:如何研究同类型小程序的优点和不足。
小程序·设计·ui设计
曾经的三心草18 小时前
小程序项目-购物-首页与准备
运维·服务器·小程序·项目·购物
小咕聊编程21 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
低代码布道师1 天前
家政预约小程序11分类展示
低代码·小程序
说私域1 天前
基于开源2 + 1链动模式AI智能名片S2B2C商城小程序的内容创作与传播效能探究
人工智能·小程序·开源
字节全栈_kYu1 天前
微信小程序视频点播在线视频学习系统 毕业设计 课程设计(1)首页_微信小程序视频功能设计流程图
学习·微信小程序·课程设计
小咕聊编程1 天前
【含文档+PPT+源码】基于微信小程序农家乐美食餐厅预约推广系统
微信小程序·小程序·美食