阿里矢量图标的三种使用方式整理(uniapp)

article/2025/9/24 3:31:28

iconfont-阿里巴巴矢量图标库

web端iconfont使用

引用方式

        1.unicode 引用 (不支持多色,支持按字体的方式去动态调整图标大小,颜色)

        2.font-class 引用 (unicode使用方式的一种变种,语意明确,容易分辨是哪个icon,本质上还是使用的字体,所以多色图标还是不支持的)

        3.symbol 引用(全新的使用方式,未来的主流,推荐用法。支持多色图标、支持像字体那样来调整样式)

兼容性 unicode > font-class > symbol

引用详解:

方式一、unicode 引用(下载到本地)

①添加想要的图标到库,右上角购物车将图标加入到想要加入的项目中(或者新建的项目中)

②下载项目中图标至本地,解压下载的压缩包,将下载文件放入到static文件夹中(带demo字样的是详细配置说明文件,不用引入)

③引用图标css文件

 运行会报错文件查找失败:'./iconfont.ttf?t=1642736921417'

 是因为在iconfont.css里面要使用绝对路径,不能使用相对路径(举例修改如下图,需要根据自己文件所放位置修改为对应格式路径)

④在需要图标的地方使用图标,类名为iconfont,图标名称也可以通过复制直接拿到

<i class="iconfont">&#xe60e;</i>

运行如图:

方式二、unicode 引用(在线链接)

①复制在线链接

②定义使用iconfont的样式并全局引用

③在需要图标的地方使用图标,类名为iconfont,图标名称也可以通过复制直接拿到

<i class="iconfont">&#xe60e;</i>

运行如图:

方式三、font-class 引用

①拷贝项目下面生成的font-class代码

②引用图标css文件

③使用图标,挑选相应图标并获取类名,应用于页面

方式四、symbol 引用

uniapp不支持symbol多色图标,需要使用工具iconfont-tools进行处理

①以symbol方式下载到本地

 ②安装iconfont-tools(windows+R,cmd打开dos窗口,安装iconfont-tools)

执行命令为:npm install -g iconfont-tools

③将下载压缩包解压,取出iconfont.js文件,将iconfont.js文件放入iconfont-tools文件夹下(iconfont-tools在node安装路径下\node_global\node_modules\内,我是将nodejs安装在F盘下)

④命令提示符执行命令:iconfont-tools,一直回车使用默认设置就好,执行完毕后iconfont-tools文件夹下会生成iconfont-weapp文件夹。

⑤将iconfont-weapp文件夹中的iconfont-weapp-icon.css放至static静态资源文件夹下,并全局引用该css文件。

⑥根据图标实际名称使用图标,注意要带上t-icon。

使用效果如下:


http://chatgpt.dhexx.cn/article/ZadTp0Vd.shtml

相关文章

阿里巴巴矢量图标库

官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库&#xff0c;提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造&#xff0c;设计和前端开发的便捷工具http://www.iconfont.cn 使用方法&#xff1a; 1. 注册账号 …

#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法(保姆级教学,挑战全网最细致的使用矢量图)

iconfont-阿里巴巴矢量图的使用方法&#xff08;保姆级教学&#xff0c;挑战全网最细致的使用矢量图&#xff09; 前言 相信大家在前端开发过程中&#xff0c;需要使用各种奇奇怪怪的小图&#xff0c;可是我们不能总是截别人的图copy吧&#xff0c;我们要做一个优雅的程序员&…

怎么求铅直渐近线

什么是铅直渐近线 当x→a时f(x)→∞&#xff0c;则直线xa是曲线yf(x)的一条铅直渐近线。 怎么求铅直渐近线 在初等函数中&#xff0c;x取定义域的值一定是确定的函数值&#xff0c;不可能趋于∞。 所以x要取没有定义的点。下题函数中没有定一点为x1&#xff0c;令x→1分别求函…

3.6 函数作图与渐近线

本篇内容为函数图像的描绘与渐近线&#xff0c;既然函数作图放在前面&#xff0c;那本篇重点一定是——渐近线。 渐近线 水平渐近线 x→x0时&#xff0c;f(x)→A 一条水平渐近线 两条水平渐近线 函数图像可能没有水平渐近线&#xff0c;但是最多只有两条水平渐近线 铅直渐近…

渐近线(泪滴)能改善信号质量吗?

最近偶然听到前华为射频首席专家何平华老师讲到了这个泪滴问题&#xff0c;在此与大家共享&#xff0c;很多公司的高速规范已经建议去掉泪滴&#xff0c;但是在实际应用中因为客户要求或者个人设计习惯&#xff0c;泪滴等操作经常能在我看到的设计中见到&#xff0c;而渐近线也…

一元函数微分学

文章目录 一 单调与极值1.1 单调性1.2 极值点1.3 判断步骤 二 凹凸性2.1 定义2.2 判别法 三 渐近线3.1 水平渐近线3.2 铅直渐近线3.3 斜渐近线3.4 求法 四 弧微分与曲率五 基础例题点比较渐近线根与零点不等式证明 一 单调与极值 1.1 单调性 y f(x) 在D上有定义。x1,x2∈D且…

高等数学求渐近线

tips&#xff1a; 需要注意x0的情况x0的左边和右边渐近线的问题&#xff0c;上题中x0左边没有渐近线&#xff0c;但是右边有渐近线&#xff0c;这个时候曲线的渐近线是存在的

射影几何----渐近线方程公式

渐近线方程公式&#xff1a; 第一步&#xff1a;一次项和常数项去掉。 第二步&#xff1a;求出中心(x0,y0) 第三步&#xff1a;分解因式

高等数学中如何求渐近线

极限是数学中的一个重要概念&#xff0c;它描述了函数在某一点或无穷远处的行为。而渐近线是指函数图像在无穷远处的一条特殊直线&#xff0c;它与函数图像趋于无穷远时的趋势相似。 求渐近线的方法主要有以下几种&#xff1a; 1. 水平渐近线&#xff1a;当函数在无穷远处的极…

如何画一个简单的波特图(渐近线近似零极点特性)?

如何画一个简单的波特图&#xff08;渐近线近似&零极点特性&#xff09;&#xff1f; 在工程上我们常见下图所示的波特图来描述一个系统开环函数的频率特性&#xff0c;通过零点和极点画出波特图我们可以得到系统是否稳定的结论。 首先讲一下人们为什么要使用波特图&…

渐近线讲解+例题 ,椭圆,双曲线,抛物线,三角函数椭圆,双曲线,抛物线,三角函数

目录 渐近线讲解例题 渐近线讲解例题 三种渐近线意义&#xff0c;主要就是利用极限思维&#xff0c;里面重要的红笔标注&#xff1b; 经典例题&#xff1a; 椭圆、双曲线、抛物线的标准方程与几何性质 http://dy.163.com/v2/article/detail/DGSH79TK0521JEM8.html 椭圆双…

matlab 画渐近线,如何绘制渐近线?

我遵循了一个小教程,它让我接近了我想要的地方,但它并不完全在那里,我不知道如何用它进行下一步。 以下是我目前的数据: 但我不知道如何在这个图中绘制渐近线。在 我在想我需要创建一个名为Y的变量,它是一条垂直线,然后用它来画线?但我不确定这是否正确 在这种情况下,我…

铅直渐近线、水平渐近线、斜渐近线 快速算法 笔记

3min 铅直 水平 铅直渐近线一般出现在没定义的地方&#xff0c;分母不为零可能能用到&#xff0c;水平渐近线是指当趋于无穷时&#xff0c;f(x)会逼近到一个常数 斜渐近线 先求k值再求b值即可快速求解

微积分知识点回顾与总结(四):极值最值,渐近线,弧微分与曲率

微积分知识点回顾与总结&#xff08;四&#xff09;&#xff1a;极值最值&#xff0c;渐近线&#xff0c;&#x1f98a;微分与曲率 1.函数单调性和凹凸性 1.1函数单调性1.2函数的凹凸性 2.极值点3.最值4.渐近线 4.1. 水平渐近线 4.2. 铅直渐近线 4.3. 斜渐近线 5.弧微分6.曲率…

《大数据原理与应用》林子雨:一. 大数据基础

《大数据原理与应用》林子雨&#xff1a;一. 大数据基础 思维导图 PS&#xff1a;边学边记 重点&#xff1a; 理解大数据的概念及其处理架构Hadoop 难点&#xff1a; 掌握大数据处理架构Hadoop的安装与使用方法 第1章 大数据概述 1.1 大数据时代 1.1.1 三次信息化浪潮IBM…