Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #210546

    Hey guys, I’ve added icons to my footer and the animation works perfectly in Safari, but not in Firefox. In Firefox it works on every page except the Home page. Can you take a look at it for me? Thanks!


    Hi JPOsteen!

    Please post the link to your website here.




    I checked the site, the homepage to be exact, using Firefox 26.0 Windows 8 and the icon animation on the footer works fine. :)

    Best regards,



    There seems to be a glitch somewhere. I’m still having the same problem in Firefox, and it happened today on a family members PC using Explorer. The problem seems to occur only on the home page after I navigate away from the page and return, or do not clear my history and cache. So to eliminate the problem, how do I

    1. Keep the icons from animating
    2. Add a hover color to the icons




    It could just be a delay in the script or as you said a glitch that can happen from partially loading in the page.

    The effect is just a css animation and its delayed by the viewer “seeing it” . With a short page or a viewport where the div that holds the icons is partially seen before you scroll down could make the animation happen before you fully see the icon.

    Best regards,



    Thanks for the information. The problem is that the animation doesn’t happen, so the icons look small. Can you tell me how to do numbers 1 and 2 of my previous post?


    • This reply was modified 1 year, 10 months ago by  JPOsteen.

    Hey guys,

    I’m still waiting on an answer.



    Animation does happen on my end and icons are not small. Please see screenshot here http://i.imgur.com/CoTVEeU.jpg
    Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed

    #text-6 .av_font_icon a:hover { color: blue!important; } /* for twitter icon */
    #text-7 .av_font_icon a:hover { color: blue!important; } /* mail icon */
    #text-8 .av_font_icon a:hover { color: blue!important; } /* instagram icon */ 
    #text-10 .av_font_icon a:hover { color: blue!important; } /* life ring icon */




    Thanks for the code to male it hover, but I’m still having problems with the home page animations working properly after leaving the home page then navigating back to it. Can you give me a code to make those icons in the footer just appear normal without animating? I would rather eliminate the chance of problems all together. Thanks.




    Please try adding following code to Quick CSS as well

    #footer .avia_transform .avia_start_delayed_animation.av_font_icon {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;

    Best regards,



    When I added the previous CSS nothing happened. I even tried adding the !important command to every line, and it still did not work. Any suggestions?



    Do you mind creating a temporary admin login and posting it here privately so i can take a look?

    Best regards,

    This reply has been marked as private.


    Changes are done. Please review your website. I made some small changes on the custom CSS code i posted here http://www.kriesi.at/support/topic/icon-animation-not-working-in-footer/#post-215943

    Best regards,


    Perfect! Thank you so much for the great support!



    You are welcome, glad we could help :)

    Best regards,

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Icon Animation Not Working In Footer…’ is closed to new replies.