elementui日期时间选择器更换icon
时间: 2023-07-20 09:17:56 浏览: 132
要更换 ElementUI 日期时间选择器中的 icon,可以按照以下步骤操作:
1. 首先,需要从阿里 iconfont 中下载所需的 icon。
2. 在项目中引入 iconfont 文件,可以通过在 index.html 文件中添加如下代码:
```html
<link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_abcd1234.css">
```
其中,1234567_abcd1234 是你的 iconfont 项目的 ID,具体的 ID 可以在 iconfont 官网中找到。
3. 找到包含日期时间选择器 icon 的 CSS 类。该类通常是 .el-date-picker__time-icon,但具体的类名可能因不同的 ElementUI 版本而有所不同。
4. 将该类中的 font-family 属性修改为 iconfont 项目中的字体名称,例如:
```css
.el-date-picker__time-icon {
font-family: 'iconfont';
}
```
5. 在该类中添加 content 属性,以指定要使用的 icon 的 Unicode 码点,例如:
```css
.el-date-picker__time-icon {
font-family: 'iconfont';
content: '\e64e';
}
```
其中,\e64e 是你要使用的 icon 的 Unicode 码点,具体的码点可以在 iconfont 官网中找到。
6. 保存修改后的样式文件并重新编译项目,即可看到更换后的 icon。
注意:在修改 ElementUI 样式文件时,应该使用自定义主题而不是直接修改 ElementUI 的源代码,以避免升级 ElementUI 时造成冲突和困难。
阅读全文
相关推荐

















