Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #520514

    I try to add some social media icon in my footer.
    I succeeded partially but I’m not sure I have the right solution:

    I placed a “text” widget in my footer and I used the following shortcode to display icons

    My icons are visible, great ! But, I would like to:
    1- add a little space (padding?) between each icons
    2- and a hover state

    Your help would be greatly appreciated.

    • This topic was modified 8 years, 8 months ago by Yigit.

    I’m not sure I like the monochrome look logos “Fontello”. Instead I tried to use PNG images.
    It’s better but I would like an “over” effect like a opacity fadein. Is feasible?
    Or, is there another easier way to add full color social media icons in my footer ? (with rollover effect?)


    • This reply was modified 8 years, 9 months ago by AlainTernet.


    Thank you for using Enfold.

    Add a unique class to the link tag. Something like this:

    <a class="custom-social-icon" href=""><img src="" alt="Facebook_logo" width="32" height="32" /></a>

    Add this in the Quick CSS field to create a hover effect:

    .custom-social-icon {
    opacity: 0.7;



    Thanks Ismael for your reply.
    I tried your suggestion, but it does not work completely;
    The icon is faded but it does not change to 100% when the mouse roll over it.



    Please try the following to control the opacity on hover:

    .custom-social-icon:hover {
        opacity: 1.0;

    Best regards,


    It works now !
    Thanks Rikard !

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adding social media icons in the footer ?’ is closed to new replies.