十六、小程序如何引用阿里图标

uni-app小程序图标管理:三种远程引入iconfont方案详解 在前端开发中,图标资源管理是构建用户界面的基础环节。传统方案通常需要将字体文件下载到本地项目,这不仅增加了包体积,也带来了跨平台路径和更新维护的复杂性。其核心原理是通过CSS的@font-face规则或SVG的<use>元素,实现对远程图标资源的动态引用,从而实现资源与代码的解耦。这种解耦的技术价值在于显著减小了应用包体积,并支持图标的远程热更新,对于包体积极其敏感的小程序场景尤为重要。在uni-app多端开发框架中,图标方案的选择直接影响到开发体验、性能表现和跨端兼容性。本文聚焦于无需下载文件的远程引入方 阅读详情

阿里图标

1、以项目举例可创建添加多个图标应用

请添加图片描述

2、处理我们项目中的图标(这里我习惯用Font class 一会要用到)下载到本地

请添加图片描述

3、解压缩 复制到我们项目代码的文件夹里 (只需四个即可 iconfont的css、ttf、woff、woff2)
static下新建fonts文件放置图标(这里我用uniapp微信小程序举例)

请添加图片描述

4、修改App.vue配置全局可用图标css (注意路径引用iconfont.css)

请添加图片描述

5、单页面引用(注意class名字 后半部分对应 步骤2 的 Font class)

在这里插入图片描述

<view class="iconfont icon-yingyezhizhao-copy"></view>

6、修改样式(优点iconfont批量设置样式 icon-yingyezhizhao-copy可单独设置样式)

.iconfont{
		font-size: 20px;
		color: darkred;
		margin-right: 10px;
	}

在这里插入图片描述

7、(补充)后续图标若再添加或改动 直接步骤1 2 3 下载覆盖源码即可

uniapp整合iconfont图标库:高效定制tabBar动态图标方案 本文详细介绍了在uni-app项目中整合阿里巴巴矢量图标库(iconfont)来高效定制tabBar动态图标的完整方案。通过使用字体图标替代传统图片,开发者可以轻松实现图标矢量缩放、CSS动态控制颜色与大小,并显著提升开发效率与维护性。文章提供了从图标选取、Unicode转换、pages.json配置到跨平台(特别是微信小程序)兼容性处理的实战步骤与原理剖析,帮助开发者构建一套灵活、高性能的底部导航栏图标体系。 阅读详情

相关推荐

uniapp结合iconfont实现动态tabBar图标切换与颜色自定义

本文详细介绍了如何在uniapp项目中集成iconfont字体图标,实现tabBar图标的动态切换与颜色自定义。通过配置pages.json文件,开发者可以灵活控制每个tab项的选中与未选中状态,利用矢量图标的优势提升UI的灵活性与维护性。文中还特别指出了微信小程序的兼容性问题,并提供了使用动态图片路径的可靠备选方案。

weixin_28487433的博客 402

微信小程序使用自定义图标,使用阿里图标库教程

手把手教你在微信小程序中使用第三方图标,如阿里图标库。

weixin_44235659的博客 4446

微信小程序|小程序自定义底部导航栏

小程序底部导航栏组件,实现多tabBar,自定义凸起

商务合作 / 项目定制 / 学习交流。个人vx:lovely_wml 1万+

【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程

【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程

weixin_60387745的博客 5392

区块链技术在碳足迹数据存证与溯源中的应用深度解析

消费者扫描产品上的二维码,即可通过区块链浏览器查询到该产品的数字碳标签,并追溯其从茶园到货架的每一步碳足迹数据,以及这些数据是如何被智能合约自动计算和认证的,从而建立起强大的品牌信任。如果说哈希链解决了数据的“存”与“证”的问题,那么智能合约则解决了数据“用”与“管”的自动化问题。综上所述,虽然针对“碳足迹数据可追溯性”这一特定应用场景的公开、标准化的性能基准案例尚不丰富,但现有研究和企业级解决方案(特别是联盟链)已经证明,通过合理的技术选型和架构设计,区块链的性能可以满足实际商业需求。

百态·数智思维 | 聚焦大数据、量化与未来AI 1106

如何用谷歌插件Apollo.io高效开发客户?手把手教你避开常见坑点

本文详细介绍了如何利用谷歌插件Apollo.io高效开发外贸客户,包括核心功能解析、免费额度最大化利用策略、多插件协同技巧以及常见陷阱规避方法。通过Apollo.io的智能匹配算法和庞大数据库,外贸从业者可以精准锁定目标客户,提升开发效率。

banana的博客 885

微信小程序中如何使用阿里云iconfont图标

在小程序根目录创建iconfont.wxss文件,将浏览器中的代码复制,粘贴到文件中。在项目中,点击Font class按钮,点击查看在线链接,生成css文件。在iconfont中查看图标名称(可以自定义,瑶重新生成css文件)在app.wxss文件中引入iconfont.wxss文件。创建一个项目(进入我的项目,点击创建项目)在图标库中挑选自己需要的图标,点击购车按钮。将购物车中的图标添加到自己的项目中。选好后,点击右上角购物车 按钮。将复制的url在浏览器中打开。输入相关数据,创建项目。...

m0_62524243的博客 1024

AR Tag 与 ROS:从基础部署到机器人视觉定位实战

本文详细介绍了AR Tag技术在ROS环境下的部署与应用,涵盖从基础原理到机器人视觉定位的实战技巧。通过分析AR Tag的特征提取、位姿解算等核心技术,结合ROS工具包`ar_track_alvar`的配置优化,帮助开发者实现高精度的视觉定位系统。文章还分享了深度相机配置、坐标转换及性能优化等实用经验,适用于仓储机器人、物流分拣等场景。

weixin_33146151的博客 180

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

一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2、把需要的图标加入购物车,然后再添加到项目里 3、打开项目,选择“Font class”类型,点击下载至本地 二、创建icon组件 1、新建my-icon文件夹,用来保存组件。在my-icon文件夹下分别创建...

美奇软件开发工作室 2466

SAPGUI excel 导出时遇到的运行时错误:STRING_SIZE_TOO_LARGE

当报表导出需求远超单一 XLSX 文件的物理承载力时,与其在 SAPGUI 中硬拼 2 GB 限制,不如把分页、过滤、流式写入作为设计前提。掌握 ABAP2XLSX 或 CSV + Power Query 等工具链,既能满足审计合规,又能让应用服务器远离的噩梦。祝你在下一次导出海量数据时,既高效又优雅。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 639

实战:RK3568 Android14 点亮 LVDS 屏幕

4组数据 (D0~D3) + 1组时钟 (CLK)。最大支持 1280x800 @ 60Hz。8组数据 (Even03, Odd03) + 2组时钟。支持 1080P 及以上。/ {/* 背光与电源 *//** 关键配置:数据格式映射* 可选值: "jeida-18", "jeida-24", "vesa-24"* 6位屏选 xx-18, 8位屏选 xx-24* 颜色不对(偏色/底片效果)就换 VESA <-> JEIDA*/

qq_33427070的博客 1165

小程序引入阿里云矢量图库图标

小程序引入阿里云矢量图库图标

ITKidKid的博客 1712

多模态目标检测综述介绍及框架提供

多模态目标检测是计算机视觉领域的前沿方向,旨在通过融合不同传感器或数据源的信息(如可见光、红外、深度等),提升复杂场景下目标检测的准确性和鲁棒性。

Limiiiing的博客 4587

微信小程序——使用阿里巴巴UI字体库

对于只有一个ui的当然可以直接从阿里巴巴ui库上把UI直接下载下来使用 可是对于比较多的ui使用,我还是推荐用UI的字体引用来使用,这样方便灵活,可以更加便捷地修改icon的颜色和大小 首先进入阿里巴巴ui库,找到想要的ui,加入购物车 收集完自己想要的UI后点击右上角的购物车按钮 弹出这个,然后可以新建一个项目名,把收集到的UI放入这个项目中 然后跳转到了我的项目的网页,点击下载字体库到本...

weixin_44710964的博客 1422

OpenOCD入门到精通:第 4 章 配置文件体系详解

本文深入解析OpenOCD配置文件的体系结构和工作机制。首先介绍了配置文件的搜索路径优先级和加载顺序,以及配置阶段与运行阶段的区别。然后详细分析了interface配置文件的适配器参数调优方法,包括ST-Link、CMSIS-DAP和FTDI等常见调试器的配置示例。最后重点讲解了target配置文件的核心结构,包括TAP声明、目标创建和工作区设置等关键步骤,并以stm32f1x为例展示了完整的配置流程。通过本文可以全面了解OpenOCD配置文件的分层设计理念和参数化配置方法。

从事嵌入式linux android驱动开发,拥有全栈能力 594

用 ABAP CDS 把树建起来:Hierarchy 的建模、调试与消费全流程

CDS Hierarchy 将树形数据结构作为一等公民引入 ABAP 开发,通过定义父子关联、根节点条件和兄弟排序规则,让数据库原生支持层级查询。相比传统递归处理方式,它能避免性能瓶颈,提供$node系统字段描述节点结构信息,并支持与SAP UI框架无缝集成。这种方法简化了组织架构、成本中心等业务场景的层级数据处理,使开发人员能够专注于业务逻辑而非底层实现。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 205

微信小程序导航栏

pages:设置页面路径及窗口表现,即小程序中每一页的路径和导航栏样式,配置完成之后,只有配置的页面才有配置的功能globalStyle:设置默认页面的窗口表现,即小程序中的全局配置,配置完成之后,全部页面都有一样的功能pages和globalStyle中的样式一致,作用域和级别不一样,页面中配置项会覆盖 globalStyle 中相同的配置项页面路径,和之前讲图片标签时的路径使用方法一致样式,所有的局部样式配置,必须在style里面才能生效导航栏标题文字内容,字符串类型。

gannimeiwent的博客 1945

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

小程序——小程序的前端开发

一、辅助工具下载 在有ui设计图的情况下如果是自己硬去写一定会和ui设计图差别很大,推荐软件:微信小程序前端开发者工具 提取码:cam7 网盘链接 可以输入提取码后直接下载。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高工作效率,减少前端布局的编写工作。 微信小程序前端开发者工具使用教程 教程演示过程充值了vip 其实只要有了固定的格式很多汉字或者图片开发者自己输入就行 ...

OuOcnAh9 623

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)

小程序开发中的全局配置文件是app.json,它位于小程序的根目录下。这个文件非常重要,因为它包含了小程序的一些基础信息和全局配置。

小白的大数据之旅的博客 5901

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

微信小程序开发之全局配置与页面配置

全局配置与页面配置相关知识点,包括导航栏、下拉刷新效果。上拉触底加载数据效果、底部tabBar实现页面的快速切换效果,综合案例本地生活首页的初步实现

人生处处是围城,一切都是最好的安排! 3865

喵 ~ 小程序搭建记录

喵 ~ 小程序搭建记录

YZRHANYU的博客 578

微信小程序开发初学:全局配置及页面配置

菜单栏:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。(4)selectedIconPath:选中时的图标,不支持网络路径,position 为 top 时不显示。(3)iconPath:图标路径,不支持网络路径,position 为 top 时不显示。(1)pagePath:页面路径,必须在pages文件夹中先定义,tabBar位置,仅支持top(顶部)和bottom(底部)

2401_89308058的博客 1189

微信小程序开发从零基础到项目发布的全流程实战教程(五)

rpxCSS 盒模型是所有网页布局的基础概念。| Margin |总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right在小程序中,默认情况下大多数元素为块级元素(display: block),占据整行宽度。特性marginpadding所属层级外部空间内部空间是否受背景影响否是(背景延伸至此)是否可设负值✅ 可。

Terio的博客 582

微信小程序开发初学:全局配置及页面配置(1)

菜单栏:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。(4)selectedIconPath:选中时的图标,不支持网络路径,position 为 top 时不显示。(3)iconPath:图标路径,不支持网络路径,position 为 top 时不显示。未选中的tab文字颜色,仅支持十六进制颜色表示。选中的tab文字颜色,仅支持十六进制颜色表示。(2)text:文字内容,

2401_84009929的博客 606

微信小程序学习笔记

一个很好的图标下载网站: Iconfont-阿里巴巴矢量图标库,可以下载很多图标资源 https://www.iconfont.cn

GXQ的博客 380

【微信小程序】03 - 尚硅谷微信小程序教程总结

【微信小程序】03 - 尚硅谷微信小程序教程总结

qq_43350524的博客 1426
上一篇: 十五、微信开发者工具在软件HBuilderX VScode等运行下无反应
下一篇: 十七、小程序报错 真机调试预览失效 Error: Illegal Buffer
Ming-Afresh
博客等级 码龄6年 1万+粉丝 63原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值