vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  1. 进入Iconfont(https://www.iconfont.cn/)

  2. 找到自己的项目->更多操作->编辑项目
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  3. 修改前缀,之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  4. 将icon文件下载到本地
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  5. 将下载下来的文件解压后,找到目录下的iconfont.css文件,然后做如下修改
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  6. 将下列iconfoot文件拷贝到项目里面就可以了
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  7. 在vue的Main.js 里面引入iconfont,在elementUI的css之前引入,我放到之后引入,elementUI的icon就不显示了
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)

  8. 之后就可以复制代码,然后像使用elementUI里面一样使用啦。(例如:icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”),如果没有显示,重启一下项目 npm run serve 。
    vue引用阿里云iconfont使用icon图标(elementUI图标太少)
    参考:https://www.jianshu.com/p/a6b54662753b