vue 项目引入iconfront

1、到iconfront网站创建一个自己的项目

2、搜索图标并添加到新创建的项目中并点击生成代码

3、前置工作已经准备完毕，现在来到vue项目，在asserts/css目录下创建一个iconfront.scss文件

.

详细代码

@font-face {
  font-family: 'iconfont';  /* project id 1813261 */
  src: url('//at.alicdn.com/t/font_1813261_qcj33o0wks.eot');
  src: url('//at.alicdn.com/t/font_1813261_qcj33o0wks.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1813261_qcj33o0wks.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1813261_qcj33o0wks.woff') format('woff'),
  url('//at.alicdn.com/t/font_1813261_qcj33o0wks.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1813261_qcj33o0wks.svg#iconfont') format('svg');
}

i[class^="icf-icon"], i[class*=" icf-icon"] {
  font-family:"iconfont" !important;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

$icf-css-prefix: "icf-icon";

.#{$icf-css-prefix}-link:before { content: "\e66f" }
.#{$icf-css-prefix}-database:before { content: "\e6b8" }
.#{$icf-css-prefix}-table:before { content: "\e7fb" }
.#{$icf-css-prefix}-run:before { content: "\e670" }
.#{$icf-css-prefix}-save:before { content: "\e624" }
.#{$icf-css-prefix}-copy:before { content: "\e637" }
.#{$icf-css-prefix}-format:before { content: "\e600" }

4、在main.js中import ，import './assets/css/iconfont.scss';

5、开始使用

<div class="nav-info" @click="excuteSql"><i class="icf-icon-run"></i>运行</div>