下载

如果你并不是想用 字体图标 ，那么你可以找到你喜欢的图标直接下载 图片格式。SVG是基于XML的矢量图像格式，所以你会看到SVG的选项是 ==复制SVG== 而不是 ==下载SVG==。在这里插入图片描述

我们重点还是说如何使用 字体图标，只有这样我们才可以给他赋color、font-size等属性。

要想使用字体图标，首先将选中的图标添加入库：
然后推荐将你喜欢的字体 添加至项目(添加至项目的好处是可以在云端管理我们的图标，并且是以项目的方式，可以添加团队成员共享这个项目的图标库，不得不说阿里考虑的还是很周到啊；还有一个好处是官方会为你的图标们生成在线版的引用文件，这样简直不要太方便。当然你也可以在添加入库后直接点击下载，但是这样就没有这两个好处咯)
然后到我的项目中查看图标。解释一下：Unicode、Font class、Symbol 是三种不同的字体图标使用方案；在线链接和下载至本地对应的是两种不同的文件引入方式。下面直接开始讲如何使用，看完你就会知道了。
为了更好地了解原理，我们先选择 下载至本地 ，本地是一个静态资源压缩包
- demo_index.html是教程，解释了三种图标方案的区别和使用方法。
- demo.css是demo_index.html的样式文件
- 其余的文件就是这三种使用方案所需要的文件
打开demo.html，==可以看到使用步骤，第一步都是做了一个引入，这里的url其实就可以替换为刚才官网的那个在线链接==

三种使用方案介绍(推荐第二/三种)

这里用的工具是HbuilderX，环境是uni-app(和vue没太大区别)

这是最基本的方案，font-class就是对Unicode方案的封装

这里可以只引入ttf、woff、woff2等任一格式的文件(做测试不想写太多代码，几种格式是为了兼容不同浏览器，关于格式可以参考此链接，解释几种字体图标的格式)，~@代表根路径(vue里的语法)
- 关于几种格式是如何做到不同浏览器兼容的，可以看此链接：

这种方案，需要引入iconfont.css，打开iconfont.css文件可以看到下图，这就是封装了Unicode的使用步骤。其依赖了Unicode方案的所有文件，使用时只需要添加class属性即可，这种方案最简单操作，力荐

用法超简单

<!--App.vue中引入样式文件，用线上链接即可-->
<style>
	@import "xxxxxxx/iconfont.css";
</style>

<!--class方式引用-->
<div class="iconfont icon-qianbao"></div>

这种方案是官方最推荐的一种啦，也是未来的主流，支持颜色。文章看到这想必兄弟们也应该能自己使用啦，因为博主要下班啦，所以这里就不示范啦。(实在不明白的话可以进群畅聊哦)