イオンタブのアイコンスタイルを編集する

Question

私は主なナビゲーション方法がタブであるイオンプロジェクトで作業しています。中央のタブには、私はこのように私のSCSSでスタイルを作成したので、目立つ必要があります：

i.icon.ion-ios-camera { 
    height: inherit; 
    border-radius: 100em; 
    background-color: #ff5b38; 
} 

は私がバーベキューをしたこの方法は、INGのと検査 ionic serveは」私が見つけたときに私のタブ：

<ion-tab title="Post" icon="ion-ios-camera" href="#/home/post"> 
    <ion-nav-view name="tab6"></ion-nav-view> 
</ion-tab> 

だから私は（私はタブのアイコンをないスタイルにしたいだけでコンパイルされたアイコンのスタイルを作成するために考え

：

はにコンパイルされますタブ全体）。奇妙なことに、これはうまくいかなかった。しかし、その要素を検査し、このようなスタイルを追加すると動作します：

しかし、私はそれらのスタイルを実現することができます。

最終結果はこのように見て終わることになっていますインスペクタの<i>タグを直接編集します。上に掲げたスタイル（ionic.app.scssファイルにある）は、アイコンスタイルを変更しません。私は何か間違っているのですか？私のスタイルは正しくコンパイルされませんか？

Answer 1

用途：ところで

.tabs i.icon.ion-ios-camera { 
    height: inherit; 
    background-color: #ff5b38; 
    border-radius: 100em; 
} 

.tabs i.icon.ion-ios-camera:before { 
    color: white; 
} 

をあなたはSASSを使用している場合、gulp sassまたはionic setup sassがされていることを確認実行される。これが助けてくれることを願っています。

Answer 2

実行してみましたか：ionic setup sass？

あなたのionicプロジェクトでは、セットアップを行い、ionic serveを実行すると、プロジェクトのcssフォルダにSASSをコンパイルする必要があります。

www/cssにあるstyle.cssにコードを追加することもできます。

あなたがここにイオンとSASSの設定に関する記事全文確認することができます。代わりに、スニペット以下http://ionicframework.com/docs/cli/sass.html

Answer 3

私はAndroidの場合、あなたのスタイルに

を追加し、多くの研究の後、実際の解決策を見つける：

あなたが偽の非アクティブアイコンの更新を変更した場合。

.tabs-md .tab-button[aria-selected=true] .tab-button-icon { 
    color: 'my-brand-color'; 
}