css - 将SAPUI5按钮图标放在文本上方(不在文本左侧)

我需要将sap.m.Button的图标放在文本上方。

我发现了此博客文章：Button with text UNDER the icon
但不幸的是，这种方法似乎不再起作用。

是否有使用CSS将图标放在文本上方的便捷方法？

最佳答案

您可以使用自定义类和CSS来实现

视图

<Button class="newBtn" icon="sap-icon://sys-help"  text="Default Button" />

的CSS

.newBtn .sapMBtnInner {
    height: 4rem; /* Increase it to 6rem */
}
.newBtn .sapMBtnText>.sapMBtnIcon {
   display: contents;
   line-height: 3.8rem; /* Add this line when you are using height as 6rem */
}
.newBtn .sapMBtnInner.sapMBtnText {
    padding-left: 0.75rem;
}
.newBtn .sapMBtnIcon {
   font-size: 1.7rem;   /* Icon size */
}
.newBtn .sapMBtnContent {
    line-height: normal;
}