Element-ui中组件图标自由替换成自己想要的图标

在使用了Element-ui前端UI组件开发后，经常会遇到UI提的Element-ui自身的图标不符合相关的需求，或者是样式风格不搭，这时候就需要我们手动去更改相关的组件图标，经过研究后发现最简便的方法如下：

1.我们以iconfont这个超大型的图标库为例，首先在生成相关图标的引入css

拷贝想要的icon代码

2.在项目对应文件夹上新建.css文件，把代码粘过去，将生成好的css在对应的.vue组件中引入

新建.css文件

3.将需要替换的部分样式找出并根据下图所示部分替换即可（注意：一定要加上font-family）

覆盖组件自带的icon

4.content部分内容是（ 其中&#是开头用以标明这是字符实体，x表示这是十六进制，CSS的content接受的也是16进制的Unicode编码，所以只要将&#x替换为\即可）

5.效果如下

原来的样子

覆盖后

想法来源于：https://www.cnblogs.com/longflag/p/13277915.html