social icons in footer position

  • Resolved hodgy06

    (@hodgy06)


    10 years, 9 months ago

    hey guys,
    I have tried to make a snippet to put a instagram logo in the header and footer but I can’t get the footer instagram icon to line up with the others. If I try and shift the footer icon position, its put the header one out of alignment.
    my site https://www.energyforlife.net.au
    the code I am trying to use

    /* change instagram logo */
    .icon-instagram:before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    padding: 3px 0 0 2px;
    position: relative;
    top: 4px;
    background: url("https://www.energyforlife.net.au/wp-content/uploads/2014/06/Instagram-logo.png") no-repeat;
background-size: 1.08em 1.14em
}

Viewing 7 replies - 1 through 7 (of 7 total)

  • Something like that ?

    .colophon .icon-instagram:before {
    width: 1.15em;
    height: 1.15em;
    top: 0.42em;
    background-size: 1.15em 1.15em;
}

    Play with those values.

    Thread Starter hodgy06

    (@hodgy06)

    thanks, I think that did the trick. Also when I resize the window really small, the header instagram icon moves out of line. any ideas on this one?

    Really small like?

    Thread Starter hodgy06

    (@hodgy06)

    when viewing on my iphone or if I shrink my pc screen down to a similar size as my phone. The icon jumps out of place

    Emulating the iphone with google chrome dev tools, I can see that the instagram icon in the header (not in the footer) is mis-aligned.
    Try using:

    /* change instagram logo */
    .icon-instagram:before {
    content: "";
    width: 1.14em;
    height: 1.08em;
    display: inline-block;
    padding: 3px 0 0 2px;
    position: relative;
    top: 4px;
    background: url("https://www.energyforlife.net.au/wp-content/uploads/2014/06/Instagram-logo.png") no-repeat;
background-size: 1.08em 1.14em
}

    Thread Starter hodgy06

    (@hodgy06)

    thanks for your help d4z_c0nf, much appreciated. that’s pretty much perfect. I should be able to fine tune it from here.

    ??
    You’re welcome

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘social icons in footer position’ is closed to new replies.