uni-app 引入阿里巴巴矢量图标详细步骤

引入图标步骤

1. 选择需要的图标加入【购物车】

2. 点击购物车选择【添加至项目】 

3. 选择要添加到的项目，如果没有项目则新建项目

4. 点击【下载至本地】 --》 点击【生成代码】

5. 下载后解压选择这四个文件                                           

6. 拷贝到 uni-app 中的 static 文件中                                  

7. 在 iconfont.css 中把 @font-face 中的内容替换成新生成的代码

8. 在App.vue中引入 iconfont.css                                        

9. 在页面中使用图标

在 class 中定义 iconfont 

方式一：

1. 在矢量图库中选择【Font class】复制代码                                              
2. 在页面中的 class 粘贴复制过的代码

方式二：

1. 选择【Unicode】复制代码                                                                           
2. 在页面组件的内容部分粘贴代码

<text style="font-size: 100upx;">图标：</text>
<-- 引入方式一 -->
<text class="iconfont icon-a-business-icon-AlibabacomOnlineTradeShow"></text>
<-- 引入方式二： -->
<text class=" iconfont">&#xe823;</text>

使用彩色字体图标

方式一

1. 在资源管理中点击我的项目
2. 点击项目设置
3. 选择字体格式为彩色                                        
4. 其余步骤和图标引入步骤类似

方式二

1. 安装：npm install -g iconfont-tools
2. 运行：iconfont-tools（在解压过的文件目录中 cmd）
3. 引入：
   1. 把 iconfont-weapp 中的 iconfont-weapp-icon.css 复制到 静态资源中
   2. 在 App.vue 导入文件
   3. 在页面中的 class 中写入 t-icon-shuju（t-开头是因为运行时设置的 css 文件的 prefix 为 t-icon）

<view class="t-icon-shuju"></view>

注：除了以上步骤其他步骤均没有改变