离子字体大小不适用于图标

朱莉娅·Z(Julia Z)

我正在尝试缩小标题的图标。通过使用以下CSS代码:

i.ion-ios7-arrow-forward {
font-size: 10% !important;
color: red;

}

但是只有红色适用。我尝试了带或不带!important的情况。我尝试使用px和%。红色始终保持不变,尺寸始终不变。

这是我要缩小的图标:

<button class="button button-clear button-light  "><i class="icon ion-ios7-arrow-forward"></i> Redo</button>

这是开发工具的屏幕截图:

开发工具的屏幕截图

打印x div 0

好的,通过jsfiddle,我能够找到覆盖字体大小的属性:

在此处输入图片说明

引用另一个SO答案

!importantCSS中的CSS允许作者覆盖内联样式(因为它们的优先级通常比样式表样式的优先级高)。它不会自动使标记为!important的样式替代其他所有样式。

因此,通过button从父元素中删除该类,可以应用字体大小。顺便说一句,如果您占10%,图标将太小而看不到它们。

否则,请添加::before到您的CSS选择器中:

i.ion-search::before,
i.ion-information::before,
i.ion-power::before,
i.ion-printer::before,
i.ion-ios7-arrow-back::before,
i.ion-ios7-arrow-forward::before {
font-size: 5em !important;
color: red;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章