vue 引入圖示庫

1.開啟阿里相簿，建立一個專案，再去尋找自己想要的圖示，最後下載至電腦。

2.開啟下載的檔案包，如下圖

3.將裡面的部分檔案拷貝至你的專案中，在static 目錄下建立一個資料夾fonts,如下圖

4.開啟iconfont.css,往裡面新增程式碼如下，

[class^="icon"], [class*=" icon"]/*這裡有空格*/
{ font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

整體為下圖

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1530695918383'); /* IE9*/
  src: url('iconfont.eot?t=1530695918383#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1530695918383') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1530695918383#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="icon"], [class*=" icon"]/*這裡有空格*/
{ font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-area:before { content: "\e683"; }

.icon-rectangle:before { content: "\e603"; }

.icon-rubber:before { content: "\e67f"; }

.icon-circle:before { content: "\e608"; }

.icon-line:before { content: "\e605"; }

.icon-faced:before { content: "\e649"; }

5.在專案中運用

在main.js中引入 

import 'static/fonts/iconfont.css'

html裡面這樣使用它 

<i class="ico icon-rubber">

這樣我們就可以自定義自己想要的各種圖示了