uniapp 引入多个自定义小图标

**

uniapp 引入多个自定义小图标

**
记录自己已知引入自定义小图标得办法，本次以阿里矢量小图标作为范本，当然本文建立在你已经有一个uniapp项目的前提下。
第一步：下载图标
打开阿里图标库官网https://www.iconfont.cn/，

第二步，选择图标，加入购物车
选择自己需要的图标，建议选择多个，一次性加入购物车，避免后期修改麻烦，当然这里需要登录，没有账号的注册一下，注册就不说了

看到购物车有数据就加入成功了
第三步，下载图标
点击下载代码，然后解压，解压出这些

第四步，引入项目
在static下面新建一个font文件夹，把iconfont.css,以及iconfont.ttf复制过去

在新建一个全局css样式，把css样式引入 我是在common文件下新建的，这里大家自己看着办，放在那，取名叫啥都没关系

里面的具体内容，为css里面的内容，当然路径要改一下

@font-face {
    font-family: uniicons;
    font-weight: normal;
    font-style: normal;
    src:url('~@/static/font/iconfont.ttf') format('truetype');
}

.icon {
    color: #999;
    font-family: uniicons;
    font-size: 42upx;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

.icon.uni-active {
    color: #1ca6ec;
}

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

// 下面的样式直接复制
.icon-mianxingcanpan:before {
  content: "\e649";
}

.icon-mianxingpaihangbang:before {
  content: "\e64c";
}

.icon-mianxingshuben2:before {
  content: "\e64d";
}

.icon-mianxingshujia:before {
  content: "\e64e";
}

.icon-mianxingshubenxinxi:before {
  content: "\e64f";
}

.icon-baocun:before {
  content: "\e852";
}

.icon-sousuo:before {
  content: "\e854";
}

复制的内容 要确保和css的一样 不然显示不出来

第五步，全局引入以及使用
在main.js 中加入这句话

import './common/font-icon.css'

然后就可以使用了

效果截图