vue项目引入第三方icon图标的方式及问题汇总前言：用过element-ui的小伙伴都知道，在日常开发设计中，常常会遇

前言：用过element-ui的小伙伴都知道，在日常开发设计中，常常会遇到在组件库中没有我们想要的图标的情况，因此需要通过第三方图标库去引入到我们的项目中，本文介绍如何在vue项目中引入Iconfont-阿里巴巴矢量图标库，废话不多说，让我们开始吧。

创建项目

首先进入Iconfont-阿里巴巴矢量图标库官网，登陆后，选择资源管理中的我的项目，如图所示。

进入我的项目.png

然后点击右上角的新建项目

点击新建项目.png

项目名称随便写，前缀我这里写my-icon-,跟element-ui风格一致，Font Family默认填iconfont，填好后点击新建。

将图标添加到项目

新建好项目后，我们就把需要的图标添加到新建的项目中，这里我介绍两种方式。

方式一：从Iconfont-阿里巴巴矢量图标库官网添加

在官网找到需要的图标后，点击图标中的添加入库按钮。

添加入库.png

然后点击右上角的购物车按钮，将图标添加到我们刚刚新建的项目中。

方式二：上传图标至项目

在我的项目中，点击上传图标至项目

在这里我们可以将UI小姐姐给的SVG格式的图标上传上去

上传之后需要等待审核，一般三五分钟就通过了。

审核通过啦

导入文件

将图标添加进项目后，我们点击下载至本地

下载完后，解压得到下面这些文件。

在项目的assets文件夹下新建iconfont文件夹，把这些文件拷进去，打开iconfont.css文件可以看到字体的类样式，蓝色框框里的就是我们刚才添加的两个图标的样式，之后可以在这里单独配置某个图标的样式，后面会细说。

添加类选择器并引入

这一步非常重要，如果没有这一步，导入的图标会变成框框

显示成方块.png

在iconfont.css文件中添加下面的代码，类名为我们创建项目时的前缀，属性和上面的.iconfont保持一致即可，最重要的是font-family属性。

[class^='my-icon-'],
[class*=' my-icon-'] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

然后在main.js文件中引入iconfont.css

引入文件.png

引入图标

下面介绍三种引入图标的方式。

方式一通过element-ui组件的自定义图标类名

这里我用el-date-picker日期选择器组件为例子，如果我们想更换自带的图标，可以利用prefix-icon类名。

自定义图标类名.png

<el-date-picker
    type="date"
    placeholder="选择日期"
    prefix-icon="my-icon-riqi"
    v-model="value">
</el-date-picker>

prefix-icon属性的值填我们刚才添加的图标的名称，运行项目，可以看到我们的图标已经被成功引入进来了。

修改字体大小和颜色.png

另外，我们可以单独修改某个图标的属性，如颜色和字体大小等等，只需要修改iconfont.css文件中对应图标的样式即可。例如我们修改图标的颜色为红色和字体大小为14px。

.my-icon-riqi:before {
  content: "\e629";
  font-size: 14px;
  color: red;
}

效果如图。

红色.png

方式二 i 标签引入

在i标签的class属性写上我们图标的名称即可

<el-date-picker
      type="date"
      placeholder="选择日期"
      prefix-icon="my-icon-riqi"
      v-model="value"
    >
</el-date-picker>
<i class="my-icon-riqi"></i>

效果如图。

i标签.png

方式三伪元素方式引入

假如我们想要将图标放在日期选择器的尾部，一种很容易想到的方式是将前面的图标通过设置left属性来达到这种效果，而且单位应该不能用px，因为当组件宽度变化时，图标不会跟着动态移动，用百分比%呢？试一试，看看效果。

.el-input__prefix {
    position: absolute;
    height: 100%;
    left: 90%;
    top: 0;
    text-align: center;
    color: #C0C4CC;
    transition: all 0.3s;
}

将left属性设置为90%，这样在组件变宽的时候，图标确实实现了动态变化。

宽度为320px时：

长.png

宽度为220px时：

短.png

但是效果有点差强人意，而且当宽度更小如100px时，样式就出问题了。

样式错位.png

这时候我想到了用伪元素。我们找到清除图标的类名el-input__suffix，只要在这个类后面加上伪元素即可实现图标固定在日期选择器尾部，而且样式不会受选择器宽度影响。

这里因为是el内部样式，所以得用深度选择器操作。

::v-deep .el-input__suffix::after {
  content: '\e629';
  font-family: 'iconfont';
  color: skyblue;
}

content和font-family是必须填的，效果如图。可以看到图标位置会随着宽度动态变化，而且样式不会乱。

效果1.png

效果2.png

效果3.png

vue项目引入第三方icon图标的方式及问题汇总