【原创】Vue 项目中引入 iconfont 在线链接

参考：https://juejin.cn/post/6910105766422970381

在官网选择自己要用的图标

收藏，生成在线链接，例如：//at.alicdn.com/t/c/font_3863022_apje5i3ccs7.css

在 Vue 项目中引入

• 安装插件

npm install --save vue-iconfont-online

yarn add vue-iconfont-online

• 在 main.js 中引入

import IconFontOnline from 'vue-iconfont-online';
Vue.use(IconFontOnline, {
  url: '//at.alicdn.com/t/c/font_3863022_apje5i3ccs7.css',
  symbol: 'alibaba-',
  fontFamily: 'alibaba-icon',
  fontSize: 22
})

引入多个：

import IconFontOnline from 'vue-iconfont-online';
Vue.use(IconFontOnline, [{
    url: '//at.alicdn.com/t/c/font_3863022_apje5i3ccs7.css'',
    symbol: 'icon-',
    fontFamily: 'iconfont',
    fontSize: 18
  },
  {
    url: '//at.alicdn.com/t/c/font_3863022_apje5i3ccs7.css'',
    symbol: 'shn-',
    fontFamily: 'shni',
    fontSize: 22
  }
])

其中 symbol: 'alibaba-',fontFamily: 'alibaba-icon' 这个前缀的设置在 iconfont 的项目设置中能看到，照着设置即可。

在页面引用

直接在 class 中写入官网标注的名称即可。
<i class="icon-shipinguanli"></i>

Vue 中引入 iconfont 下载：https://blog.csdn.net/HanXiaoXi_yeal/article/details/121008246