編輯離子選項卡圖標樣式

Question

我正在主導航方法爲選項卡的離子項目上工作。該中心標籤需要站出來，所以我創建了一個風格，我SCSS這樣的：

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

我這樣做我做燒烤的方式，當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; 
} 

順便說一句，如果你用青菜，保證gulp sass或ionic setup sass一直執行。希望這會有所幫助，問候。

Answer 2

您是否嘗試過運行：ionic setup sass？

它會在你的離子項目上設置sass，然後當你運行ionic serve你的SASS應該被編譯到項目的css文件夾中。

您還可以嘗試將代碼添加到位於www/css中的style.css。

您可以檢查與離子在這裏設立青菜全文：http://ionicframework.com/docs/cli/sass.html

Answer 3

我發現很多研究後實際的解決方案，只需添加在你的風格

對於安卓

如果更改無效圖標更新錯誤。

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