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">

这样我们就可以自定义自己想要的各种图标了