离子：更改离子navicon色

我有一个导航栏：离子：更改离子navicon色

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

但这并不用于导航图标的工作。

因此，如何能我设置它的颜色是白色的？

来源

2015-05-26 Mulgard

下面是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的最佳方式是正确的检查按钮（萤火虫，Chrome浏览器开发工具），并查看是否应用正确的CSS。

来源

2015-05-26 19:22:22 Nikola

我在'ion-nav-buttons'里加了'menu-icon'到'button'。它不会使导航图标变成白色。所以解决方案不起作用:( – Mulgard

是的，但是你在哪里放置了CSS规则？完全证明，尽管有点肮脏的解决方案，将内联样式添加到你的图标，像这样：'' – Nikola

与它的工作原理内嵌脚本，但不能以'<按钮类=‘按钮，按钮图标按钮清晰离子navicon菜单图标’菜单切换= “left”>' – Mulgard

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

来源

2016-02-26 10:09:33

离子：更改离子navicon色

回答

相关问题