uniapp引入阿里巴巴矢量图标库

uni-app中使用阿里巴巴矢量图标库

1、打开网址，链接： 阿里巴巴矢量图标库

2、注册账号并登录，已有账号直接登录

3、选择图标，点击添加入库

4、点击购物车图标，查看添加入库的图标

5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。

6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。

注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。

7、下载代码至本地

8、找到下载的压缩包，解压缩后复制 iconfont.css 文件到uniapp项目的common文件夹中（若没有该文件夹，可以新建一个）

9、去到项目中复制代码，然后打开iconfont.css文件，替换@font-face中的内容。并且在//at前加上https:。

替换前iconfont.css内容：

@font-face {
   
  font-family: "iconfont"; /* Project id 2555092 */
  src: url('iconfont.woff2?t=1621316808304') format('woff2'),
       url('iconfont.woff?t=1621316808304') format('woff'),
       url('iconfont.ttf?t=1621316808304') format('truetype');
}

.iconfont {
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanchuan:before {
   
  content: "\e603";
}

.icon-daohang:before {
   
  content: "\e602";
}

替换后iconfont.css内容：

@font-face {
   
  font-family: 'iconfont';  /* Project id 2555092 */
  src: url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff2?t=1621316773774') format('woff2'),
       url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff?t=1621316773774') format('woff'),
       url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.ttf?t=1621316773774')