编辑离子选项卡图标样式
wig
我正在一个Ionic项目中，其中的主要导航方法是选项卡。中心选项卡需要突出，因此我在自己的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文件中）不会修改图标样式。难道我做错了什么？我的样式不能正确编译吗？
liuwenzhuang
请改用以下代码段：
.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已执行。希望这会有所帮助，问候。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
离子：如何创建不带图标的带有离子选项卡的选项卡？
- 2
选项卡图标在离子 3 中不可见
- 3
带选项卡图标顶部的离子选项卡在Android和IOS上不起作用
- 4
标头中的离子导航选项卡
- 5
在离子选项卡中显示网站
- 6
离子选项卡导航问题
- 7
离子：选项卡视图未呈现
- 8
离子选项卡烦人的激活颜色
- 9
离子选项卡活动颜色
- 10
模态上的离子 3 选项卡
- 11
如何隐藏Eclipse编辑器文件选项卡中列出的文件图标？
- 12
设置选项卡图标错误
- 13
样式引导程序活动选项卡
- 14
如何覆盖选项卡的选定样式？
- 15
具有静态数据的离子选项卡
- 16
一个选项卡的离子多视图状态
- 17
离子2 +角度2-选项卡+侧面菜单
- 18
带有选项卡的离子导航后退按钮
- 19
如何在不同的离子选项卡上滑动
- 20
如何在离子选项卡之间添加通用内容
- 21
一个选项卡的离子多视图状态
- 22
离子2 +角度2-选项卡+侧面菜单
- 23
离子：选项卡视图不显示后退按钮
- 24
Firefox 29 +树样式选项卡+选项卡混合加：双击打开新选项卡
- 25
Xamarin Forms-如果选项卡处于活动状态，则更改选项卡图标
- 26
选择选项卡并使中间的主选项卡时如何更改图标？
- 27
如何在引导选项卡中添加关闭图标？
- 28
如何在Angular JS的选项卡中添加图标
- 29
带图标的Android Pager滑动选项卡
我来说两句