mint-ui设置icon

mint-ui设置图标
1.https://www.iconfont.cn/随便找几个图标加入购物车，然后下载代码，，其中可能要登录，不用花钱
2.下载的文件叫download.zip，解压后有很多文件css、eot、svg、ttf、woff、woff2、js,将文件复制到项目所在目录，我是vue项目，我复制到src目录下了，新增了一个叫做font的目录
3.main.js中import './font/iconfont.css'
4.vue文件中<i class="iconfont icon-jinggao"></i>
      this.$toast({
        message:'数据不足', 
        iconClass: 'iconfont icon-jinggao', //'mint-toast-icon mintui mintui-field-warning', 
      })
能看到警告图标，toast中也能出现警告图标，但是警告图标太小，
5.要想改变图标大小，可以到iconfont.css中修改

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

其中font-size修改为想要的大小，也可以使用rem单位，不过这是整体修改，

友情链接：

iconmoon，https://icomoon.io/

阿里巴巴矢量图库，https://www.iconfont.cn/home/index

相关知识

svg、iconfont

制作工具：

据说用Photoshop（需要 save-ps-to-svg1.0.jsx脚本）& Adobe Illustrator可以制作svg转iconfont。暂时不想研究。