微信小程序例子——使用icon组件显示常用图标

最新推荐文章于 2025-11-16 12:56:57 发布
原创 最新推荐文章于 2025-11-16 12:56:57 发布 · 2.8w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Web前端 #互联网 #微信小程序 #编程语言 #前端开发

本文展示了如何在微信小程序中使用icon组件来显示常用图标，提供了效果展示、关键代码，并给出了源代码的百度云下载链接，同时作者提供微信在线咨询，帮助解决使用过程中遇到的问题。欢迎支持和交流。

1、效果展示


2、关键代码

3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1hsNoIK8 密码：sdi0


4、在使用icon组件显示常用图片的过程中有遇到任何问题或者不明白的地方，欢迎添加我的微信进行咨询，感谢支持！微信号：FutureJet


5、觉得不错请打赏，您的十分满意是笔者的无限动力

     

【微信小程序】基础组件-icon图标组件
墨夶的博客
11-22 3564
虽然icon组件提供了多种标准图标，但在实际开发中，可能需要使用自定义图标。icon组件是微信小程序中一个非常有用的组件，它提供了多种标准图标，可以增强用户界面的可读性和交互性。通过合理使用icon组件的属性和嵌套规则，可以显著提升小程序的用户体验。希望本文对你理解和使用icon组件有所帮助。😊。
微信小程序的地图功能应用：小程序领域的地理探索
小程序开发
07-05 1125
想象一下：你打开“XX外卖”小程序，屏幕上一个小蓝点（你的位置）旁边，有个小黄点正在移动——那是骑手带着你的奶茶赶来！这背后就是微信小程序地图功能的功劳。本文将聚焦微信小程序中地图功能的核心技术点（定位、地图展示、POI搜索、路径规划），覆盖从概念理解到代码实战的全流程，帮助开发者快速上手，也让普通用户了解“地图魔法”的原理。本文将按“从概念到实战”的逻辑展开：先讲地图功能的“基础零件”（定位、地图组件等），再用生活例子解释它们如何协作；接着用代码带您实现一个“找附近便利店”的小程序；
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
weixin_60387745的博客
03-07 5317
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
微信小程序自定义导航栏组件：`navigationBar` 下载与安装教程
最新发布
gitblog_01286的博客
11-16 1071
--- ## 1. 项目介绍 **项目名称:** `navigationBar` **作者:** lingxiaoyi **简介:** 此开源项目提供了一个微信小程序的自定义导航栏组件，旨在解决原生导航栏的限制，实现更灵活的设计和功能定制。该组件完美适配各种手机型号，支持高度的自定义，如导航标题、背景色、主题图标颜色以及返回和主页按钮等，并提供了详细的属性和插槽功能来满足不同场景下的需
微信小程序设置 tabbar icon 大小
热门推荐
资深全栈开发工程师
07-09 1万+
将 tabbar icon 图片制作成合适的尺寸：你可以使用设计工具（如 Photoshop、Sketch 等）将图标调整为合适的大小。在 app.json 文件中设置 tabbar 图标大小：在 app.json 文件的 tabBar 字段中设置 iconSize 属性，可以控制 tabbar 图标的大小。因此，建议根据实际需求和设计准则选择合适的图标大小，并进行适当的调整。在上面的示例中，iconSize 属性被设置为 48，这将使 tabbar 图标的大小为 48x48 像素。
微信小程序使用icon图标
沉默老曹的博客
04-03 2519
微信小程序使用fontawesome库使用icon图标，网上有很多教程，按照网上说法制作，引入到微信小程序中，但是验证成功，只能使用部分图标，结果不尽如人意。后面使用阿里巴巴开源。3.在小程序中引入iconfont中生成的代码，这样基本的操作完成了，在小程序中就可以使用了，如果想要增加新的图标，需要更新这部分代码即可。2.将想要使用的icon添加到购物车中，将购物车中的图标添加到项目中，在项目中生成代码。1. 建立账号，资源管理中新建立项目，在iconfont中选中自己想要使用的icon。
微信小程序添加icon图标，iconfont-阿里巴巴矢量图标库引入使用
qq_45763682的博客
07-31 416
copy到你的wxss中，如下，我的是随便贴其它icon，不用在意，你自己的就用你的，这里大小颜色这些，你参考font-size;color 自己改就行，可以全局 ，可以单个内容，不满意再自己写style样式。它会跳转一个页面，将里面内容复制到你的wxss中即可。选中你需要的图标，点击上面的购物车。选中购物车中的图标，点击添加到项目。然后就可以去wxml中使用了。我自己效果图，随便看看就好。跳转页面后，如图点击。
用微信小程序开店之六——小程序组件2：“基础内容”
一只开坦克的程序猿
08-09 649
第六讲：小程序组件2——“基础内容”
微信小程序开发的学习资料收集
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
用微信小程序开店之五——小程序组件1：“视图容器”
一只开坦克的程序猿
08-08 823
第五讲：小程序组件1——“视图容器” 从本节开始，我将逐一为大家介绍微信小程序的基础组件。
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
urge的博客
12-02 934
后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
小程序开发必备icon.zip
10-24
共包含500个图标，每个图标都有对应的png、svg、psd、csh格式，以及常见的16、24.......512等像素，基本能够满足小型网站的图标使用
微信小程序icon图标素材大全
04-06
微信小程序icon图标素材大全
微信小程序icon图标使用详解
代码小疯子
12-03 1万+
icon 在微信小程序中用来显示图标。
微信小程序：图标的使用（icon）
傲笑风的博客
04-19 5235
摘要： 图标主要是用来辅助ui界面的，常用的是√和×，像蓝牙和wifi是否连上的标志，让人直观明了。 icon的参数 组件icon的参数主要有三个，下图所示： （1）type：icon的类型，官方给出了9个，分别为success, success_no_circle, info, warn, waiting, cancel, download, search, clear，而这就个类型分别对应的...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
美奇软件开发工作室
11-06 2283
一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon 2、把需要的图标加入购物车，然后再添加到项目里 3、打开项目，选择“Font class”类型，点击下载至本地 二、创建icon组件 1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...
手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）
2401_84048542的博客
04-07 1932
Java架构进阶面试及知识点文档笔记这份文档共498页，其中包括Java集合，并发编程，JVM，Dubbo,Redis，Spring全家桶，MySQL，Kafka等面试解析及知识点整理Java分布式高级面试问题解析文档其中都是包括分布式的面试问题解析，内容有分布式消息队列，Redis缓存，分库分表，微服务架构，分布式高可用，读写分离等等！互联网Java程序员面试必备问题解析及文档学习笔记Java架构进阶视频解析合集《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》
微信小程序中使用icon
qq_23943923的博客
09-09 4277
一、挑选icon,生成文件 1、打开阿里iconhttps://www.iconfont.cn/选中图标 ,添加至购物车 2.将项目下载到本地 3.下载文件的目录结构 二、转换ttf文件（原因:小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64，然后引用。 进入https://transfonter.org/平台 点击Add fonts，添加iconfont.ttf 3....
微信小程序 图标icon 纯代码分享
2301_79585673的博客
12-30 633
【代码】微信小程序 图标icon 纯代码分享。
微信小程序酒店日历选择组件：支持农历日期显示
首先，要实现一个微信小程序的日历组件，需要使用微信小程序的框架，这个框架主要由四个文件组成： 1. `app.js` - 小程序的逻辑文件，负责小程序的生命周期函数和全局变量。 2. `project.config.json` - 小程序项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值