1.脚手架使用
- 下载文件包上传到项目中
- 在main.js中全局注册
- 页面中使用
//demo.vue
<span class="icon iconfont"></span>
2.单页使用
使用iconfont字体,但是由于项目要求无法使用脚手架搭建,根据官方文档描述如下操作(此方法使用了symbol 引入-官方推荐,除此之外还有font-class引入和unicode 引入)
详情查看官方文档
- 下载资源包导入
- 使用script标签引入
- 编写icon样式到公共css文件当中
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
- 挑取相应图标和类名
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>