Geek Answers Handbook

Ionic: ion-navigation color change

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 the navigation icon. For "regular" icons:

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

I just needed to add css:

 .menu-icon { color: white; }

but this does not work for the navigation icon.

So how can I set my color to white?

+5
source share
2 answers

Here is a working example from CodePen about how CSS changes really work. Coding / pasting here (I used orange instead of white to prove the 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 are not seeing this change, you need to show the code as where you are making the CSS change. Perhaps you are using SASS? If so, you will have to modify the sass files.

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

+6
source

Instead, try <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;
+5
source

More articles:


All Articles