Change color of back button in the page header

Question

I want to change color (e.g. to red) of back button in the page header, please look in the picture:

When I used the css bellow:

.sapUiIcon:before {
    color: red;
}

It works but it changed all sapUiIcons as:

I would like to change just back button color but in the all app pages, so it can be applied globally for all back buttons. Probably there will be solution for approaching specific back button in the specific page header and apply css style, but I would prefer global solution, one css class for all pages if it is possible. Thanks for any hint.

EDITED 13:15 160517 (added back button element):

EDITED 14:07 160517 added woring demo, please try the css styling in the test.css file.

Answer 1

将（nav-color）类添加到所需页面并扩展选择器。

.nav-color button[title="Back"] .sapUiIcon:before{
  color: red!important;
 }



var oPage = new sap.m.Page({
    title : "Page title: ChartContainer",
    enableScrolling : false,
    showNavButton: true,
    content : [fixFlex]
});

oPage.addStyleClass("nav-color");

Answer 2

根据您的屏幕截图，我会尝试使用以下内容：

.sapMBtnIconLeft.sapUiIcon::before { color: red }

我猜HTML类“.sapMBtnIconLeft”表示左箭头图标，因此与“.sapUiIcon”一起使用会稍微增加特异性; - ）

Answer 3

根据SAP标准，不要覆盖控件类样式。 见Developer Guide

如果您想在页面上显示红色导航后退按钮，请尝试使用sap.m.Bar。

<Page showHeader="false">
    <Bar design="Header">
        <contentLeft>
            <core:Icon src="sap-icon://nav-back" color="red" press="onNavBack"/>
        </contentLeft>
        <contentMiddle>
            <Title text="Page Title"/>
        </contentMiddle>
    </Bar>
    <content>

    </content>
</Page>

这不是像您所要求的全球解决方案，而是保持SAP标准的最佳解决方案。