基于vue的iconfont的使用和优化

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">&#xe877;</span>
      </div>
      <div class="search">
        <span class="iconfont">&#xe632;</span>搜索酒店
      </div>
      <div class="right">
        <span class="iconfont">&#xe62f;</span>
      </div>
    </div>
</template>

注意。一定要加class="iconfont"属性。