How to add additional social media icons

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.

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

image

  1. Then click on the name of your fontawesome package

  1. You will see the entire line that you need to put in your Code InjectionSite header

  1. 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>
  1. 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.

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>


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

1 Like

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

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

Thank you, it worked.

1 Like

No problem, have a good day!