离子：改变离子导航颜色-Java 学习之路

我有一个导航栏：

<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 class="icon menu-icon ion-home"></i>

我只需要添加css：

.menu-icon {
    color: white;
}

但这不适用于导航图标 .

那么我怎样才能将它的颜色设置为白色？

2 回答

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

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>

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

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

回复于 2024-04-19T13:01:15+08:00

试试这个而不是 <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;

回复于 2024-04-19T13:01:15+08:00

离子：改变离子导航颜色

2 回答

相关问题