微信小程序中使用阿里ICON图标

由于微信小程序不支持ttf字体，只支持base64的问题，需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图

需将图中箭头所指的字体文件通过 https://transfonter.org/ 进行base64 处理

将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲stylesheet.css中的内容全部复制下来粘贴进新建好的iconfont.wxss文件中

然后将阿里图库下载下来的文件夹中的iconfont.css文件打开将其中部分代码复制粘贴至我们自己小程序中新建的iconfont.wxss文件中

自此，字体文件已经处理完成，只等我们在各个页面使用即可。处理完成的文件如下图所示

最后一步，在需要的界面进行使用，前提是需要将我们处理后的iconfont.wxss文件引入到小程序根目录下的app.wxss文件进行全局引入。如下图引入即可

引入完毕后即可在任意界面进行使用了，使用方式如下

参考博客：https://blog.csdn.net/hdchangchang/article/details/83511007

转载于:https://www.cnblogs.com/Fanzifeng/p/10319668.html

微信小程序中使用阿里ICON图标相关推荐

微信小程序中 tabbar的icon图标格式大小
1 使用大小为 81px 的图片 2 icon图片下载时为 png图片
微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
在Vue项目和微信小程序中使用阿里图标
文章目录在vue项目中正确使用iconfont的方法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
微信小程序9---Button按钮和icon图标
Button 按钮首先提醒一下大家,如果你现在button标签不能用,不用担心,那是因为微信小程序存在一个bug,你仔细看一下你的button标签的代码是不是这样的 <button>Co ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
微信小程序中使用阿里巴巴字体图标
第一步:先收藏自己需要的图标到自己的项目中第二步:点击项目设置,并勾选base64位第三步:设置完成并保存后,下载至本地 ,并且将 iconfont.css 文件内的所有内容复制到小程序的wxss ...
微信小程序如何使用阿里字体图标（用法非常简单适用web）
生成iconfont(地址) 把你想要的图标添加到购物车. 创建当前项目名称, 将购物车的图标加入项目这样生成项目图标素材下载到本地, 需要用到 :1. iconfont.css 是图标样式定义:2 ...
微信小程序 wx.showToast() 更换icon图标
image换成自己本地的图片就可以了. wx.showToast({ title:"成功", icon: 'success', image: '-/-/img/warn.png', ...
微信小程序wx.showToast修改icon图标
wx.showToast({title:"成功",icon: 'success',image: '../../images/fail.png',duration: 2000,mas ...

微信小程序中使用阿里ICON图标

微信小程序中使用阿里ICON图标相关推荐

最新文章

热门文章