微信小程序引用阿里巴巴iconfont

最近入坑微信小程序，对于引用阿里图标的方法写个小随笔

1.将icon下载到本地

　　icon引入小程序需要将字体文件转换成base64格式，所以先解压压缩包 => 找到ttf格式文件 => 上传到平台转化为base64格式 => 下载压缩包 => 将css文件名改为wxss => 放入项目样式文件夹

　　字体文件转换成base64格式的链接 https://transfonter.org/

　　附上一张简单操作图

2.使用

　　全局引入wxss样式，进行初步定义

　　在需要使用的页面直接使用就可以啦 <icon class="iconfont icon-44"></icon>

　　（也可以不在全局汇总定义需要使用的图标，直接使用<icon class="iconfont icon-44"></icon>同样可以行得通，其中class中的icon-44需要和iconfont图标库里面的icon名称相同，如图）

转载于:https://www.cnblogs.com/minimo/p/8795774.html

微信小程序引用阿里巴巴iconfont相关推荐

微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
微信小程序引入阿里巴巴彩色图标字体（Symbol）
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...

微信小程序引用阿里巴巴iconfont

微信小程序引用阿里巴巴iconfont相关推荐

最新文章

热门文章