Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库

谁借莪１个温暖的怀抱￠ 2022-05-18 04:49 816阅读 0赞

最近在使用`vue-element-admin`开源项目进行系统开发，但是在引入第三方图标库的时候，出现了一些问题，百度找了找，也没有找到自己想要的答案，最后经过多次尝试，将问题解决。所以特此记录一下，以便以后用到。

## 创建获取图标库 ##

*  登陆[《阿里巴巴矢量图标库》][Link 1]
 *  创建项目   
    ![这里写图片描述][SouthEast]
    
    > 注意：这里的前缀名称不要使用`el-icon`避免和Element自身的冲突。
 *  在图标库中选择图标，添加入库
 *  将选择好的图标，添加到项目   
    ![这里写图片描述][SouthEast 1]
 *  下载到本地解压
    
    ## Element引入图标库 ##
    
    1、在项目中创建一个文件夹，将刚才下载的图标引入。如图：

![这里写图片描述][SouthEast 2]

2、引入全局CSS

![这里写图片描述][SouthEast 3]

3、修改`iconfont.css`

*  修改前

![这里写图片描述][SouthEast 4]

*  修改后

![这里写图片描述][SouthEast 5]

> 1、删除`@font-face`中的最后一行，svg。   
> 2、修改`.iconfont`

4、修改图标样式

![这里写图片描述][SouthEast 6]

> 根据自己的需求，修改图标的样式和尺寸。   
> 注意：这里修改的是全局的。

5、使用图标：

![这里写图片描述][SouthEast 7]

参考文献：

[https://blog.csdn.net/mmd0308/article/details/78390783][https_blog.csdn.net_mmd0308_article_details_78390783]

[Link 1]: http://www.iconfont.cn/
[SouthEast]: /images/20220518/8c2309b4be204e11b4bb266ad7af9550.png
[SouthEast 1]: /images/20220518/29c4b6e1ab7345d4aae5745132c9378a.png
[SouthEast 2]: /images/20220518/402b1f39a3b64d92960b6400448b0c3a.png
[SouthEast 3]: /images/20220518/118f5bb5d0464502a73ece1a95531fc4.png
[SouthEast 4]: /images/20220518/61267987ab794dfe8f193336805a162e.png
[SouthEast 5]: /images/20220518/2ac979afbc8e4f92b28e9639bdb8b4d6.png
[SouthEast 6]: /images/20220518/86e11e23e4aa48428538cc71e621baff.png
[SouthEast 7]: /images/20220518/9812d0a777454ecc839b9eeababb6505.png
[https_blog.csdn.net_mmd0308_article_details_78390783]: https://blog.csdn.net/mmd0308/article/details/78390783