Social Icons in footer?

Regarding this tutorial, I can get the social icons in the header: How to add social media icons to your Ghost theme

But, I cannot figure out how to get them to show in the footer.

Thoughts?

I’m also looking for the same info. Any help would be appreciated.

This should work as-is for the footer with only minor modifications. The main thing you’re going to need to change is the CSS selectors, to select the footer nav section instead of the header.

So for example, looking at Ruby, a footer link looks like this (inspecting with F12 in the browser):

image

In contrast, the header (with more & different links) looks like this:
image

Looking at the tutorial’s code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-head-menu .nav-facebook a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-facebook a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-facebook a::before {content: "\f09a"}
</style>

It looks like you should be able to swap .gh-foot-menu for .gh-head-menu.

Have you tried that? What happened?

2 Likes

I tried swapping that, and the first link indeed works, but then after that, they are just empty space.

Show the code? Can’t help without more info! :)

1 Like

I am having the same issue

I can’t help you if you don’t show what you’ve tried and what happened! :)

This is the code from Ghost’s tutorial to include social icons in the Casper theme.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-head-menu .nav-twitter a,
    .gh-head-menu .nav-discord a,
    .gh-head-menu .nav-github a,
    .gh-head-menu .nav-linkedin a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-twitter a::before,
    .gh-head-menu .nav-discord a::before,
    .gh-head-menu .nav-github a::before,
    .gh-head-menu .nav-linkedin a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-twitter a::before {content: "\f099"}
    .gh-head-menu .nav-discord a::before {content: "\f392"}
    .gh-head-menu .nav-github a::before {content: "\f09b"}
    .gh-head-menu .nav-linkedin a::before {content: "\f08c"}
</style>

The code as is works and applies the right social icons in the header. However, I swapped all the .gh-head-menu to .site-nav-footer and only the first icon shows up.

Thanks!

Paste your code please?

1 Like

Following, I’m also interested in populating the footer with the social icons and not the header.

Any developer that managed to do this? Would be very beneficial to have the social at the bottom, I guess it’s also standard practice in UX design. @Cathy_Sarisky what do you think?

To our admins @John and @Hannah I have a question: is there any idea on bringing back the social icons (maybe with toggle on/off for header/footer) in the next casper update?

I’m glad to help debug a broken example, but don’t have the time (too much paid work!) this week to install casper and implement the whole solution to see why it’s broken. If you have a publicly available example that follows the tutorial but swaps in the footer div for the head div, I’ll make time to take a look. At the very least, you could post the code injection you’ve created that isn’t working (not the unmodified tutorial). I’ve asked a couple times to see the actual code that’s not working, but no one has done so yet.