Animation on fontello icons

Hi Basilis !

I’m sorry but I don’t really understand what you mean…

What I want is reproducing the animation from WEBSITE PAGE 1 on icons (icon is moving from left to center on hover).

Thanks !

Hi Ismael,

I customized a bit your code and it’s closer to what I want with this :

.avia_transform .av_font_icon:hover > .av-icon-char:before {
color: transparent;
position: relative;
left: -100px;
-webkit-animation: ava_left_to_right 0.3s forwards;
animation: ava_left_to_right 0.3s forwards;
}

@-webkit-keyframes ava_left_to_right {
100% { left: 0; color: #fff;}
}

@keyframes ava_left_to_right {
100% { left: 0; color: #fff;}
}

But I have another question now : I would like to enable the animation on hover for the entire column…
The problem is that I already use the following code in my functions.php for another column from another page :

function add_custom_div(){
?>
<script>
jQuery(“.colonne-sous-menu”).click(function(){
window.location = jQuery(this).find(“a:first”).attr(“href”);
return false;
});
</script>
<?php
}
add_action(‘wp_footer’, ‘add_custom_div’);

And when I duplicate this code and I put another css class in it, it makes an error and I can’t access to my back office anymore…
I tried to add the second css class next to the first (separated with a coma), but it doesn’t work neither.

Can you help ?

Thanks a lot !

Hi Ismael !

No, this is not what I want.

I explain :
Each column is composed by 1 icon, 1 empty space and 1 title (text).
Here are two images to show you what i’m talking about :

http://imgur.com/a/WyWGI (front office)
http://imgur.com/a/fwWKz (back office)

So, like I told you before, I would like to make the entire column (the red area in the first image) active on hover.

The problem is that I already use the following code in my functions.php for another column from another page :

function add_custom_div(){
?>
<script>
jQuery(“.colonne-sous-menu”).click(function(){
window.location = jQuery(this).find(“a:first”).attr(“href”);
return false;
});
</script>
<?php
}
add_action(‘wp_footer’, ‘add_custom_div’);

And when I duplicate this code and I put another css class in it, it makes an error and I can’t access to my back office anymore…
I tried to add the second css class next to the first (separated with a coma), but it doesn’t work neither.

Can you help ?

Thanks a lot !

Hi Ismael,

It works perfectly ! The topic can be closed.

Thanks ! :-)