Social Icon in Footer Help

  • I am trying to add an icon in my footer and am having trouble. Whenever I add my icon, the icon line height is too high… I do not know what to change or how to change it in css. Also, the icon is too close to the second item in my footer, so I will need to space them out. Again, I am unsure how to do this. Here are some pictures to show you what it looks like now, and how I would like it.

    Image 1 and 2 are how it looks now. I would like to have the image 3 height and width.

    SponsorHunter Footer

    Secondly, when I decide to add more social icons, I am thinking of adding them above my “copyright” mark like this — how can I center them?

    Image 4 is what I would like to center once more icons are added.

    SponsorHunter Footer

    Thanks in advance. I’ve been working on this for 2-3 hours now and I haven’t made any progress. I think I have to create a new div? but I’m really not sure how.

    Edit:
    Website is https://www.sponsorhunter.com

    • This topic was modified 8 years, 2 months ago by willc93.
    • This topic was modified 8 years, 2 months ago by willc93.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey!

    There are a lot of CSS alignment tutorials out there, for example this (if you ignore the table stuff^^):
    https://phrogz.net/CSS/vertical-align/index.html

    w3schools is always a good place to start:
    https://www.w3schools.com/css/css_align.asp

    Personally I prefer using Flexbox to achieve this:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Because your theme doesn’t use Flexbox anywhere else I’d probably stick to the other solutions. If you need something more specific, just ask away ??

    • This reply was modified 8 years, 2 months ago by 5k9m.
    Thread Starter willc93

    (@willc93)

    I was able to create a span class to create the distance, but I just cannot seem to get it to align. Any top or bottom padding just pads the entire section even if it’s not within the span. The padding creates a larger footer but even then, the image text are still not aligned.

    This is what I have so far:

    <div id=”footer-banner” class=”designer”><div class=”table”><div class=”table-cell”>
    <span style=”padding-right:25px”>Twitter icon</span>

    ? Copyright 2016. Sponsor Hunter</div></div></div>

    Thread Starter willc93

    (@willc93)

    The span I created actually doesn’t even work… it pushes the copyright too far to the right when I add that span. I’ve even tried just adding the icon anywhere in the footer and trying to align it myself via padding, but the only place I can add it is in its current location. I even tried creating CSS for it and when I apply it nothing happens, so I’m stuck with the span.

    • This reply was modified 8 years, 2 months ago by willc93.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Social Icon in Footer Help’ is closed to new replies.