Menu
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?
887
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.
117
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
