Vue项目中使用iconfont

首先创建自己的iconfont项目

设置步骤如下：

其中Font Family的值默认就可以，之后添加一些图标到自己的项目中。

下载iconfont到本地

下载到本地之后解压选中下面几个文件

在项目中建立引用

现在项目中建立一个iconfont的文件，把上面几个文件复制到这个文件中：

之后再建一个样式文件，用于项目中使用

同时在入口文件index.scss中引用

到此，整个引用的顺序已经完成，下面进行iconfont.scss中的样式设置：

@font-face {
  font-family: "iconfont";
  src: url('./iconfont/iconfont.eot');
  /* IE9*/
  src: url('./iconfont/iconfont.eot#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('./iconfont/iconfont.woff') format('woff'),
    /* chrome, firefox */
    url('./iconfont/iconfont.woff2') format('woff2'),
    /* chrome, firefox */
    url('./iconfont/iconfont.ttf') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('./iconfont/iconfont.svg#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;
}

.ci-dingdan:before {
  content: "\e8ae";
}

.ci-gengduo:before {
  content: "\e8af";
}

这个路径是你引用文件的路径：

除了引用字体库，还要将其中的iconfont.css中定义的before伪元素全部复制到自己的scss文件中。

是你从下面这个文件中复制过来的

这样就可以在其他文件中使用了，使用规则如下：

 <span class="iconfont ci-gengduo">span>
 // 你会发现所用的引用都要加上iconfont 很麻烦

换一下iconfont.scss中的内容便可：

在使用时不要加添加iconfont了：

<span class="ci-gengduo">span>