将选中的阿里图标添加至项目中

据说调用阿里图标有三种方式，可惜我只了解两种，我详细介绍下前两种的方法，第三种我给你们百度到别的博主的文章，下拉第三种方法可以看看。
方法一：直接下载图标添加至项目,(如下)

1. 打开阿里图标官网，在搜索框中搜索所需图标名称
   
   

2. 找到合适的图标添加入库，（如果是单张图标，也可以直接下载，在入库的下方有一个下载，选择好所需图标的颜色，点击下载即可。）
   
   

3. 下载后是个压缩文件夹，解压后，将文件夹里的图标全选复制到所需文件夹下，比如uniapp中的static目录下。（如果是单个图标下载，下载后就是单个图标文件，而不是压缩文件，直接复制到对应文件夹下就可以了）

1. 引用图标，一般引用静态图标尽量使用require（）。最好把…换成一个@符号。（注意使用u-image需要加width和height，不然不显示图片。此处我是绑定的user变量来存放图片地址）
   如图，
   
   方法二：将图标添加至项目中（适用于多个图标）以vscode中的vue项目为例

2. 前半段和方法一中的一样，在下载的前一步停住，此处要选择“添加至项目”，如果没有项目，就创建一个和项目名称一样的项目名。点击添加会切换页面，如图，根据图中步骤走！！
   
   

3. 复制地址在页面中打开后是这样的界面↓。全选复制代码。在对应的文件夹中(src/assets/css下)创建一个iconfont.css文件。把代码粘贴到里面
   
   
   

4. 引用iconfont文件里的图标
   在main.js文件中全局引用
   

5. 在所需引用的文件中用标签引用

 <el-submenu index="1" v-for="(item,index) in navMenuList" :key="item.id">
   <template slot="title">
   		// Here!!!!Here!!!!!!
        <i class="el-icon-location"></i>
        <span>导航一</span>
    </template>
    <el-menu-item index="1.1">
        <template>
        	//这里这里！！！！
            <i class="el-icon-lock"></i>
            <span>{{item.authName}}</span>
        </template>
    </el-menu-item>
    <el-menu-item index="1.2">
        <template>
        	//这里这里！！！！
            <i class="el-icon-lock"></i>
            <span>导航</span>
        </template>
    </el-menu-item>
</el-submenu>

方法三：这就到了我不熟悉的第三种，上链接地址
第三种使用阿里图标的方法，转载于原作者网页