Element-UI: 如何增加按钮的图标大小？

Question

我只是展示了这样一个按钮：

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

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

Answer 1

Element-ui 不支持它 API。然而，图标属性在按钮内的 i 元素上放置了一个 class。您可以添加第二个 class 并添加您自己的样式。

<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;
}