微信小程序点单左右联动的效果实现

目录

• 前言
• iconfont 介绍
• iconfont 组建图标库并下载
• • 1. 通过 iconfont 可组建自己的图标库
  • 2. 项目设置：生成base64格式的字体
  • 3. 下载至本地
  • 4. 解压备用
• 将 iconfont 添加到小程序中
• • 1. 将css该名称wxss
  • 2. 将文件复制到font目录
  • 3. 在app.wxss文件中引入iconfont文件
• 在小程序中使用字体

前言

略

iconfont 介绍

iconfont 指 https://www.iconfont.cn/。
通过 iconfont 可组建自己的图标库。

iconfont 组建图标库并下载

1. 通过 iconfont 可组建自己的图标库

• 注册帐号
• 创建项目
• 添加图标

2. 项目设置：生成base64格式的字体

• Font Family：默认为iconfont。当项目中已有iconfont名称的字体时，需要使用不同的名字。

3. 下载至本地

略

4. 解压备用

将 iconfont 添加到小程序中

1. 将css该名称wxss

将iconfont.css重命名为iconfont20231007.wxss

2. 将文件复制到font目录

将iconfont20231007.wxss文件复制到小程序的font目录（没有该目录时，可手动创建。其它目录也可以，比较灵活）。

3. 在app.wxss文件中引入iconfont文件

@import 'font/iconfont20231007.wxss';

在小程序中使用字体

<view>首页
<text class="iconfont20231007 icon-zhankai"></text>
</view>