微信小程序引入 iconfont 图标

2024-06-13 08:28:40

方式一，Font class 模式

　　下图的左上角有三种模式，Unicode、Font class 和 Symbol。选中 Font class 模式，然后点击【点击复制代码】下面的链接，将链接里面的代码（如图二）复制到项目里即可。

方式二，Base64 模式

　　之前我都是用的 Font class 模式，但是上星期 iconfont 官网维护之后，我加了新图标更新代码的时候弹出了下面的提示，说要下载至本地使用。

　　小程序上我还没用过本地的 iconfont 图标，于是我就去百度怎么引入，有些博客说小程序不支持加在本地字体文件，要转成 Base64 的格式引入才可以。大致步骤就是先下载到本地，然后将下载的文件里面的一个名为 iconfont.ttf 的文件上传到 https://transfonter.org/ 上面，转成 Base64 格式之后再引入到项目里，具体见【这里】。

　　我试了两次，但是都失败了，也不知道哪里没弄对。不过后来我发现，iconfont 官网自己就支持将图标转为 Base64 格式。

　　只需要在项目设置里面字体格式那一栏的 Base64 勾选上即可。

　　勾选上 Base64 之后再下载到本地，解压后将 iconfont.css 文件中的代码复制到项目里即可。

微信小程序引入 iconfont 图标相关推荐

微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
解决微信小程序引入iconfont，彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...
微信小程序引入iconfont
微信小程序如何引用阿里iconfont图标库? 1.进入阿里iconfont官网 https://www.iconfont.cn/:新建一个自己的项目,导入自己需要的icon. 2.将项目里的icon ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...

最新文章

热门文章