【微信小程序】引入Base64 图标库
场景描述
小程序icon图标需要使用base64编码后的icon，不使用png、jpg等格式的图片
解决方法
1.进入阿里图标库
https://www.iconfont.cn/
2. 创建一个项目
项目管理 ------》 我的项目
新建一个项目
勾选
- 彩色
- Base64
再点击确认即可
3.选择图标 并加入项目
找到自己想要的图标
点击购物车按钮
加入购物车
选完后
再点击页面右上方的购物车按钮
添加至项目
4.下载代码
进入“我的项目”
找到刚刚新建的项目
选择“Font class”
选择“下载至本地”
然后保存刚刚下载的文件就好了
5.微信小程序中的使用
找到刚刚下载的文件，解压
点击"demo_index.html"
可以查看Demo的使用方法
不想看demo的，可以直接打开iconfont.css文件
在微信小程序中，新建一个文件myIcon.wxss
把iconfont.css中的内容复制到myIcon.wxss
然后配置全局wxss
- 找到app.wxss
- 引入myIcon.wxss
@import "*********你的路径***/myIcon.wxss";
在需要使用图标的页面
使用<text class="iconfont icon-**图标名字**"></text> 就可以了
比如
<text class="iconfont icon-attent"></text>
名字可以在项目中查到
如果图标显示的比较小
可以修改myIcon.wxss文件中的 font-size:;
这里测试的是200rpx
效果图如下
<text class="iconfont icon-attent"></text>
<view class="iconfont icon-notice"></view>
【微信小程序】引入Base64 图标库相关推荐
- 微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
- 微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库 在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
- 微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库 网上看到的方法,亲测成功:参考方法 下载font-awesome字体包 打开Transfonter网站,上传字体fontawesome-webfont.t ...
- 微信小程序----引入外部字体库iconfont的图标
WXRUI体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴 ...
- 微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言 网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法 然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
- 微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
- 微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
- uniapp微信小程序引入第三方字体库
前言 最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑 这是uniapp官网的引入字体图标方法 字体引入 从c ...
- 微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
- 微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
最新文章
- 德鲁克《管理的实践》笔记
- iphone 字符串
- delphi 解析json java_Delphi处理JSON格式数据
- 研究Xposed相关二：如何root android模拟器(android4.3.1)
- 如何让Docker镜像飞起来
- 【Away3D代码解读】（一）：主要类及说明
- python将object转换为float_如何在python中将datatype:object转换为float64？
- scala构造器的介绍
- 计算机控制机器人运动的原理,工业机器人控制系统的基本原理
- 2020 5 PON
- 重装服务器系统只装C盘,如何只重装C盘的系统?
- 创业6年，估值$750亿！张一鸣：人才不是核心竞争力，机制才是！
- 做报表到10点才下班，做的还是丑，怎样才能做出一张好看的报表？
- 最新无限制188旅游系统V7.0升级补丁 全社通V2.0补丁 Tourex 5.0源码下载
- 记录TPTP监控tomcat
- 什么是报表工具？和 EXCEL 有什么区别？
- u盘一插上计算机就不响应,u盘插上没反应解决方法
- C# 重写（override）
- 温度自动控制系统_反应釜温度控制智能化温控设备的趋势
- echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行