Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.
    #520530

    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?)

    Social_media_icons

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

    Hey!

    Thank you for using Enfold.

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

    <a class="custom-social-icon" href="http://www.pinterest.com"><img src="http://vestiges.ca/wp-content/uploads/2015/10/Facebook_32x32x32.png" 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;
    }

    Cheers!
    Ismael

    #521320

    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.

    #522113

    Hi,

    Please try the following to control the opacity on hover:

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

    Best regards,
    Rikard

    #522145

    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.