uni-app添加阿里巴巴图标库图标

1.打开阿里巴巴图标库地址

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

选择需要的图标，加入购物车，添加到项目（需要登录github账户），然后

 

点击确定后，选择下载代码

 

 

 

 2.打开下载的文件夹，找到里面的iconfont.css，把这个文件粘贴到common文件夹里，打开iconfont.css，删除以下代码：

 

 3.在app.vue中引入，

在style标签中加入如下代码

/* 引入图标 */
@import "./common/iconfont.css";

 

 4.使用图标，有两种方式

（1）方式一：使用unicode

在demo_index.html中，选择unicode，

 

 

 在vue文件中使用,添加icon iconfont 两个类，复制对应unicode

 <!-- 使用unicode引入图标 -->
 <view class="icon iconfont">&#xe613;</view>

 

（2）方式二：使用类名

在demo_index.html中，选择 Font class

右键选中图标，查看元素，复制对应的类名

 

 

 

 在vue文件中使用, 在view标签复制刚刚的类名

<!-- 使用类名引入图标 -->
<view class="icon iconfont icon-icon_shezhi"></view>

效果：