Ionic: Zmiana koloru jonów Navicon

Mam pasek nawigacyjny:Ionic: Zmiana koloru jonów 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>

Chcę zmienić kolor moich ikony nawigacji. Za 'normalne' ikony jak:

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

ja po prostu potrzebne, aby dodać css:

.menu-icon { 
    color: white; 
}

ale to nie działa na ikonę nawigacji.

Jak więc ustawić kolor na biały?

Źródło

2015-05-26 Mulgard

Oto działający przykład z CodePen na temat tego, jak działa zmiana w CSS. Tutaj kopiuj/wklej kod (użyłem pomarańczowego zamiast białego, żeby udowodnić punkt).

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>

Teraz, skoro nie widzisz tę zmianę, trzeba pokazać kod jak gdzie robisz zmianę CSS. Czy może używasz SASS? Jeśli tak, musisz wtedy zmienić pliki sass.

Najlepszym sposobem sprawdzenia, czy zmieniono CSS, jest sprawdzenie przycisku (Firebug, narzędzia dla Chrome) i sprawdzenie, czy zastosowano prawidłowy CSS.

Źródło

2015-05-26 19:22:22 Nikola

Dodałem 'ikonę menu' do przycisku' 'wewnątrz' przycisków nawigacji jonowej'. Nie powoduje to, że ikona nawigacji jest biała. Tak więc rozwiązanie nie działa :( – Mulgard

Tak, ale gdzie umieściłeś regułę CSS? Pełnym dowodem, choć trochę brudnym rozwiązaniem, byłoby dodanie stylu do twojej ikony: '' – Nikola

ze skryptem wbudowanym działa, ale nie z przyciskiem '

Spróbuj tego zamiast: <i class="icon ion-home light"></i> dla białego lub <i class="icon ion-home balanced"></i> dla koloru zielonego.
Możesz dostosować kolory w pliku 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;

Źródło

2016-02-26 10:09:33

Ionic: Zmiana koloru jonów Navicon

Odpowiedz

Powiązane problemy