【Abp VNext】实战入门（五）：【11】前端管理界面 vue-element-admin —— 使用阿里字体图标库 iconfont.css_abp vnext vue element

一、前言：

项目中经常需要使用图片图标，很多图片是完全可以采用字体图标来替代，字体图标具有明显的优势：矢量图、可以任意调节大小、任意改变颜色、体积小、管理方便等优点；

vue-element-admin 采用的是 element-ui 框架 已具备很多现成图标，具体内容看连接： element-ui 自带图标。

如果这些图标还不够你用可以前往阿里字体图标库搜索免费开源的海量图标：阿里字体图标库

二、字体库使用步骤：

1、阿里字体图标库地址：https://www.iconfont.cn

2、注册阿里账号->搜索图标->添加购物车->>然后点击添加到项目

3、将所有文件拷贝到项目src/iconfont目录中：
注意.iconfont{ } 定的图标默认大小颜色，可以自己定义 通常14-16px

4、在App.vue 中全局引用iconfont.css ：

5、使用方法（1）：常规方法

<span class=" ft_s12 iconfont icon_suoxiao" />
1

ft_s12：自定义的字体大小属性 即 .ft_s12{font-size:12px}
iconfont ：标记属性必须带上
icon_suoxiao：具体图标名称

6、使用方法（2）： 如何在 element-ui 组件中使用自定义的图标

//用的是element-ui 自带的图标使用方法
 <el-button class="" icon="el-icon-plus">刷新位置</el-button>
1
2

//骚操作：直接把 "iconfont icon_suoxiao" 写到icon属性中  还可以自带样式 调整图标大小 偏移
 <el-button class="" icon="ft_s12 iconfont icon_suoxiao mr3">刷新位置</el-button>  
1
2

.mr3{margin-right:3px}
.ft_s12{font-size:12px}

7、图标具体属性名称查看：浏览器打开字体库中的demo_index.html

三、总结：

没有任何侵入，不做任何结构上的改动，优雅、简介、完美有没有，有时候我自己都觉得我特么是个人才，必须要发篇文章记录一下新年上班的第1天；