编辑离子选项卡图标样式

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

经过大量研究后我找到了实际的解决方案，只需添加你的风格

对于Android：

如果您更改非活动图标更新为false。

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

Answer 2

请改用以下代码：

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

您是否尝试过运行：ionic setup sass？

它将在您的离子项目中设置sass，之后运行ionic serve时，您的SASS应编译到项目的css文件夹中。

您还可以尝试将代码添加到位于www / css。

中的style.css

您可以在此处查看有关使用ionic设置sass的完整文章：http://ionicframework.com/docs/cli/sass.html