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。暂时不想研究。

Logo

前往低代码交流专区

更多推荐