元素UI:如何增加按钮的图标大小?

Question

我只是显示一个这样的按钮：

<el-button plain circle icon="el-icon-refresh"></el-button>

但是按钮内的图标太小了。有没有办法只放大图标？我正在为我的项目使用Vue.js。

Answer 1

Element-ui 的 API 不支持这一点。但是，icon 属性在按钮内的 i 元素上放置一个类。您可以添加第二个类并添加自己的样式。

<el-button plain circle icon="custom-icon el-icon-refresh"></el-button>

.CSS：

.custom-icon {
font-size: 2rem;
}

Answer 2

这对我有用：

.HTML

<el-button plain circle icon="el-icon-refresh" class="custom-icon"></el-button>

.CSS

.custom-icon {
font-size: 2rem;
}

Answer 3

这对我有用。

.HTML：

<el-button icon="el-icon-circle-plus-outline">Add</el-button>    

.CSS：

<style lang="less" scoped>
/deep/ .el-icon-circle-plus-outline {
font-size: 15px;
}
</style>