微信小程序引入字体图标（阿里iconfont）

最新推荐文章于 2024-07-15 22:46:08 发布
最新推荐文章于 2024-07-15 22:46:08 发布
阅读量855 收藏 6
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49392771/article/details/119952007
版权

微信 小程序

微信小程序引入阿里字体图标

方法总结

1 阿里iconfont官网选择自己需要的图标

阿里字体官网点击即可进入

  • 选择需要的图标

在这里插入图片描述

  • 下载至本地

在这里插入图片描述

  • 打开下载好的压缩包

2 将.ttf格式的字体文件转换为base64

转换base64点此进入
在这里插入图片描述

  • 下载转换好的文件至本地
    在这里插入图片描述
  • 打开文件夹如下图

在这里插入图片描述

3 把转换后的.css文件和原来的.css文件中的代码拼接，复制到微信小程序相应的.wxss文件中

  • 将stylesheet.css文件里面的内容全部复制到微信小程序app.wxss里面
  • 将未转换之前文件夹里面的iconfont.css里面的部分内容（如下图）复制到微信小程序app.wxss里面

在这里插入图片描述

完成以上步骤，就可以使用字体图标了

偷一只猪ma
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序中如何使用阿里云iconfont图标
m0_62524243的博客
08-18 713
在小程序根目录创建iconfont.wxss文件，将浏览器中的代码复制，粘贴到文件中。在项目中，点击Font class按钮，点击查看在线链接，生成css文件。在iconfont中查看图标名称（可以自定义，瑶重新生成css文件）在app.wxss文件中引入iconfont.wxss文件。创建一个项目（进入我的项目，点击创建项目）在图标库中挑选自己需要的图标，点击购车按钮。将购物车中的图标添加到自己的项目中。选好后，点击右上角购物车 按钮。将复制的url在浏览器中打开。输入相关数据，创建项目。...
【微信小程序】引入iconfont字体图标
DUMG
04-30 1797
引⼊字体图标 1. 打开 [Iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/) 2. 选择图标，添加⾄项⽬ 3. Front class - 查看在线连接 - 复制类的地址 4. 浏览器打开，全选复制到项目的 `styles\iconfont.wxss` 5. 在项目的全局样式 app.wxss 中引⼊ `@import "./styles/iconfont.wxss";` 6. 在项目的页面中直接可以通过类名使用
微信小程序 如何引入外部字体库iconfont的图标
11-26
如何引入外部字体库iconfont的图标，具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') for
微信小程序使用字体图标——链接引入
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-13 2964
【代码】微信小程序使用字体图标——链接引入。
微信小程序引入字体图标
最新发布
qq_43792295的博客
07-15 125
如下图获取样式代码链接，点击【Font Class】–》【查看在线链接】–》【点击复制代码】上一步中点击确认后会自动跳转到当前项目，或者是点击【资源管理】–》【我的项目】在具体页面的wxss中使用。在全局wxss文件中引入。使用的样式中的如下属性。
如何在微信小程序中使用字体图标
单眼皮的小熊
10-14 5303
方法一：将字体url转换为base64的格式后使用 　　第一步，下载需要的字体图： 　　打开阿里巴巴矢量图标库，选择自己需要的图标添加到购物车，然后点击购物车下载代码： 　　第二步，转换iconfont.ttf文件为base64格式： 　　然后将下载的包解压，你会看到一个格式为ttf的文件，注意，我们转换的就是这个文件，此处我们将解压的文件夹叫“原始文件夹”，打开Transfonter网站，按如下步骤操作：点击add fonts按钮添加我们之前提到的ttf文件 ——> 打开以及勾选下图中.
微信小程序引入自定义iconfont字体图标
Kelly Quan的博客
06-29 218
1、开发小程序的时候，需要引入基于项目风格的自定义iconfont字体图标，在微信开放社区找到一个方法可以实现场景，亲测有效。 记录一下： iconfont自定义字体图标
微信小程序使用字体图标的方法
11-30
以下是一个详细的过程，以阿里图标库为例，说明如何在微信小程序中集成并使用字体图标。 1. **下载字体图标**： 首先，访问阿里图标官网（http://iconfont.cn/），通过搜索功能找到你需要的图标。例如，如果你需要...
微信小程序引入字体图标（阿里iconfont）简便方法
BigOrange的博客
01-14 994
用阿里iconfont官方文档的unicode引用方式引入，并没有用，依旧显示的是编码。 如下图右侧↓： <i class="iconfont">&#xe60a;</i> <i >&nbsp;</i> 在小程序中，unicode码无法自动转码，所以不能使用此方式使用字体图标。 微信小程序引入阿里字体图标，简便方法： 在阿里ic...
微信小程序中引入字体图标(阿里iconfont)
yzyblog的博客
10-28 314
引言 这篇博客算是转载的一篇文章，我在写一遍方便熟悉具体流程和方法。支持原博客作者，点击以下链接：微信小程序使用字体图标 ————————–更新一下—————————————————– 最近发现阿里icon font官网中不可以直接在库中下载代码了，这里说一下，从哪里下载代码。 将选好的图标加入库中，然后在库中点击 <添加至项目> 如果没有项目，新建一个项目就好了 然后在你的项...
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4403
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序 iconfont字体图标引入
前端探索
07-09 432
去 https://www.iconfont.cn/ 阿里图标库，选择图标 加入购物车 点击 下载代码， 解压 把iconfont.css文件的内容，复制到.wxss文件里 然后在 .wxml文件里，用类名的形式 添加字体图标 （font-class 引用） 或者在.wxss文件里，用伪元素的形式 添加字体图标（Unicode 引用）； font-family不能丢了，不然不显示；就像3. 类名添加的方式，需要先有 iconfont类一样 ...
小程序引入阿里字体包
ldy-美少女战士
03-06 491
3. 在小程序创建一个font文件夹，新建一个wxss后缀的文件，里面是上一步上传的字体包，可以存放多个，每个字体包可以自定义命名，后面使用的时候要对应上。2. 下载完成找到.ttf后缀的文件重名上传到服务器。4.在需要使用字体包页面的wxss文件引入字体包。5.直接使用class属性就能看到效果了。1.阿里巴巴矢量图库下载阿里字体包。
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7072
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
微信小程序怎么使用字体图标
青阳的博客
05-27 2544
首先将阿里图标下载到本地解压 转换ttf文件 进入https://transfonter.org/，将解压出来的ttf字体文件转化成base64格式。流程如下： 点击下载，得到转换后的压缩包，名为transfonter.org-开头。解压可以得到如下图的几个文件： 将里面的stylesheet.css全部复制到微信小程序中的样式文件：app.wxss，并且在将阿里图库下...
微信小程序（十二）在线图标与字体的获取与引入
不起眼小菜菜的博客
01-23 850
注释很详细，直接上代码……
微信小程序中使用阿里巴巴字体图标
文龙刚的博客
07-12 403
微信小程序中使用阿里巴巴字体图标
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值