elementui iconfont
ElementUI Iconfont 使用指南
ElementUI 默认使用自带的图标库，但支持扩展或替换为自定义的 Iconfont。以下是具体方法：
引入官方图标库
ElementUI 内置了一套常用的图标，通过 <i class="el-icon-xxx"></i> 即可调用。例如：
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>扩展自定义 Iconfont 若需添加第三方图标（如阿里巴巴 Iconfont）：
- 在 Iconfont 官网 创建项目并生成 CSS 链接
- 在项目中引入生成的 CSS 文件：
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxxx.css"> - 通过类名使用图标：
<i class="iconfont icon-xxx"></i>
替换 ElementUI 默认图标
通过覆盖 $--font-path 变量可替换默认图标：
// 在 SCSS 中修改变量
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';按需引入图标
若使用按需加载（如通过 babel-plugin-component），需单独引入图标组件：
import { Icon } from 'element-ui';
Vue.component('el-icon', Icon);注意事项
- 自定义图标需注意与 ElementUI 默认图标的命名冲突
- 使用 Iconfont 时建议将字体文件下载到本地，避免 CDN 加载问题
- 图标尺寸可通过 CSS 的
font-size调整
常见问题解决
图标显示为方框 检查字体文件路径是否正确，或网络请求是否被拦截。本地部署时需确保字体文件与 CSS 同目录。
图标颜色修改
直接通过 CSS 的 color 属性控制：
.el-icon-edit {
color: #ff0000;
}图标对齐问题
添加 vertical-align 属性调整基线对齐：
[class^="el-icon-"] {
vertical-align: middle;
}通过以上方法可灵活集成 Iconfont 到 ElementUI 项目中，满足多样化设计需求。
