原生微信小程序中使用-阿里字体图标-详解

已于 2023-12-21 20:37:09 修改
阅读量1.6k 收藏 8
点赞数 29
分类专栏： 原生微信小程序 文章标签： 微信小程序 小程序 前端
于 2023-12-19 19:23:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yt0601/article/details/135089251
版权

步骤一

1、打开阿里巴巴矢量图标库

网址：iconfont-阿里巴巴矢量图标库

2、搜索字体图标，鼠标悬浮点击添加入库

 3、按如下步骤添加到自己的项目

 

步骤二

进入微信开发者工具

1、创建 fonts文件夹 > iconfont.wxss 文件，将刚才的代码复制进去

2、在 app.wxss文件 中引入路径

3、在页面中使用

 结束 页面中会显示了！！！

随风去山海
关注
专栏目录
一篇文章 - 轻松入门微信小程序
zyh1841474614的博客
01-10 3934
以前学习微信小程序开发时候的笔记,希望能对大家有帮助
微信小程序学习指南
weixin_30446197的博客
12-13 3393
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
微信小程序使用字体图标的方法
10-16
主要为大家详细介绍了微信小程序使用字体图标的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
阿里图标字体如何使用
最新发布
y1059477028的博客
08-19 326
方式三：Symbol 引用（几乎不用，可忽略）方式二：font-class 引用。方式一：Unicode 引用。
微信小程序中使用阿里字体图标（无需下载字体文件到本地）
qq_43241161的博客
03-17 692
在微信小程序中使用iconfont字体图标（无须下载字体文件到本地） 使用过iconfont图标的老铁们可以直接看第6步 进入阿里字体图标官网，在搜索栏中搜索自己需要的图标 2.加入到购物车后，点击购物车 3.点击添加至项目 4.点击添加项目出现如下图所示，如果没有项目可以新建项目，有项目就直接选择 5.点击上图的确定按钮后，会跳转到如下图所示页面，点击复制代码 6.重点来了，将复制的...
如何在微信小程序中使用阿里字体图标
aomiano55778的博客
08-16 323
第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标。 如这里需要一个购物车的图标，流程为：搜索“购物车”图标 ---> 点击“添加入库” --> 点击购物车进入购物车 --> 点击下载代码按钮。 点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容： 第二步：转换...
微信小程序使用阿里巴巴字体图标
weixin_42606458的博客
08-28 749
第一步：去iconfont下载所需要的字体图标  进入阿里图标官网http://iconfont.cn/，添加自己所需要的图标，然后点击下载代码，解压出来如下：  第二步：转换.ttf文件  进入https://transfonter.org/平台，将解压出来的.ttf字体文件转化成base64格式。流程如下：  点击下载，解压可以得到如下图的几个文件： 第三步：微...
微信小程序icon组件使用详解
08-28
总之，微信小程序的`icon`组件提供了灵活的方式来展示各种图标，无论是使用系统预设图标还是引入自定义图标库，都能满足开发者在界面设计中的不同需求。通过熟练掌握`icon`组件的使用，可以提升小程序的用户体验，使...
微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程
weixin_49030317的博客
05-13 2127
三、视图层概述 、 框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 WXSS(WeiXin Style Sheet) 用于描述页面的样式。 组件(Component)是视图的基本组成单元。 四、WXML语法 1.wxml概述及作用 WXM.
Ubuntu20.04 安装微信 【deepin-wine方式极简安装】推荐，两行命令就解决了。
TAO的博客
11-19 931
Ubuntu20.04 安装微信 【deepin-wine方式极简安装】推荐，两行命令就解决了。
微信小程序中使用字体图标,解决字体图标包过大的问题
weixin_42657666的博客
06-29 1948
通过使用远程加载字体图标,解决包过大的问题
小程序中使用阿里字体图标
samfung09的博客
12-25 354
相信有这个需求的都在其他项目中用过阿里图标，所以这里就跳过怎么去找阿里图标。 1、 找好了图标之后，直接下载到本地   2、 点击查看在线连接 复制代码   3、 将刚才下载好的字体图标项目解压，找到 iconfont.css ，打开，然后上一步复制的代码覆盖下图红线部分   4、 将修改后的 iconfont.css 全部内容复制到 wxss 中，然后在 ...
如何在微信小程序中使用字体图标
单眼皮的小熊
10-14 5350
方法一：将字体url转换为base64的格式后使用 　　第一步，下载需要的字体图： 　　打开阿里巴巴矢量图标库，选择自己需要的图标添加到购物车，然后点击购物车下载代码： 　　第二步，转换iconfont.ttf文件为base64格式： 　　然后将下载的包解压，你会看到一个格式为ttf的文件，注意，我们转换的就是这个文件，此处我们将解压的文件夹叫“原始文件夹”，打开Transfonter网站，按如下步骤操作：点击add fonts按钮添加我们之前提到的ttf文件 ——> 打开以及勾选下图中.
微信小程序使用iconfont字体图标
www_lyh_624的博客
04-04 375
我是一般直接 下载到本地 其实也就这些文件用的到 把iconfont.css里面的内容直接弄到app.wxss里面，记得改路径，因为字体图标文件我们已经放到了font文件夹里面。 然后就可以直接像下面这些使用它们了。 ...
微信小程序——使用阿里巴巴UI字体库
weixin_44710964的博客
03-01 1214
对于只有一个ui的当然可以直接从阿里巴巴ui库上把UI直接下载下来使用 可是对于比较多的ui使用，我还是推荐用UI的字体引用来使用，这样方便灵活，可以更加便捷地修改icon的颜色和大小 首先进入阿里巴巴ui库，找到想要的ui，加入购物车 收集完自己想要的UI后点击右上角的购物车按钮 弹出这个，然后可以新建一个项目名，把收集到的UI放入这个项目中 然后跳转到了我的项目的网页，点击下载字体库到本...
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4659
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
小程序字体图标使用
天天的博客
12-30 154
1 就是将字体库的css 原封不动复制到 static 目录下 2， 引入就行了 3 ，使用的话，和原来一样！ 参考例子使用就行了，和原来字体图片没啥区别
小程序使用字体图标
aaron9185的博客
07-09 3945
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步：下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为：搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值