uniapp中如何用iconfont来管理图标集成到我们开发的项目中

于 2025-03-31 18:00:46 发布
阅读量624 收藏 9
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 企业小程序开发 文章标签： uni-app 商城小程序开发 小程序开发 图标 iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19448821/article/details/146873887

我们在开发不管小程序还是APP的过程中都会用到图标这个东西,那么iconfont提供了对应的功能，怎么才能方便的集成到我们的小程序或者APP项目中，目标是方便调用并且方便管理。

首先注册ICONFONT账号

www.iconfont.cn中去注册即可

选择我们需要的图标如下

我们搜索我们需要的图标或者有能力者用AI制作自己开发的小程序项目或者APP项目一套专属的图标，我这里就不分享用AI创作图标的教程了以后再说。仅仅是一个如何使用即可

搜索图标

搜索图标
创建项目

管理项目

管理项目然后我们可以从新命名成我们需要的名字，因为如果都用iconfont的话会冲突。
在这里插入图片描述

下载项目

在这里插入图片描述这里需要注意的两点

1

最低0.47元/天 解锁文章

200万优质内容无限畅学
博客
uniapp实现远程图片下载到手机相册功能
06-24 411
如果你有具体使用的平台（如微信小程序、H5、App）或其他需求，我们可以一起交流学习。
博客
在THINKPHP中如果做模型关联belongsTo时出现同样的表字段报Column ‘user_id‘ in where clause is ambiguous
06-10 56
在模型中明确定义关联关系，避免自动推导字段。// Shopwindow 模型中定义与 Store 的关联这样可以确保关联查询时使用的是store_id而不是user_id。方案适用场景优点缺点方法一需要频繁关联查询清晰、结构化需修改模型文件方法二临时复杂查询灵活、精确控制SQL可读性略差方法三数据量小或偶尔查询简单易懂性能略低（两次查询）
博客
跨平台小程序开发框架对比
05-20 89
通过以上对比分析，您可以根据项目需求、团队技术栈、开发周期等因素，选择最适合的跨平台小程序开发框架。如果您需要具体某个框架的详细使用指南，我可以为您提供更具体的建议和指导。中小型项目：uni-app。
博客
零代码快速搭建微信小程序神器
05-20 416
通过以上内容，您可以根据自身需求选择合适的零代码平台，快速搭建自己的小程序。如果您需要具体某个平台的详细操作指南，我可以为您提供更具体的建议和指导。当前0代码也有不好的地方，例如功能同质化，不能定制，还得看自己的实际应用场景而定。
博客
当通过PHP在线修改文件数组遇到不能及时生效问题
05-19 178
如需具体代码示例或遇到特殊场景，请补充详细信息（如框架、缓存方式、修改文件的代码等），我可以帮你更有针对性地解决！
博客
从新手到高手：小程序开发进阶技巧分享
04-27 797
小程序开发从入门到精通需要经历技术积累、架构优化和工程化实践等多个阶段。
博客
AI与IT工作者：一场关于“替代“的哲学思辨——从工具到共生的文明跃迁
04-01 834
AI不是IT工作者的替代者，而是文明进化的催化剂。当代码生成器写出第一个诗篇，人类将用想象力为技术赋予灵魂。这场变革的终点，是人与机器共同书写的、超越工具理性的新文明史诗。
博客
DeepSeek：代码宇宙的星际导航系统——AI驱动开发的范式革命
04-01 664
DeepSeek不是替代开发者，而是赋予每个开发者。
博客
JavaScript性能优化实践：从微观加速到系统级策略
04-01 559
通过时空折叠思维，我们得以在代码中实现性能的无限逼近最优解。未来的优化将不再局限于单一维度，而是构建一个自适应的"性能生态系统"，让代码在效率与可维护性之间达成动态平衡。
博客
uniapp封装H5实现H5微信支付方法（fastadmin做后端服务）
03-30 664
以上步骤涵盖了从配置微信支付参数到实现FastAdmin后端接口和UniApp前端调用的全过程。请根据实际情况调整代码中的具体实现细节。特别是openid的获取，通常需要通过微信授权获取。
博客
uniapp实现小程序微信支付方法（fastadmin做后端服务）
03-30 788
以上步骤涵盖了从配置微信支付参数到实现FastAdmin后端接口和UniApp前端调用的全过程。请根据实际情况调整代码中的具体实现细节。当然上面仅仅是一个示例，fastadmin默认提供微信支付插件，可以有能力者二次开发或者直接使用。如有需求我们一起交流。
博客
constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)在uniapp中的使用方法解析
03-29 1491
通过在 CSS 中使用和，可以确保微信小程序的内容不会被 iPhone X 及更高版本设备的底部 Home Indicator 遮挡。这样可以提升用户体验，确保内容在不同设备上的显示效果一致。如有开发的需求联系我。
博客
uniapp 封装APP实现微信登录功能（后端Fastadmin）
03-29 1315
在 UniApp 中实现微信登录，并且后端使用 FastAdmin 框架，可以按照以下步骤进行。FastAdmin 是一个基于 ThinkPHP 5 和 Layui 的后台开发框架，我们可以利用其提供的功能来处理微信登录的逻辑。
博客
uniapp开发实战自定义组件形式实现自定义海报功能
03-28 1157
在 UniApp 中实现自定义海报功能，可以通过 Canvas 来绘制海报。Canvas 提供了丰富的绘图 API，可以精确控制文字、图片和二维码的位置。下面是一个完整的示例，展示如何创建一个自定义海报组件。假设你的项目结构如下：自定义海报组件 使用自定义海报组件 在 中使用 ：依赖库为了生成二维码，我们需要引入 库。你可以通过以下方式引入：下载 ：从 qrcode-generator 下载 文件，并将其放置在 目录下。引入 ：在 中引入 文件。Canvas 绘制：保存海报：Pr
博客
uniapp中$refs的用法详解你必须要知道的
03-28 1238
ref属性：在模板中定义ref属性以标识需要访问的元素或组件。this.$refs：在 JavaScript 中通过this.$refs访问定义的ref。生命周期：确保在组件挂载后访问$refs。动态更新：处理动态生成的元素或组件时，确保在元素或组件显示后再访问$refs。数组形式：如果有多个相同ref的元素或组件，$refs会返回一个数组。通过这些方法，你可以在 UniApp 中灵活地使用$refs来访问和操作 DOM 元素或子组件实例。
博客
uniapp如何自定义组件方法和父子组件相互传值的用法和示例代码
03-28 901
如何在UniApp中自定义组件以及父子组件之间的数据传递。我们将创建一个父组件和一个子组件，并实现父子组件之间的数据传递。
博客
uniapp开发中store的基本用法和模块化详解
03-27 801
通过以上步骤，你可以在 UniApp 项目中使用 Vuex 进行状态管理。Vuex 提供了集中式状态管理，使得状态管理更加清晰和可维护。希望这些内容能帮助你在 UniApp 开发中更好地使用 Vuex。如果有任何问题，请随时提问。如果有开发需要也请联系。
博客
uniapp利用第三方（阿里云）实现双人视频/音频通话功能（附完整的项目代码）
03-27 3304
以上代码提供了一个完整的示例，包括FastAdmin服务端生成Token和UniApp客户端实现双人视频/音频通话功能。请确保替换和为你的阿里云RTC服务的实际值。
博客
商城小程序开发必读：解锁月销百万的三大核心功能
03-26 369
功能是骨架，运营是灵魂。成功的小程序需持续迭代功能（如新增“AI穿搭建议”），并通过数据监控（GMV、转化率、分享率）优化策略。建议初期采用“裂变+会员”组合快速起量，中期强化精准推荐，长期布局沉浸式技术体验，形成竞争壁垒。：严格遵循《禁止传销条例》，分销层级不超过三级，佣金基于实际销售而非拉人头。：获取用户数据前需明确授权，遵循《个人信息保护法》。
博客
SQL Server 2022常见问题解答
03-26 851
以上内容涵盖了安装、功能、性能、安全等核心问题。如需更详细步骤，请参考官方文档或联系Microsoft支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值