微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件

最新推荐文章于 2024-05-09 17:45:53 发布
最新推荐文章于 2024-05-09 17:45:53 发布
阅读量524 收藏 5
点赞数 4
分类专栏： 程序员 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149505/article/details/138006582
版权

3、打开项目，选择“Font class” 类型，点击下载至本地

二、创建icon组件

1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建以下4个文件：

index.json

index.wxml

index.js

index.wxss

2、在index.json里面添加 “component”:true ，作用是声明这一组文件为自定义组件

最低0.47元/天 解锁文章
2401_84149505
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序中使用自定义图标（阿里icon）的方法
10-18
主要介绍了微信小程序中使用自定义图标（阿里icon）的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序使用自定义图标，使用阿里图标库教程
weixin_44235659的博客
07-02 3278
手把手教你在微信小程序中使用第三方图标，如阿里图标库。
2024年最新手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】，阿里三面
最新发布
2401_84689238的博客
05-09 369
1.1 icon 的三个属性icon 的使用简单，它只有三个属性，分别对应上图的每一个图标的大小：通过属性进行设置的颜色，通过进行修改（同css 中的color）1.2 icon 的基本使用更多有趣的内容请自行尝试二、实际项目2.1 微信支付界面支付成功展示界面分析：view标签 —— 操作成功button组件 —— 完成wxss 样式：主要采用flex布局，由控制，进行微调2.2 跳转等待界面。
微信小程序icon图标引入
努力搬砖的小码
08-15 2260
微信小程序引入iconfont图标
微信小程序的按钮怎么添加图标icon？
【猿来入此】
06-27 4346
1. 在你需要添加按钮的页面的json文件中，引入icon组件的自定义组件库。其中，`type`属性表示要显示的图标类型，具体的图标类型可以参考对应的icon组件库文档。`size`属性表示图标的大小，单位为rpx。2. 在页面的wxml文件中，使用``标签来表示图标。3. 将``标签放置在一个``标签内，即可实现一个带图标的按钮。在微信小程序中，可以使用icon组件来添加图标。其中，`/path/to/icon/icon`是你所引入的icon组件的路径。
微信小程序添加icon图标教程
Linlietao0587的博客
12-22 2万+
1 官方自带 icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html <icon type="success"></icon> type一共有8个 2 自定义添加 阿里巴巴矢量图标库 地址 https://www.iconfont.cn/ 2.1 使用 比如：我搜索 爱心 选择点击 购物车 点击右上方的 购物车 添加至项目 我随便选择 一个 demo项目，然后点确认
微信小程序.阿里巴巴矢量图标库iconfont使用
记录 分享 成就
05-25 762
场景 前端图标： Iconfont 介绍 Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。 这种模式的一大优点就是只挑选出需要的图标，不会像其他图标库那样直接下载一整个图标库的内容，尽管你可能只会使用到其中一到两个图标。要知道，有的项目打包上线对大小是有严格要求的，比如微信小程.
微信小程序使用icon图标
猫爪子挠的博客
04-03 879
微信小程序使用fontawesome库使用icon图标，网上有很多教程，按照网上说法制作，引入到微信小程序中，但是验证成功，只能使用部分图标，结果不尽如人意。后面使用阿里巴巴开源。3.在小程序中引入iconfont中生成的代码，这样基本的操作完成了，在小程序中就可以使用了，如果想要增加新的图标，需要更新这部分代码即可。2.将想要使用的icon添加到购物车中，将购物车中的图标添加到项目中，在项目中生成代码。1. 建立账号，资源管理中新建立项目，在iconfont中选中自己想要使用的icon。
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
01-03
以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
微信小程序icon图标素材大全
04-06
微信小程序icon图标素材大全
微信小程序实现自定义加载图标功能
10-18
主要介绍了微信小程序实现自定义加载图标功能，非常不错具有一定的参考借鉴价值，需要的朋友参考下吧
基于AT89C51的外部中断INT0（汇编语言）
Amy的博客
07-09 3319
外部中断 功能： 八个LED灯D1到D8依次循环点亮，按下按键跳转到中断服务程序，此时8个LED灯全部熄灭，D9闪烁三次，然后返回主程序。 仿真图： 汇编代码： ORG 0000H LJMP START ORG 0003H LJMP INSER START: MOV A,#0FEH SETB EX0 SETB IT0 SETB EA MAIN: MOV P1,A LCALL DELAY
iconfont怎么添加新的字体图标？
一入前端深似海的博客
01-12 2万+
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 具体步骤见截图。 1----在iconfont官网找到对应要新增的图标（注销数据） 2----添加入库 3----修改下载到本地新的图标文件名称（必须改成和之前项目文件不一样的名字） 4----将修改好的新的图标文件（4个）已经
微信小程序----自定义加载图标
止于至善
03-08 1万+
效果图 实现思路 首先通过HTML+CSS实现加载动画的静态效果； 根据需求给每个动画设计不同的动画效果。 例如第一个加载图标的静态绘制 1、首先确定动画的盒子宽高； 2、设置盒子中每一个长方形的宽高以及定位（注意：此处需要将长方形的旋转中心点移动到长方形的右侧边终点，方便后期以该点旋转。）； 3、通过长方形盒子的伪元素，设置显示的长方形背景和宽高，同时进行定位。...
微信小程序 icon组件详细介绍
dengliu_2017的博客
07-26 1512
这些是提供的所支持的图标样式，根据需求在此基础上去修改大小和颜色。 主要属性： 使用方式： wxml <!--成功图标--> <icon type="success" size="40"/> <!--安全成功标志图标--> <icon type="safe_success" size="40"/> &lt...
关于 iconfont 在pc上面部分浏览器中显示问题
伟大的路人 的博客
02-06 1万+
icon font 字体图标库的问题 作为前端自定义字体图标库相信大部分人已经使用过了，列举下面一些个问题 自定义图标的时候尺寸控制 导出的图标在其他浏览器上面的尺寸不同 尺寸在倒入的时候自行控制，这个就不必多说了，耐心操作 主要说快速处理导出的时候在其他浏览器上面的问题 先说明一下当前的问题场景，入下图所示 chrome浏览器与主流的高级浏览器基本都是支持的，不存
微信小程序例子——如何使用view组件显示文字
FutrueJet的博客
10-18 7174
适合微信小程序初学者与开发者学习的教程。
微信小程序使用字体图标库
rookie的博客
01-03 1335
在微信小程序项目中需要用到字体图标，所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库，就以此为例来说。 一、去阿里巴巴矢量图标库下载需要的图标 进入https://www.iconfont.cn/，在我的项目中添加自己需要的图标，具体如下 搜索图标后，添加至项目 将项目下载至本地并解压 二、转换ttf文件 将解压后得到的ttf文件拿到https://trans...
微信小程序使用阿里矢量库的iconfont标签会独占一行，怎么处理
07-11
在微信小程序中，使用阿里矢量库的iconfont标签会默认生成一个块级元素，导致独占一行的问题。要解决这个问题，可以通过以下两种方法之一： 1. 使用内联样式：将iconfont标签的display属性设置为"inline"，以将其显示为行内元素。例如： ```html <iconfont class="inline-icon" style="display: inline;"></iconfont> ``` 在上面的示例中，你需要为iconfont标签添加一个class选择器（例如，"inline-icon"），然后使用内联样式将display属性设置为"inline"。 2. 使用自定义CSS样式：在微信小程序的样式文件（.wxss）中添加自定义的CSS样式。例如： ```css .inline-icon { display: inline !important; } ``` 在上面的示例中，你需要将.iconfont标签的class属性设置为"inline-icon"，然后在.wxss文件中添加上述的CSS规则。 无论你选择哪种方法，都可以将阿里矢量库的iconfont标签显示为行内元素，从而解决独占一行的问题。记得根据实际情况调整class选择器的命名和应用范围。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值