微信小程序:引入阿里巴巴矢量图标库iconfont

简介: 微信小程序:引入阿里巴巴矢量图标库iconfont

阿里巴巴矢量图标库:https://www.iconfont.cn/


第一步:生成fontclass地址

将喜欢的icon加入购物车

将购物车中的图标添加至项目

获取项目的Font class地址,打开连接,并复制内容

第二步:引入字体

将Font class内容粘贴到微信小程序项目中


新建文件


static/font/iconfont.wxss

在 app.wxss 文件中引入字体

@import "static/font/iconfont.wxss"

第三步:使用字体图标

第一个为 iconfont, 第二个为样式库的类名

<text class="iconfont icon-copy"></text>
相关文章
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
4月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
117 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
237 0
|
5月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
74 0
|
7月前
|
小程序 JavaScript Java
基于微信小程序的学习资料库小程序的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的学习资料库小程序的设计与实现(源码+lw+部署文档+讲解等)
|
7月前
|
算法 JavaScript 开发者
通过UIActivityViewController分享多图片及如何把分享时微信图标放置到第一位
通过UIActivityViewController分享多图片及如何把分享时微信图标放置到第一位
88 0
|
7月前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
7月前
|
开发框架 小程序 JavaScript
高颜值微信小程序 UI 组件库!
高颜值微信小程序 UI 组件库!
316 1
|
7月前
|
小程序 前端开发
微信小程序 添加 IconFont
微信小程序 添加 IconFont
183 0
|
开发框架 小程序 JavaScript
微信小程序常见的UI框架/组件库总结
微信小程序常见的UI框架/组件库总结
953 0