vue中如何使用iconfont图标

vue中引入iconfont图标

引入在线链接文件

如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件

前面的步骤就不赘述了，直接讲如何在vue中引入

• 查看项目在线链接

我 选的是 Unicode 的形式

• 在项目中的 assets/css 文件夹下新建 global.css 文件，复制刚才生成的 font-face 代码，如何定义iconfont 类

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

• 在 main.js 中引入 css 文件

...
import './assets/css/global.css'
...

• 使用

<i class="iconfont">&#xe63b;</i> // Unicode格式