CODEWITHSUNDEEP
cssiconsionic-framework
redrom
redrom

Reputation: 11642

Ionic framework cannot set button icon size

I would like to set custom icon (ionicons) size for this code:

<button class="button button-icon icon ion-stop customIconSound"></button>

For class customIconSound i tried following:

button.customIconSound,button.button-icon {
    font-size: 52px !important;
    color: #fff;
    line-height: 55px!important;
}

But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).

How can i solve it please?

Thanks for any advice.

Upvotes: 9

Views: 21940

Answers (4)

Jes&#250;s Castro
Jes&#250;s Castro

Reputation: 2119

Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:

<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>

Upvotes: 0

Luis Cabrera
Luis Cabrera

Reputation: 569

Lucas was close but the correct syntax is this one

button.customIconSound:before {
    font-size: 22px !important;
}

Upvotes: 15

lucas
lucas

Reputation: 153

If you didn`t solve your problem yet or for people dealing with it in future.

You have to change css style for i pseudo element :before

button.customIconSound i:before {
    font-size: 52px !important;
}

Upvotes: 6

Bellu
Bellu

Reputation: 2573

Your example is working here.

Maybe your problem is caused by something else.

PS: If you want only to resize the icon this css line is enough.

.customIconSound {
    font-size: 52px;
}

Upvotes: 3

Related Questions