How to add additional social media icons

AnimaVillis · January 19, 2024, 10:41am

Hi!
I know this guide may cause some minor issues for users. Therefore, based on the above-mentioned guide, I updated the content to make it 100% working.

Go to https://fontawesome.com/ and create an account there.
After creating an account, create your own kit. Your Kits | Font Awesome

Then click on the name of your fontawesome package

You will see the entire line that you need to put in your Code Injection → Site header

Go to code generator from tutorial and USE ONLY
How to add social media icons to your Ghost theme

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

    .gh-head-menu .nav-discord 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-discord a::before {content: "\f392"}
</style>

That’s all. Enjoy!

IMPORTANT This work only on default themes from ghost. If You have own custom theme, You need to check CSS code for work it correctly.

Albena_Kostova · February 7, 2024, 10:21am

Hi there,

The SM icons were working fine up until now, and suddenly icons disappeared and I was seeing just empty rectangles. Links are working fine though, the problem is in the icons’ codes, I suppose. I can’t figure out how to remedy this, I tried everything. I managed to get the icons to spell the names of the respective SM.

Thank you in advance for your help.

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

<style>
.gh-foot-menu .nav-x-twitter a,
.gh-foot-menu .nav-linkedin-in a {
  font-size: 0 !important;
}
  
.gh-foot-menu .nav-x-twitter a::before,
.gh-foot-menu .nav-linkedin-in 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;
}
</style>
<style>
.gh-foot-menu .nav-x-twitter a::before {
  content: "\e61b";
}
.gh-foot-menu .nav-linkedin-in a::before {
  content: "\f0e1";
}
</style>

AnimaVillis · February 7, 2024, 10:36am

Hi,

Thanks for contact.
Please read whole article one more time. This tutorial works 100% fine but You need to change Your cdn link from fontawesome.

Have a good day!
Peter

jannis · February 7, 2024, 11:38am

Since the icons already worked once, do you potentially have a live URL we can have a look at?

Albena_Kostova · February 7, 2024, 11:52am

Yes, sorry for not providing it earlier - https://web3plusai.xyz/.

Albena_Kostova · February 7, 2024, 12:11pm

Thank you, it worked.

AnimaVillis · February 7, 2024, 2:20pm

No problem, have a good day!

Ric_Harvey · September 24, 2024, 5:46pm

Hey folks, I’ve used this post to get font-awesome working and it does well, thank you.

I do have one further question though. In my kit I have a couple of uploaded custom icons (pixelfed and peertube).

I can see how to add these into this method but

  font-family: "Font Awesome 6 Brands";

is not the right font-family and I can’t for the life of me find the right name or even guess it (have tried font-family: "Font Awesome 6 Kit/Uploads/Kit Uploads";) All fail and show the rectangle.

If I write Pro at the end instead i get the incorrect icon because e000 is a caravan in that set and not the peertube icon.

Has anyone figured this out or can anyone point me in the correct direction.

Ric_Harvey · September 24, 2024, 9:54pm

To answer my own question you need to use:

        font-family: "Font Awesome Kit";

This then works :)

Detlev · December 7, 2024, 9:10pm

Has anything changed in regards to this syntax, because it does not work for me today: 2024-12-07

Ghost = v5.104.0
Theme = source v1.4.1
My free fontawesome kit version = v6.7.1

Fontawesome Kit domain configured with wildcard ‘*’ to accept all subdomains; no custom icons.

I’ve updated my previously working code with your instructions here including my own [NEW] fontawesome script snippet, made sure the my style snippets use your format (actually tried both approaches) rather than what’s listed on How to add social media icons to your site.

<script src="https://kit.fontawesome.com/{provided}.js" crossorigin="anonymous"></script>
<style>
    .gh-head-menu .nav-bluesky a,
    .gh-head-menu .nav-linkedin a,
    .gh-head-menu .nav-keybase a,
    .gh-head-menu .nav-rss a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-bluesky a::before,
    .gh-head-menu .nav-linkedin a::before,
    .gh-head-menu .nav-keybase a::before,
    .gh-head-menu .nav-rss 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-bluesky a::before {content: "\e6a3"}
    .gh-head-menu .nav-linkedin a::before {content: "\f08c"}
    .gh-head-menu .nav-keybase a::before {content: "\f4f5"}
    .gh-head-menu .nav-rss a::before {content: "\f143"}

    .gh-footer-menu .nav-bluesky a,
    .gh-footer-menu .nav-linkedin a,
    .gh-footer-menu .nav-keybase a,
    .gh-footer-menu .nav-rss a {
        font-size: 0 !important;
    }

    .gh-footer-menu .nav-bluesky a::before,
    .gh-footer-menu .nav-linkedin a::before,
    .gh-footer-menu .nav-keybase a::before,
    .gh-footer-menu .nav-rss 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-footer-menu .nav-bluesky a::before {content: "\e6a3"}
    .gh-footer-menu .nav-linkedin a::before {content: "\f08c"}
    .gh-footer-menu .nav-keybase a::before {content: "\f4f5"}
    .gh-footer-menu .nav-rss a::before {content: "\f143"}
</style>

I’m done hacking on this for now and will simply rip it out since it’s useless as is. When I learn of the correct syntax, I’ll add it back in

Cheers ~

PS: Does the order these are listed in have to match the order of the secondary menu where these are referenced?
PPS: I also tried font-family: "Font Awesome Kit", font-family: "Font Awesome 6 Kit", font-family: "bluelfonts", …

Cathy_Sarisky · December 7, 2024, 10:03pm

Those selectors don’t match Source’s classes, which is why they don’t work.

.gh-head-menu .nav-bluesky a needs to be .gh-navigation-menu .nav-bluesky a and so on.

For the footer, what you have /should/ be working.

Detlev · December 7, 2024, 10:57pm

Thank you so much, that got me on the right track!

Now it works ~

<script src="https://kit.fontawesome.com/{{YOUR_CODE}}.js" crossorigin="anonymous"></script>

<style>
    :where(.nav, .gh-navigation-menu) .nav-bluesky a,
    :where(.nav, .gh-navigation-menu) .nav-linkedin a,
    :where(.nav, .gh-navigation-menu) .nav-keybase a,
    :where(.nav, .gh-navigation-menu) .nav-rss a {
        font-size: 0 !important;
    }

    :where(.nav, .gh-navigation-menu) .nav-bluesky a::before,
    :where(.nav, .gh-navigation-menu) .nav-linkedin a::before,
    :where(.nav, .gh-navigation-menu) .nav-keybase a::before,
    :where(.nav, .gh-navigation-menu) .nav-rss a::before {
        font-family: "Font Awesome Free";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    :where(.nav, .gh-navigation-menu) .nav-bluesky a::before {content: "\e6a3"}
    :where(.nav, .gh-navigation-menu) .nav-linkedin a::before {content: "\f08c"}
    :where(.nav, .gh-navigation-menu) .nav-keybase a::before {content: "\f4f5"}
    :where(.nav, .gh-navigation-menu) .nav-rss a::before {content: "\f143"}
  
    :where(.nav, .gh-footer-menu) .nav-bluesky a::before,
    :where(.nav, .gh-footer-menu) .nav-linkedin a::before,
    :where(.nav, .gh-footer-menu) .nav-keybase a::before,
    :where(.nav, .gh-footer-menu) .nav-rss a::before {
        font-family: "FontAwesome";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    :where(.nav, .gh-footer-menu) .nav-bluesky a::before {content: "\e6a3"}
    :where(.nav, .gh-footer-menu) .nav-linkedin a::before {content: "\f08c"}
    :where(.nav, .gh-footer-menu) .nav-keybase a::before {content: "\f4f5"}
    :where(.nav, .gh-footer-menu) .nav-rss a::before {content: "\f143"}
</style>

Topic		Replies	Views
How to add additional social media icons on the Edition theme Themes	7	1003	January 18, 2024
Add LinkedIn and other Social Media Icons Using Ghost	6	765	January 2, 2024
Documentation fix needed for social icons tutorial Using Ghost	1	548	March 29, 2021
Social icons in the nav Themes	1	24	January 25, 2025
Social Icons in Ghost Themes	5	847	January 19, 2023

How to add additional social media icons

Related topics