SAPUI5 图标大小和颜色的变化答案

【问题标题】：SAPUI5 Icons change of Size and ColorSAPUI5 图标大小和颜色的变化
【发布时间】：2026-01-08 06:35:01
【问题描述】：

我很想知道是否有办法，找出如何更改 SAPUI5 图标大小，以便它可以满足某些标准和颜色。

如您所见，第二个和第三个按钮的大小确实相同，而第一个按钮更小。

如何影响第一个的大小？

【问题讨论】：

标签： javascript css icons size sapui5

【解决方案1】：

您可以通过将自定义class - increaseFont 赋予特定按钮并覆盖font-size 和color 属性来实现。

View.xml

<FlexBox
    alignItems="Center"
    justifyContent="Start">
    <items>
        <Button enabled="true" icon="sap-icon://process" class="sapUiSmallMarginEnd increaseFont"/>             
        <Button enabled="true" icon="sap-icon://open-command-field" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://navigation-right-arrow" />              
    </items>
</FlexBox>

CSS

.sapMBtn.increaseFont .sapMBtnIcon {
    font-size: 1.5rem;
    color: red;
}

输出

注意：所有图标的大小都相同。因为有多个右箭头，所以它看起来更小。

【讨论】：