-
Posts
-
I inserted icons using the icon box and can not find where to create the hover effect. In reading, it appears as if that should be the default. Please let me know how to create the hover effect – thanks.
Hey rsoesman,
Could you post a link to the site in question so that we can take a closer look please?
Regards,
RikardHi,
I can see two icons animating on the page, the ones over No Contacts and Monthly reports. Not sure what others you are referring to? Please post admin login details in private so that we can have a closer look.
Regards,
RikardYes -I am referring to those two. When I put my cursor over them in multiple browsers, there is no hover effect, please tell me how to put the hover effect over those.
Hi,
Did you remove the icons i cannot see any reference to ” No Contacts and Monthly reports” Please point us to the element in question and as mentioned earlier post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayWe were doing some testing and blew up parts of the site. I set it back. Reference the icons above ‘No Contracts’ and ‘Monthly Reports’. I copied these fonts in from fontella and added the border. I would like to have a hover effect i.e. changing colors, reversing image, whatever when user mouseovers an icon. Thanks.
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
.av_font_icon.av-icon-style-border .av-icon-char:hover { color: orange; border-color: red; }Best regards,
YigitYigit – fantastic – thank you, that worked perfectly. Enfold support has been fantastic especially for a newbie such as myself.
Hopefully, the last follow-up question – what is the CSS code to control the size of these icons?Hi!
Please add following code to Quick CSS as well and adjust as needed
.av_font_icon.av-icon-style-border .av-icon-char { font-size: 30px!important; width: 30px!important; height: 30px; line-height: 30px!important; }You are welcome, we are always happy to help ;)
Regards,
YigitYigit – that is great. Please look at the site in the private conversation. The buttons above Contracts and Monthly Reports are 60px. The button inside the Contracts text box is 40 px. What I am trying to do is control the border spacing around the icons. Your previous code is fantastic and will be great to control the icon size but how do I also control the space between border and icon? I want the icon to stay the same size but bring the border closer in. Thanks.
Hi!
Please add following code to Quick CSS as well
.av_font_icon.av-icon-style-border .av-icon-char { padding: 10px; }Regards,
YigitTHANK YOU, THANK YOU, THANK YOU!!! Yigit, your support has been fantastic and greatly appreciate how quickly you were in getting back to me with all of my inquiries.
Hi!
You are welcome!
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)Best regards,
Yigit
- The topic ‘Putting the hover effect on icons’ is closed to new replies.