vue2.0项目中引入iconfont

在页面开发过程中，经常会遇到需要引入第三方图标库的需求，iconfont是个非常丰富的第三方图标库，到底vue2.0的项目中如何引入它呢？下面具体介绍一下：

(1)首先在搜索栏里输入搜索关键字

search.png

(2)找到自己需要的图标加入购物车

pay.png

(3)把选择好的图标添加到相应的项目中

点击页面上面的购物车，里面装着我们选好的图标，然后选择“添加至项目”，选一个要添加到项目的文件夹，如果没有项目的文件夹，点旁边的添加按钮，新建文件夹。

图标添加至项目.jpg

(4)项目中就有了自己的图标，然后下载到本地，解压后拿到需要的文件。

将项目下载到本地.jpg 选中需要的文件类型.jpg

将上面所需要的文件拷贝到src/assets文件夹下，建一个叫iconfont的文件夹，将上面的4个文件放入。

(5)在项目的main.js中引入图标样式文件

import './assets/iconfont/iconfont.css';

(6)iconfont.css文件中 .iconfont 类 设置我们引入的图标的整体的样式 ，.icon-xxx:before 是我们引入的每一个图标， 我们可以通过在.icon-xxx中写样式，单独设置某一个图标的样式

@font-face {
  font-family: "iconfont"; /* Project id 2537475 */
  src: url('iconfont.woff2?t=1621564547086') format('woff2'),
       url('iconfont.woff?t=1621564547086') format('woff'),
       url('iconfont.ttf?t=1621564547086') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
  content: "\e75f";
}

.icon-mima:before {
  content: "\e630";
}

(7)挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>    //普通标签应用

<el-input
          placeholder="请输入密码"
          show-password
          class="password"
          v-model="password"
          @blur="noPassword"
          prefix-icon="iconfont icon-mima"
  ></el-input>    //element ui标签中应用