基於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"屬性。