Social Icons in footer?

Developer help
21

That’s great! I will try this in the future. Do you have a website displaying the footer social icons? Thanks!

22

Sure, you can visit https://www.timhinkle.io/ and scroll down to the footer to see the social icons.

23

That looks good! But in the middle I have another menu. Any chance to move it on the right (under where I usually put the disclaimer)?

24

Hi @thinkle, I added the following, but it did not work. I also contacted Ghost Support and they asked me to look at this forum instead. And so, I’m going in circles :(

Can you please suggest what am I missing? I’m using the latest Source theme.

.site-footer-nav .nav-twitter a, .site-footer-nav .nav-linkedin a, .site-footer-nav .nav-threads a, .site-footer-nav .nav-instagram a, .site-footer-nav .nav-facebook a { font-size: 0 !important; } .site-footer-nav .nav-twitter a::before, .site-footer-nav .nav-linkedin a::before, .site-footer-nav .nav-threads a::before, .site-footer-nav .nav-instagram a::before, .site-footer-nav .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; } .site-footer-nav .nav-twitter a::before {content: "\e61b" !important;} .site-footer-nav .nav-linkedin a::before {content: "\f0e1" !important;} .site-footer-nav .nav-threads a::before {content: "\e618" !important;} .site-footer-nav .nav-instagram a::before {content: "\f16d" !important;} .site-footer-nav .nav-facebook a::before {content: "\f39e" !important;} .site-footer-nav li:not(:first-child) a::before { display: inline-block; width: auto; height:auto; margin: 0 0 0 20px; background: transparent; }
25

Your CSS selectors are wrong. .site-footer-nav doesn’t exist in Source (at least, not in a quick look at the demo). Try replacing with .gh-footer-menu (all instances)

If that doesn’t fix your problem, I suggest linking your site if it’s available on the internet, because it’s a lot harder to troubleshoot something I can’t see.

26

Hi Cathy,

Here’s the site where I’m trying the footer nav to work :pray:t2:

27

Did you try my suggestion above?

28

Yes, I changed them to .gh-footer-menu like you suggested.

29

When you’re trying to troubleshoot a problem, it helps to look at the error messages in the console (F12 and then click the console tab)

Failed to find a valid digest in the ‘integrity’ attribute for resource ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css’ with computed SHA-512 integrity ‘W/zrbCncQnky/EzL+/AYwTtosvrM+YG/V6piQLSe2HuKS6cmbw89kjYkp3tWFn1dkWV7L1ruvJyKbLz73Vlgfg==’. The resource has been blocked.

Either remove the SHA integrity bit, or update for one that matches the newer version.

1 Like
30

Thank you so much!!!
I removed that bit, and it works now.

I spent half-a-day trying to figure this out :( How on earth are people with no IT knowledge expected to do this? Why can’t Ghost team include this natively as part of every theme. Even the Ghost Support team couldn’t help. I know people may want different social media icons…but this was needlessly too time-consuming. Looking at the forum and online searches, it is clear that many folks have been trying to figure this out. I’d rather work on publishing good content than trying to fix things that should be a part-and-parcel of any modern theme. Anyway, that’s my rant for today.

Thanks again Cathy!!!

1 Like
31

Glad to help. If the spirit moves you, feel free to recommend my site. :)

1 Like