编辑离子选项卡图标样式

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'; 
}