一、iconfont素材网

进入iconfont素材网
挑选想要的素材，加入购物车
点击右上角购物车图标，将图标添加至项目

二、iconfont项目设置

项目设置，勾选base64
生成代码，下载至本地
有用的是iconfont.css

三、微信小程序项目配置

iconfont.wxss就是iconfont.cn网站下载的iconfont.css改下后缀即可
关键代码在于
- <text class="icon-alipay iconfont icon"></text>
- 其中icon-alipay在iconfont.css中.icon-fb:before { content: "\e65d";}对应
- 而"\e65d"对应在@font-face中的base64 data中

四、全部源码

icon.wxml

<view class="icon_lists demo__list"><view class="icon_card"><text class="icon-fb iconfont icon"></text><view class="name">fb</view></view><view class="icon_card"><text class="icon-github iconfont icon"></text><view class="name">github</view></view><view class="icon_card"><text class="icon-twitter iconfont icon"></text><view class="name">twitter</view></view><view class="icon_card"><text class="icon-applets iconfont icon"></text><view class="name">applets</view></view><view class="icon_card"><text class="icon-alipay iconfont icon"></text><view class="name">alipay</view></view><view class="icon_card"><text class="icon-taobao iconfont icon"></text><view class="name">taobao</view></view>
</view>

icon.wxss

@import 'iconfont.wxss';.icon_lists {/* width: 100% !important; */overflow: hidden;display: flex;flex-wrap: wrap;margin: 20rpx;
}.icon_card {/* flex: 0 0 25%; */width: 220rpx;text-align: center;margin-bottom: 30rpx;
}.name {font-size: 30rpx;color: #999;
}.icon {display: block;height: 100rpx;line-height: 100rpx;font-size: 100rpx;margin: 10rpx;color: #333;
}

iconfont.wxss

@font-face {font-family: "iconfont"; /* Project id 3579669 */src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('iconfont.woff?t=1660113936513') format('woff'),url('iconfont.ttf?t=1660113936513') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-fb:before {content: "\e65d";
}.icon-github:before {content: "\e65e";
}.icon-twitter:before {content: "\e65f";
}.icon-applets:before {content: "\e660";
}.icon-alipay:before {content: "\e666";
}.icon-taobao:before {content: "\e667";
}

觉得好，就一键三连呗（点赞+收藏+关注）

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示相关推荐

微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记支付篇④——基于微信支付SDK实现Java后端接口使用
文章目录一.前文二.微信支付 Java SDK 三.示例一.前文微信小程序开发笔记--导读微信支付-SDK与DEMO下载先看README.md 二.微信支付 Java SDK 对微信支付开 ...
微信小程序开发笔记进阶篇②——多个微信小程序一个用户体系，同一个UnionID
目录微信开放平台绑定小程序微信小程序login和getUserInfo 后台请求auth.code2Session 后台解密开放数据微信开放平台绑定小程序微信官方文档:UnionID 机制说明 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记支付篇③——微信支付JSAPI下单和微信小程序调起支付（V2版本）
文章目录一.前文二.流程图三.SpringBoot接口实现 2.1 微信调起支付所需数据 2.2 下单接口 2.3 支付回调接口三.微信小程序实现 3.1 JSAP统一下单 3.2 小程序调起 ...
微信小程序开发笔记基础篇②——微信小程序手动查看和代码查看开发者ID（AppID）
文章目录一.手动查看二.代码查看一.手动查看微信小程序后台开发管理-->开发设置-->开发者ID 二.代码查看 app.js onLaunch(opts) {const acco ...

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示

文章目录

一、iconfont素材网

二、iconfont项目设置

三、微信小程序项目配置

四、全部源码

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示相关推荐

最新文章

热门文章

微信小程序开发笔记 进阶篇④——基于iconfont快速实现icon图标显示

文章目录

一、iconfont素材网

二、iconfont项目设置

三、微信小程序项目配置

四、全部源码

微信小程序开发笔记 进阶篇④——基于iconfont快速实现icon图标显示相关推荐

最新文章

热门文章

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示相关推荐