1. 在网站https://www.iconfont.cn中,注册账号,在图标管理-我的项目中,可以创建一个新的项目,取名随意。
在图标库里面找自己想要的图标,然后添加到购物车中,完成后再购物车里点击添加至项目。接着在我的项目中下载到本地,此时下载的是一个文件夹,内容如下:
2. 把下载的文件夹内的iconfont.css,iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff 一共5个文件拷贝到工程内。
3. (不强制)用npm安装 stylus和stylus-loader这两个库
4. 需要在main.js里面全局引入iconfont.css文件
import './css/iconfont.css'
5. 在iconfont网站我的后台查看图标,有个复制代码,复制下来,在需要的地方用上
<template>
<div class="navigationBar back">
<div class="left">
厦门<span class="iconfont"></span>
</div>
<div class="search">
<span class="iconfont"></span>搜索酒店
</div>
<div class="right">
<span class="iconfont"></span>
</div>
</div>
</template>
注意。一定要加class="iconfont"属性。