微信小程序之如何使用iconfont图标？

文章目录

一、下载iconfont图标
- 1.进入iconfont，选择要下载的图标，点购物车添加入库
- 2. 添加至项目
- 3. 下载至本地
二、如何引入？
- 1. ttf文件转换base64格式
- 2.合并样式代码
- 3.在微信开发者工具中使用
三、成功啦

一、下载iconfont图标

1.进入iconfont，选择要下载的图标，点购物车添加入库

2. 添加至项目

3. 下载至本地

二、如何引入？

1. ttf文件转换base64格式

进入https://transfonter.org/，点击Add fonts选择文件，打开Base64 encode和TTF按钮，然后点击Convert转换。

点击Download下载

2.合并样式代码

打开第一次下载的图标文件里iconfont.css文件，除去@font-face 这一段，其他全部复制到第二次下载的stylesheet.css文件中。

3.在微信开发者工具中使用

打开微信开发者工具，新建font.wxss文件，在app.wxss中引入，将上步得到的样式代码复制进去，就可以使用了。

三、成功啦

微信小程序之如何使用iconfont图标？相关推荐

微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
微信小程序使用Symbol类型彩色图标（symbol引用）（iconfont）
文章目录官方使用文档经过验证的使用方法 1.安装插件 (mini-program-iconfont-cli) 需要格外注意的地方 2.生成配置文件(iconfont.json) 3.生成小程序组件 ...
在微信小程序中如何引入iconfont
在微信小程序如何引用iconfont? 1.首先进入iconfont 选择自己喜欢的图标 iconfont-阿里巴巴矢量图标库 2.选择自己喜欢的图标加入购物车 3.将图标添加至项目(如果没有项目就随 ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...