可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a navigation bar:

    <ion-nav-bar class="bar-green-mint" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon menu-icon" menu-toggle="left">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

I want to change the color of my navigation icon. For 'normal' icons like:

<i class="icon menu-icon ion-home"></i>

I just needed to add the css:

.menu-icon {
    color: white;
}

but this does not work for the navigation icon.

So how can i set its color to be white?

回答1:

Here's a working example from CodePen on how the change in CSS actually works. The code copy/paste here (I used orange instead of white, just to prove point).

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

});

.menu-icon{
  color:orange;
}

<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Toggle button
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body class="padding" ng-controller="MyCtrl">
    
    <div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-block button-positive"><i class="icon menu-icon ion-home"></i>
          Click me
        </button>
      </div>
      
    </div>
</div>
  </body>
</html>

Now, since you don't see this change, you have to show the code for as where are you making the CSS change. Are you perhaps using SASS? If so, you would have to change the sass files then.

The best way to check if you changed the CSS correctly is to inspect the button (Firebug, Chrome dev tools) and see if the correct CSS is applied.

回答2:

Try this instead <i class="icon ion-home light"></i>for white or <i class="icon ion-home balanced"></i> for green.
You can customize the colors in the sass file.

For example, you might change some of the default colors:
$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;