Question

我有一个导航栏：

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

我想更改导航图标的颜色。对于＆＃39; normal＆＃39;图标如：

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

我只需要添加css：

.menu-icon {
    color: white;
}

但这不适用于导航图标。

那么如何将其颜色设置为白色？

Answer 1

以下是来自CodePen的有关CSS实际变化的工作示例。代码复制/粘贴在这里（我使用橙色而不是白色，只是为了证明点）。

＆＃13;

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

＆＃13;

.menu-icon{
  color:orange;
}

＆＃13;

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

＆＃13;

现在，由于您没有看到此更改，因此您必须显示代码，以便进行CSS更改。你也许正在使用SASS吗？如果是这样，那么你必须更改sass文件。

检查您是否正确更改CSS的最佳方法是检查按钮（Firebug，Chrome开发工具）并查看是否应用了正确的CSS。

Answer 2

尝试使用此<i class="icon ion-home light"></i>表示白色，或<i class="icon ion-home balanced"></i>表示绿色您可以自定义sass文件中的颜色。

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;

离子：改变离子导航颜色

2 个答案: