0

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

print x div 0
  • 1,474
  • 1
  • 15
  • 33
Julia Z
  • 125
  • 9
  • check if something is overriding... even to the important. – Bhojendra Rauniyar Apr 21 '16 at 10:02
  • 1
    Have your tried sth. like `font-size: 0.1em;` ? Otherwise you should use the Dev tools of your browser to see the source of the finally applied styling. – print x div 0 Apr 21 '16 at 10:04
  • 0.1em did also not change anything. And it does not look like anything ovverrides it. I added a picture to my question. I haven't really worked a lot with this tool so I might interpret it wrong. – Julia Z Apr 21 '16 at 10:11
  • By the looks of this [ionic-forum](https://forum.ionicframework.com/t/control-ionicon-icon-size/471) it should work ... Can you create a [jsfiddle](https://jsfiddle.net/)? Add the used framework via the "external resources" option on the left hand side. – print x div 0 Apr 21 '16 at 11:21
  • I tried but it's really messed up. It's my first time using jsfiddle so I might have done something wrong. [jsfiddel](https://jsfiddle.net/dycybf9L/) – Julia Z Apr 21 '16 at 11:55

2 Answers2

1

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;
}
Community
  • 1
  • 1
print x div 0
  • 1,474
  • 1
  • 15
  • 33
  • Thank you I also expected it to hase something to do with the button because when I used the same icons in a list the size applied to them. I now only have to worry about aligning them in the center but that should be doable. – Julia Z Apr 21 '16 at 12:27
  • 1
    @JuliaZ See my update: add `::before` to every line, then you can keep the button class. I oversaw that... Also glad that I could help ;) – print x div 0 Apr 21 '16 at 12:31
0

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

Geert1793
  • 1
  • 1