将 SAPUI5 按钮图标放在文本上（不是左边）

Question

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

我找到了这个博客 post：Button with text UNDER the icon 但不幸的是，这个方法似乎已经不起作用了。

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

Answer 1

您可以使用自定义 class & CSS

来实现

VIEW

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

将 SAPUI5 按钮图标放在文本上（不是左边）

Place SAPUI5 button icon over text (not left of it)

css

button

sapui5