Is there a way to change a font icon to a completely different icon on click on say a mobile for a menu for example?
Regards Phil
Font icons - Post ID 281767
Phil Dias
Registered User
260 posts
Steve
Senior Advisor
3,086 posts
Not sure exactly what you mean when you say you want to to change on click. Do you mean you want to to change to a different icon once its been clicked and the menu shows?
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Inger
Senior Advisor
14,450 posts
Online Now
I think some similar question has been asked before, but I wasn't able to find it. You may have to hope for Eric Rohloff, Twinstream, Frank Cook or Richard van Heukelum to take a look at it. I think one of them posted some solution.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Frank Cook
Registered User
1,535 posts
One way in which I have done it is as follows -
First font icon:
In Typography I gave it background colour to match the background it was on.
I gave it a Position of Relative and a Z-index of 1.
In the Active State I set the Opacity to 0 in Efects > Filters & Blend Modes.
Second Font icon:
I gave it a negative top margin sufficient to place it underneath (i.e to be covered by) the first font icon.
Frank
First font icon:
In Typography I gave it background colour to match the background it was on.
I gave it a Position of Relative and a Z-index of 1.
In the Active State I set the Opacity to 0 in Efects > Filters & Blend Modes.
Second Font icon:
I gave it a negative top margin sufficient to place it underneath (i.e to be covered by) the first font icon.
Frank
Inger
Senior Advisor
14,450 posts
Online Now
Frank, do you mind making a wee demo?
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Frank Cook
Registered User
1,535 posts
Phil Dias
Registered User
260 posts
Thats the idea Frank but it does not stay with icon two when clicked and return back to icon one when clicked again?
Twinstream
Registered User
811 posts
Here is a way to toggle with jquery.
Bootstrap 5 CSS Grid.
Phil Dias
Registered User
260 posts
Twinstream you are a genius. Thank you
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
