Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 1, 2016 at 5:15 pm #591685
    fcp

    Hello,

    I’ve created a widget using Fontello icon in one of my widgets, by adding this code :

    [av_font_icon icon='ue821' font='entypo-fontello' block:none; ][/av_font_icon] ADDRESS

    1 – What does the “block:none” mean and do I really need it ?
    2 – On mouse hover, the color of the icon changes but I don’t want it. I want to use the icon like text and nothing else. What do I have to do ?

    Thanks

    March 2, 2016 at 7:50 am #591929
    Rikard

    Hi fcp,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    March 2, 2016 at 1:11 pm #592034
    fcp

    Ok, here it is.

    March 2, 2016 at 3:16 pm #592089
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .fond-contact-lateral .av_font_icon {
    pointer-events: none;
}

    Best regards,
    Yigit

    March 2, 2016 at 5:07 pm #592189
    fcp

    Thanks,

    I did the same for the widgets and it works !
    But for my first question : What does the “block:none” mean and do I really need it ? What is it used for ?

    However, I’ve another question about these icons :
    When the page is loading, all these icons appear with a pop-up animation. How could I disable this ?

    And finally (the last question :-) ), on the 2 animated buttons, the icons badly appears (indeed the are cut at the bottom). Do you know a solution to this issue ?

    Thanks !

    March 5, 2016 at 4:09 am #593613
    Vinay

    Hey!

    Yes the block:none is required by the framework. If it’s a default code int he shortcode please use it as is.

    I tried to load your page several times did not see any pop-up animation on icons do you mean the images that show with animation when you scroll the page? It can be disabled in the element property > animation options. same with icons click on the icon and disable it in animation property.

    not sure if you were referring tot he icon that pop-up when you mouse hover on image?
    if so pelase check this link http://kriesi.at/documentation/enfold/disable-css-overlay-on-images/

    I don’t see anything cut off in the link mentioned in private please elaborate and share the link where we can inspect the element.

    Best regards,
    Vinay Kashyap

    March 7, 2016 at 2:33 pm #594315
    fcp

    Hi !

    In fact, everything works exactly the same way, with or without this “block:none”. That is the reason why I asked about what this code is used for…

    Concerning the pop up on icons, I mean that in my widgets for example they don’t appear when the page is loading, but when we scroll down the page. They are a small point first and then they appear, but I don’t want this “animation”. I want them to be fixed.

    Finally, I send you a screen capture via Imgur showing my problem with buttons : like you can see it, the button without animation (on the left) shows the calculator icon normally, but the button with animation (icon_hover=’aviaTBaviaTBicon_hover’) (on the right – when we mouse hover on it) cut the bottom of the calculator icon. I send you the link to this page with the Imgur capture.

    Thanks !

    March 9, 2016 at 5:28 pm #595699
    Jordan

    Hi!

    You can add the following CSS in the Quick CSS field to stop the calculator icon from being cut off and to remove the animation on the pop up icons.

    /*Adjusts the height so that the calculator icon is not cut off*/
.av-icon-on-hover .avia_button_icon {
    height: 1.2em !important;
}

/*Removes the animation from the pop up icons in the widget*/
.avia_transform .avia_start_delayed_animation.av_font_icon {
    animation: none !important;
}

    Regards,
    Jordan

    March 12, 2016 at 6:19 pm #597237
    fcp

    The code to adjust the icon perfectly works.
    Thanks a lot !

    Unfortunately, the other code doesn’t work.
    Another solution ?

    Thanks !

    March 16, 2016 at 5:00 pm #599013
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .fond-contact-lateral .avia_transform .av_font_icon {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

    Cheers!
    Yigit

    March 17, 2016 at 12:14 am #599303
    fcp

    Nothing to do. Still doesn’t work.
    I’ve tried with “!important” everywhere but it doesn’t work at all.

    March 18, 2016 at 12:29 pm #600248
    Ismael

    Hi!

    Use this to negate the icon animation:

    .avia_transform .av_font_icon {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    animation: none !important;
}

    Cheers!
    Ismael

    March 18, 2016 at 12:37 pm #600250
    fcp

    Hi Ismael !

    It’s better. Now there is no animation on the icons when the page is loading, the icons are fixed. But they flash 2 or 3 seconds later…
    This is kind of cool but not exactly what I would like. ;-)

    Some code to add ?

    Thanks !

    March 23, 2016 at 3:16 pm #602545
    Yigit

    Hi!

    Sorry for the late reply!

    I checked your page and could not notice a flash. Have you figured it out already?
    If not, can you please elaborate and point out the elements?

    Regards,
    Yigit

    June 20, 2016 at 2:43 pm #650830
    fcp

    Hi !
    I found this code in another post and it seems to work properly :

    .avia_transform .av_font_icon, .avia_transform .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1 !important);
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
    }

    Thanks !

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Disable mouse hover on icons in the widgets’ is closed to new replies.