如何将阿里的icon引入 uniapp，一篇文章就够了，建议点赞收藏
哈喽哈喽，我是你们的金樽清酒。我们都知道在做小程序呀，app，网页的开发呀都离不开UniApp它由DCloud（HBuilder X的开发者）推出，旨在帮助开发人员通过一套代码基础构建同时适用于多个平台的应用程序。那我们今天用的开发工具就是HBuilder X。
什么是HBuilder X
HBuilder X是一个集成开发环境（IDE），主要用于Web和移动应用程序开发。它由DCloud开发，这是一家专注于Web和移动应用开发工具的中国公司。HBuilder X以其支持各种Web技术和框架而闻名，使其成为在不同平台上工作的开发人员的多功能工具。
HBuilder X的主要特点包括：
- 多平台支持： HBuilder X允许开发人员为各种平台创建应用程序，包括Web、移动（iOS和Android）和桌面。
- HTML5开发： 它广泛支持HTML5、CSS和JavaScript，适用于Web开发。
- 移动应用开发： HBuilder X支持使用流行的Vue、React和Angular等框架开发移动应用程序。
- 内置模拟器： 该IDE包含一个模拟器，使开发人员能够在开发环境内直接预览和测试其应用程序。
- 代码辅助和完成： HBuilder X提供代码完成、语法高亮和智能代码建议等功能，以增强开发工作流程。
- 版本控制集成： 它支持与Git等版本控制系统集成，使开发人员能够高效管理其源代码。
- 插件系统： HBuilder X具有插件系统，允许开发人员通过附加功能和工具扩展其功能。
- 跨平台开发： 开发人员可以使用HBuilder X进行跨平台开发，使其能够一次编写代码，然后在多个平台上部署。
值得注意的是，HBuilder X在中国的开发社区中特别受欢迎。如果您考虑使用HBuilder X，重要的是检查最新的功能、更新和社区支持，因为软件环境可能迅速发展。此外，需要注意还有其他适用
如何学习HBuilder X 最好的方法永远是看开发文档
我们可以在浏览器上搜uniapp
点进去就可以看到官方的文档，十分详细清楚。然后我们要安装HBuilder X,点击文档上方的HBuilder，就可以看到如何安装和使用的文档啦。有兴趣的小伙伴可以仔细的研究一下。
在这里我下载好了，并建了一个项目，其实它的每个页面跟vue很像，基本上语法就是vue，但是有更多强大的功能。
iconfont 阿里巴巴矢量库
- Iconfont（阿里巴巴矢量图标库）： Iconfont 是阿里巴巴推出的一款矢量图标库，提供了丰富的矢量图标资源，涵盖了各种主题和风格。开发人员可以通过 Iconfont 在其网站、应用程序等项目中使用这些图标，而无需担心图标的清晰度和适应性。
- 使用 Iconfont： 要在项目中使用 Iconfont 图标，通常需要将相关的图标字体文件或链接嵌入到项目中，并使用相应的 CSS 类将图标应用到 HTML 元素上。这样，开发人员可以轻松地在项目中引用和调整这些图标。
如何用iconfont (看文档)
-
- 首先，我们又得来到iconfont，阿里巴巴矢量库得官网。
我们搜索iconfont的话，就可以来到这个网站。
可以看到，这里有很多icon图标供我们选择，自己钟意哪个就带走吧。
-
- 阿里特色，添加购物车
就像逛淘宝一样，把你想要得添加进购物车。举个例子，我需要几个小猫得icon图标，那我就把鼠标移到上面，点击这个像购物车一样的图标，就添加进购物车啦。这里我就多添加几个。
- 3.清空购物车
在选择完我们的图标之后，在右下角有个购物车的角标，我们要去清空购物车并拿到我们的icon图标啦
点击那个冒红点的小购物车
添加至项目
可以新建项目，也可以新建项目。
将添加至项目的icon引入HBuilder X
- 1.在iconfont中点击下载到本地
这里可以看到我们已经下载好了
然后将文件解压
拿到文件后，改一个简单的名字，并放在我们项目的根目录下，可以用一个文件夹装着 在这里我给它取名为icon-font，并在根目录下建了一个common，放在common里面。
然后我们就可以看到icon-font的几个文件。其中第一个第二个是可以删除的，这是展示的小demo的css和thml。 有了这些文件之后，接下来，我们要全局引入样式，有两种方法。 第一种在app.vue的样式里面引入我们的comon文件夹下的icon-font里面的iconfon.css。 输入./会有快捷提示
在这种引入的样式下，我们来到iconfont，选择Unicode
然后将鼠标移到你需要的icon，点复制代码。
在你需要的vue结构中，写一个类名class="iconfont",然后闭标签中间就是你刚才复制的代码。 然后你就能在页面上看到你的icon图案了。
第二种方法，font class的引入 首先，来到iconfont,点击Fontclass
点击复制此代码，这是我们css样式的代码，同样在app.vue里面引用(在复制代码之前要点击那个点击更新代码)，然后再复制 在app.vue中这样引入
我们从iconfont上复制的是https:后面的，所以我们需要加上https: 然后是图标的引用啦。我们在点击了Font class之后，将鼠标移到icon图标上，复制得到的是一个类名，写在原来的类名后面
比如这个icon-kitty就是我们复制的类名。 看，最终我们的icon图标就引用完啦。
注意
css样式只需要一种引用方法就行了 引用图标也是两种选其一，引用的样式和方法是可以混用的。好啦，讲了那么多，终于也告一段落了。具体更多的用法其移步官方的开发文档。如果觉得有帮助的话就点赞收藏一下咯。