Make ion-icon bold || change icon on click

ionic-v1
1

Hi!
I have a requirement to make button look like an ion-icon which is fine, but this icon should do some changes when user presses it. Here I have two options to make this action visible:
-make the icon bolder or change it.

for making it bolder I’m trying to go this way:
in view:

<button class="button icon ion-ios-checkmark-outline makeMeBold larger-icon"> </button>

in css:

.button.icon.ion-ios-checkmark-outline.makeMeBold.larger-icon.activated {
font-weight: bold;
font-size: 58px;
color: darkred;
border: 0;
}

now, what it does is that when button is clicked (.activated) it changes it’s (icon’s) color. It doesn’t change it’s size nor weight --why??

For second question, what would be the way to change entire icon on button press (activated)?? - this qould be even better to have.

Thank you for insights!

2

Hi,
I can assist you for the task.
Please add me on Skype, My Skype id is cis.lisa
Looking forward for your reply.
Regards,
Lisa

3

Hi, please share you suggestions in this forum, you may help the others too!

1 Like
4

I have some queries - so what you are looking for is that if a user clicks a button, its ion-icon is enhanced, and then after the click even is commenced, then the ion-icon is back to its original position?

5

yes, the change should be visible only when you tap on it.
preferably it should change the icon itself but would be enough to make it just bold/bolder.

6

Is it just tap or is there an function called in the button ? Because if there is a function which takes in sometime to execute, then the icon change can be seen more prominently.

ng-class can be used if there is a prolonged activity in the button click. If not, the change will not reflect on the button activate.

7

well, at this time the button is functionless. in the future there should be some funct on it for sure.

8

add this style. it worked for me

 --ionicon-stroke-width: 64px;
1 Like