问题描述
我们在项目中的图标字体与element-ui不同。可以将默认箭头图标更改为自定义吗?我在文档中找不到任何内容。我将不胜感激。
我已经创建了这样的组件:
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
解决方法
没有使用El-Select组件上可用的某些属性来覆盖图标的选项。但是有可能您使用css覆盖了图标
.el-select .el-input .el-select__caret::before {
content: '\e78e' // calendar icon of element-ui
}
,
您需要更改 CSS 上的图标内容。
.el-icon-arrow-up:before { content: "\e600"; }
.el-icon-arrow-down:before { content: "\e603"; }
对于:
.el-icon-arrow-up:before { content: url(custom.svg); }
.el-icon-arrow-down:before { content: url(custom.svg); }
问候