How to add additional social media icons

Themes
1

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

image
image1417×268 15.1 KB

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

image
image1406×585 46.1 KB

  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.

2

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>
3

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
4

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

5

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

6

Thank you, it worked.

1 Like
7

No problem, have a good day!

8

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.

1 Like
9

To answer my own question you need to use:

        font-family: "Font Awesome Kit";

This then works :)

2 Likes