CODEWITHSUNDEEP
cssionic-framework
Julia Z
Julia Z

Reputation: 125

ionic font size won't apply for icon

I'm trying to make the icons for my header smaller. by using this css code:

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

}

however only the red color applies. I tried it with and without the !important. I tried using px and %. The red always stayed put the size never changed.

This it the icon I want smaller:

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

Here is a screenshot of the Dev-Tool:

screenshot of the Dev-Tool

Upvotes: 0

Views: 2328

Answers (2)

print x div 0
print x div 0

Reputation: 1494

Okay, with the jsfiddle I was able to find the property that overwrites your font-size:

enter image description here

To quote from another SO answer:

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

So by removing the button class from the parent element, you can apply your font-size. By the way, if you take 10%, the icons will be too small to see them.

Otherwise add ::beforeto your css selectors:

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

Upvotes: 1

Geert1793
Geert1793

Reputation: 1

My bet is that there is a different statement overriding your css.

You can easily check this when in Chrome, by opening de developer tools (F12). Selecting the element, and on the right hand of the developer tools screen check if the font-size is overridden by another property.

This might be an interesting read if you're unsure about specificity in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Upvotes: 0

Related Questions