编辑 Ionic 选项卡图标样式

Posted 2023-03-06

【中文标题】编辑 Ionic 选项卡图标样式

【英文标题】：Editing Ionic tab icon styles

【发布时间】：2016-08-21 01:00:59

【问题描述】：

我正在开发一个主要导航方法是选项卡的 Ionic 项目。中心选项卡需要突出，所以我在我的 scss 中创建了这样的样式：

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

我在ionic serve'ing 和检查时以烧烤的方式这样做，我发现我的标签：

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

编译为：

所以我想只是为编译后的图标创建一个样式（我只想设置选项卡图标而不是整个选项卡的样式）。奇怪的是，这不起作用。但是，检查该元素并添加这样的样式是可行的：

最终结果应该是这样的：

但是我只能在inspector中直接编辑<i>标签来实现那些样式。我在上面发布的样式（位于 ionic.app.scss 文件中）不会修改图标样式。难道我做错了什么？我的样式编译不正确吗？

【参考方案1】：

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

对于安卓：

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

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

【讨论】：

这是我的荣幸@mahesh

【参考方案2】：

使用下面的 sn-p 代替：

.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 已被执行。希望这会有所帮助，问候。

【参考方案3】：

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

它将在你的 ionic 项目上设置 sass，然后当你运行 ionic serve 时，你的 SASS 应该被编译到项目的 css 文件夹中。

您也可以尝试将代码添加到位于 www/css 中的 style.css。

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