Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 3, 2014 at 10:50 am #329591
    blofsy

    Hi,

    I’m building a page http:://asz-gaz.hu and I’ve copied a part from your demo page here: http://kriesi.at/themedemo/?theme=enfold

    Under the h1 A BEAUTIFUL EXPERIENCE! there are icons with wave effects. It works nicely, but I’d like to change the wave color to black if possible. Also when I resize the icons in the page builder menu the icons shrink considerably more than the border and they look ugly under 30px. Is there a solution to this?

    Thanks,

    PS.: great theme

    Mate

    October 3, 2014 at 11:08 am #329597
    Arvish

    Hey blofsy!

    Could you please elaborate on the following ” change wave color to black”.
    From what I see on your site, it is already black.

    Unfortunately sizes and appearance depends on the setting the font icon’s font properties. You can try adding another font icon to your theme by following this video

    Regards,
    Arvish

    October 3, 2014 at 11:20 am #329601
    blofsy

    Hi Arvish,

    If you look at the demo page I linked when you hover over the icon it has a white wave effect. I want to reproduce it on my site but in black.

    Regards,

    Mate

    October 4, 2014 at 4:37 am #330082
    Ismael

    Hey!

    You can use this on Quick CSS or custom.css:

    /*sonar effect*/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
}

    Change the color values to black or rgba(0,0,0,opacity value). Follow the opacity pattern.

    Cheers!
    Ismael

    October 4, 2014 at 8:30 am #330127
    blofsy

    Works nicely, thanks.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Customizing Font Icon effect and size’ is closed to new replies.