引入阿里icon库的方法（font-class 引用）

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

---

前言

阿里矢量图标库是一种常用的前端开发工具，它提供了丰富的矢量图标资源，可以方便地在网页中应用。以下是阿里矢量图标库在前端开发中的应用：

1. 提高用户体验：使用矢量图标可以增加网页的美观度和可读性，使用户更容易理解和操作网页内容。

2. 节省带宽和加载时间：矢量图标是矢量图形，相对于位图图像来说，文件大小更小，加载速度更快，可以节省带宽和提高页面加载速度。

3. 支持多色和透明度：矢量图标支持多种颜色和透明度设置，可以根据需要自由调整图标的颜色和透明度，使其更加符合设计要求。

4. 易于维护和更新：矢量图标可以通过CSS样式进行控制，可以轻松地修改图标的大小、颜色、位置等属性，同时也方便对图标进行更新和维护。

5. 跨平台兼容性：矢量图标是基于矢量图形技术的，可以在不同操作系统和浏览器上保持一致的显示效果，提高了网页的跨平台兼容性。

阿里矢量图标库在前端开发中具有广泛的应用价值，可以提高网页的美观度、可读性和用户体验，同时也方便了网页的设计和维护。

---

要引入阿里的矢量图标库，可以按照以下步骤进行操作：

1. 下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以.zip或.tar.gz等压缩格式提供的。

2. 解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是.svg格式）。

3. 在网页中引入图标：在网页中使用<link>标签引入阿里矢量图标库的CSS文件，例如：

   html复制代码运行

   <link rel="stylesheet" href="path/to/your/iconfont.css">

   其中，href属性指定了阿里矢量图标库CSS文件的路径。

4. 使用图标：在网页中使用阿里矢量图标库提供的类名来使用图标，例如：

   html复制代码运行

   <i class="iconfont icon-xxx"></i>

   其中，icon-xxx是阿里矢量图标库中对应图标的类名。

需要注意的是，以上步骤仅为一般性说明，实际操作时可能需要根据具体情况进行调整。另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。

 

---

 iconfont-阿里巴巴矢量图标库     官网地址

选择自己想要的图标，添加到购物车，选择【添加至项目】

 

 使用【在线链接】生成【Font Class】，也就是通过类样式来使用这些图标

得到这些图标的class样式数据：

粘贴样式数据到项目中去： 【注意要改成wxss！！！】

 因为这些图标都是存在外网上的，所以并没有存在本地，所以不会站多大空间~

 现在，想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件

 页面中使用图标的方法：

<text class="iconfont icon-Pdf" style="font-size: 80px;"></text>

 iconfont icon-Pdf    这两个很重要！

 

 所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了

然后，有个很严重的问题：图标没有颜色

unicode  和  font-class 的图标引用

因为是字体，所以不支持多色。只能使用平台里单色的图标