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):
In contrast, the header (with more & different links) looks like this:
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?
1 Like
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.
To me the social icons in the header near the navigational menu donât make sense. Also they donât even open in a new window. It makes me wonder why they removed the previous default setup in casper, where you could have at least two icons on the top right near the subscribe button.
Itâs a very bad design idea, I donât know who is the person that gave the OK to do this on the most important Ghost theme.
1 Like
Instead of primary navigation, I added the links to secondary navigation. Then, I just replaced âheadâ with âfootâ in the auto-generated code and it seems to work fine.
<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-foot-menu .nav-linkedin a,
.gh-foot-menu .nav-facebook a,
.gh-foot-menu .nav-twitter a {
font-size: 0 !important;
}
.gh-foot-menu .nav-linkedin a::before,
.gh-foot-menu .nav-facebook a::before,
.gh-foot-menu .nav-twitter 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-foot-menu .nav-linkedin a::before {content: "\f08c"}
.gh-foot-menu .nav-facebook a::before {content: "\f09a"}
.gh-foot-menu .nav-twitter a::before {content: "\f099"}
</style>
3 Likes
This indeed works.
One question about a small detail. Latest font-awesome version is 6.3.0 but when I update the CDN href url from 6.2.0 to 6.3.0, it does not work anymore. Is this related to integrity field? Where can I get the correct sha512 key for the corresponding library versions?
EDIT: I found the answer. It is indeed due to SHA hash mismatch. One can find the correct hash for whatever version from https://www.srihash.org/
1 Like
Now the only final touch left is to make the social media icon urls to open in new window when clicked. Any tips would be appreciated.
If you can edit the HTML, add the target="_blank" attribute to the <a> tag. Otherwise, youâll need to use JS to target the links in question and add the attribute that way.
This doesnât seem to work for me. The. .gh-foot-menu class doesnât appear anywhere in my code (Ghost 5.47.0/Casper 5.4.10). Using .site-nav-footer instead produces the same result as reported by @tsathe . The first icon shows up, but the others do not.
Hereâs the code injection Iâve pasted into the site header:
<!-- SOCIAL ICONS -->
<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>
.site-footer-nav .nav-facebook a,
.site-footer-nav .nav-soundcloud a,
.site-footer-nav .nav-github a,
.site-footer-nav .nav-instagram a,
.site-footer-nav .nav-linkedin a,
.site-footer-nav .nav-mastodon a {
font-size: 0 !important;
}
.site-footer-nav .nav-facebook a::before,
.site-footer-nav .nav-soundcloud a::before,
.site-footer-nav .nav-github a::before,
.site-footer-nav .nav-instagram a::before,
.site-footer-nav .nav-linkedin a::before,
.site-footer-nav .nav-mastodon 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;
}
.site-footer-nav .nav-facebook a::before {content: "\f09a";}
.site-footer-nav .nav-soundcloud a::before {content: "\f1be";}
.site-footer-nav .nav-github a::before {content: "\f09b";}
.site-footer-nav .nav-instagram a::before {content: "\f16d";}
.site-footer-nav .nav-linkedin a::before {content: "\f08c";}
.site-footer-nav .nav-mastodon a::before {content: "\f4f6";}
</style>
<!-- /SOCIAL ICONS -->
I was able to solve this by adding !important to the âcontentâ property and adding an additional style override. I also doubled the right margin to 20px for the benefit of mobile users.
<!-- SOCIAL ICONS -->
<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>
.site-footer-nav .nav-facebook a,
.site-footer-nav .nav-soundcloud a,
.site-footer-nav .nav-github a,
.site-footer-nav .nav-instagram a,
.site-footer-nav .nav-linkedin a,
.site-footer-nav .nav-mastodon a {
font-size: 0 !important;
}
.site-footer-nav .nav-facebook a::before,
.site-footer-nav .nav-soundcloud a::before,
.site-footer-nav .nav-github a::before,
.site-footer-nav .nav-instagram a::before,
.site-footer-nav .nav-linkedin a::before,
.site-footer-nav .nav-mastodon 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;
}
.site-footer-nav .nav-facebook a::before {content: "\f09a" !important;}
.site-footer-nav .nav-soundcloud a::before {content: "\f1be" !important;}
.site-footer-nav .nav-github a::before {content: "\f09b" !important;}
.site-footer-nav .nav-instagram a::before {content: "\f16d" !important;}
.site-footer-nav .nav-linkedin a::before {content: "\f08c" !important;}
.site-footer-nav .nav-mastodon a::before {content: "\f4f6" !important;}
.site-footer-nav li:not(:first-child) a::before {
display: inline-block;
width: auto;
height:auto;
margin: 0 0 0 20px;
background: transparent;
}
</style>
<!-- /SOCIAL ICONS -->
1 Like
It always struck me as odd that Ghostâs âsocial accountsâ feature includes a line for a Facebook or Twitter link, but not IG. I realize that we can ultimately do pretty much anything we need to do, through theming and custom code, but it makes a lot of sense to me to have a standard link to the social account most relevant to my blogâInstagramâin the back end, and let my theme interpret that however it chooses to.
1 Like