Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 18, 2015 at 6:42 am #520514
    AlainTernet

    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 9 years ago by Yigit.
    October 18, 2015 at 7:39 am #520530
    AlainTernet

    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

    October 19, 2015 at 9:39 am #520774
    Ismael

    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

    October 20, 2015 at 4:16 am #521320
    AlainTernet

    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.

    October 21, 2015 at 3:52 am #522113
    Rikard

    Hi,

    Please try the following to control the opacity on hover: 

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

    Best regards,
    Rikard

    October 21, 2015 at 7:06 am #522145
    AlainTernet

    It works now !
    Thanks Rikard !

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