Ionic: Thay đổi ion navicon màu

Tôi có một thanh điều hướng:Ionic: Thay đổi ion navicon màu

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

Tôi muốn thay đổi màu sắc của biểu tượng điều hướng của tôi. Đối với biểu tượng 'bình thường' thích:

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

Tôi chỉ cần thêm các css:

.menu-icon { 
    color: white; 
}

nhưng điều này không làm việc cho các biểu tượng điều hướng.

Vậy làm cách nào tôi có thể đặt màu của nó thành màu trắng?

Nguồn

2015-05-26 Mulgard

Đây là ví dụ làm việc từ CodePen về cách thay đổi trong CSS thực sự hoạt động. Sao chép/dán mã ở đây (tôi đã sử dụng màu cam thay vì màu trắng, chỉ để chứng minh điểm).

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>

Bây giờ, kể từ khi bạn không nhìn thấy sự thay đổi này, bạn có để hiển thị các mã cho là có thì bạn làm cho sự thay đổi CSS. Bạn có lẽ đang sử dụng SASS? Nếu vậy, bạn sẽ phải thay đổi các tệp sass sau đó.

Cách tốt nhất để kiểm tra xem bạn đã thay đổi CSS một cách chính xác chưa là kiểm tra nút (Firebug, công cụ Chrome dev) và xem liệu có áp dụng đúng CSS hay không.

Nguồn

2015-05-26 19:22:22 Nikola

tôi đã thêm 'menu-icon' vào nút' bên trong 'nút ion-nav'. Nó không làm cho biểu tượng màu trắng nav. Vì vậy, các giải pháp dos không hoạt động: ( – Mulgard

Có, nhưng nơi bạn đã đặt các quy tắc CSS? Bằng chứng đầy đủ, mặc dù một chút bẩn giải pháp, sẽ được thêm phong cách nội tuyến vào biểu tượng của bạn như thế này: '' – Nikola

với tập lệnh nội tuyến nó hoạt động! nhưng không phải với nút ' – Mulgard

Hãy thử thay thế này <i class="icon ion-home light"></i> cho màu trắng hoặc <i class="icon ion-home balanced"></i> cho màu xanh lục.
Bạn có thể tùy chỉnh màu sắc trong tệp 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;

Nguồn

2016-02-26 10:09:33

Ionic: Thay đổi ion navicon màu

Trả lời

Các vấn đề liên quan