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"></i> // Unicode格式