I have one more issue to solve before launching the website. I used the code below to resize the icons in the separators, but it also resized the icons that show up when hovering over a button. This is a problem because the icon in the button gets edges cut off.
span.av-seperator-icon {
font-size: 14px;
}
I would like to either fix the cut off in the buttons, or make it so the icons are not resized in the buttons, only resized in the separators.
Any ideas?
Hey GregDunn,
First off, thanks for using our theme :)
I`ve checked your site and you need to increase the line-height with the same font-size value, if you change the font-size to 48px, add this custom CSS code:
.hr-icon-yes { line-height: 48px !important; }
Best regards,
John Torvik
I pasted in the code but I’m not sure what you mean about changing the font size value. Where do I do this?
Hi,
The code you used for changing the font size doesn’t affect the button icon:
span.av-seperator-icon {
font-size: 14px;
}
however the button icon size depends on the font size of the button text, I have added this css code so the icon isn’t cut off:
#top .av-icon-on-hover .avia_button_icon {
overflow: visible;
}
#top .av-icon-on-hover:hover .avia_button_icon {
width: 3em;
}
Let us know if this helps :)
Best regards,
Nikko
Wow, that’s perfect. Thank you so much for the amazingly quick help! You guys really are great.
Hi,
Glad we could help and thanks for using Enfold :)
Best regards,
Nikko