Animated Icon Links (Font Awesome)?

Support
#1

How would i incorporate something like this into my website? The animated icons that are right underneath the banner.

http://impreza.us-themes.com/

#2

Hi There,

Thank you for writing in, If you need the icon to be a link, you need to use the Icon Shortcode so you can wrap it on a anchor tag <a>

<a href="#">[x_icon type="anchor" class="custom-icon"]</a>

You can see that I added a class custom-icon there, that would be the key to apply a hover effect on the icon with custom CSS.

/*initial state*/
i.custom-icon {
	text-align: center;
    color: black;
    font-size: 50px;
    background-color: tomato;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100em;
    transition: .5s ease-out;
}

/*hover state*/
i.custom-icon:hover {
	color: tomato;
	background-color: black;
	transition: .5s ease;
}

You can add a custom CSS under Theme Options > CSS

Keep in mind that is just a basic css hover effect, if you need more dramatic effect like the example site above, you can try Hover.css, but that would fall outside of the scope of our support though.

Hope it helps,
Cheers!

#3

Thank you - I just tinkered with the code that you provided and it looks great :slight_smile:

#4

You’re welcome.