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

Question

我正在尝试使标题的图标更小。通过使用此css代码：

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

}

然而只有红色适用。我试着和没有！重要。我尝试使用px和％。红色始终保持不变的大小。

这是我想要的小图标：

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

以下是Dev-Tool的截图：

Answer 1

好的，使用jsfiddle，我找到了覆盖你的字体大小的属性：

引用另一个SO answer：

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

Answer 2

我敢打赌，有一种不同的声明会覆盖你的CSS。

您可以通过打开开发人员工具（F12）轻松在Chrome中查看此内容。选择元素，并在开发人员工具屏幕的右侧检查字体大小是否被另一个属性覆盖。

如果您不确定CSS中的特异性，这可能是一个有趣的读物：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity