How to Add Social Media Icons to Your Site in Ghost

Posted on January 20th, 2025

If you want to enhance your Ghost site by connecting with your audience on social media, adding social media icons is a great way to do it. You can easily add any social media icon to your Ghost site directly from Ghost Admin. In this tutorial, we’ll guide you through the process step by step, ensuring you can seamlessly integrate these icons and boost your site’s social presence.

Add Your Social Media Links

Head to Settings and then select Navigation. In the Primary Navigation section, add a new item for each social media platform you want to include. Make sure the label is the name of the social media network. For instance, if you want to link to your Threads profile, use “Threads” as the label.

Code Generator

Continue with the tutorial for a detailed guide on how to write the code for your theme, or you can use our generator to create the code automatically.

Select your official Ghost theme and the social media icons you’d like to include. Then, just copy the code and paste it into Settings → Code Injection → Site Header. Click Save, and you’re all set! Don’t forget that you still need to add the navigation items as mentioned earlier.

If you want to learn how to add the icons manually or explore more about the process, keep reading the tutorial below.

Add the Icon Library

We’ll be using FontAwesome for our icons. Let’s add it to our Ghost site. Go to Settings and then Code Injection, and select Site Header.

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

Add the Base Styles

Next, add the basic icon styling right after the line of code you just added.

<style>
    :where(.nav, .gh-head-menu) .nav-behance a,
    :where(.nav, .gh-head-menu) .nav-dribbble a,
    :where(.nav, .gh-head-menu) .nav-mastodon a,
    :where(.nav, .gh-head-menu) .nav-threads a,
    :where(.nav, .gh-head-menu) .nav-x a,
    :where(.nav, .gh-head-menu) .nav-youtube a {
        font-size: 0 !important;
    }
    :where(.nav, .gh-head-menu) .nav-behance a::before,
    :where(.nav, .gh-head-menu) .nav-dribbble a::before,
    :where(.nav, .gh-head-menu) .nav-mastodon a::before,
    :where(.nav, .gh-head-menu) .nav-threads a::before,
    :where(.nav, .gh-head-menu) .nav-x a::before,
    :where(.nav, .gh-head-menu) .nav-youtube 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>

You’ll see that the styles include the names of the social media networks. If the one you want to use is already listed, you can copy those styles as they are. If not, you’ll need to modify them to add your new social media network. For instance, to include LinkedIn, you would add: :where(.nav, .gh-head-menu) .nav-linkedin a and :where(.nav, .gh-head-menu) .nav-linkedin a::before.

Add the Social Media Icons

The last step is to include the styles that show the actual icons for each social media network. Here’s the code for the icons mentioned earlier. Make sure to add this to the Site Header.

<style>
    :where(.nav, .gh-head-menu) .nav-behance a::before {content: "\f1b4"}
    :where(.nav, .gh-head-menu) .nav-dribbble a::before {content: "\f17d"}
    :where(.nav, .gh-head-menu) .nav-mastodon a::before {content: "\f4f6"}
    :where(.nav, .gh-head-menu) .nav-threads a::before {content: "\e618"}
    :where(.nav, .gh-head-menu) .nav-x a::before {content: "\e61b"}
    :where(.nav, .gh-head-menu) .nav-youtube a::before {content: "\f167"}
</style>

When you put everything together, the Code Injection will look like this:

Copy the unicode (the value after content) for any extra social media icons you want from the FontAwesome website. Then, follow the same pattern to create a new CSS rule.

For instance, to add a LinkedIn icon, use this CSS rule:

:where(.nav, .gh-head-menu) .nav-linkedin a::before { content: "\f08c"; }

Save your styles in Code Injection, refresh your homepage, and enjoy your new, stylish social media icons!

Conclusion

By adding FontAwesome and some CSS to Code Injection, you’ve created a personalized Ghost site that showcases your social media icons prominently. This method is low-maintenance, so you can keep updating your theme without having to redo this code.

We’d love to see your custom social media icons! Share your site with the Ghost community on our official Forum. It’s also a great spot to get help and connect with other Ghost users.

Leave a Reply