social media icons on abstract floating blocks

How to add social media icons to your site

Expand your social media presence by adding all of your social media network icons to your Ghost theme.


Add any social media icon to your Ghost site from Ghost Admin. This tutorial will walk you through the process, step by step.

πŸ“’
This tutorial uses the default Ghost theme, Casper, as a working example. The techniques presented below can also be applied to other Ghost themes.
Casper with new icons

Go to Settings β†’ Navigation. To the Primary Navigation area, add a new item for every social media network you want to include. It's essential that the label be the name of the social media network. For example, to add a link to your Instagram page, use "Instagram" as the navigation label.

Ghost Admin navigation area

Code generator

Follow the rest of the tutorial for a step-by-step guide on how to write the code for your theme β€” or take a shortcut and use our generator to create the code for you automatically.

Choose your official Ghost theme and the social media icons you want. Then, copy the code and paste it into Settings β†’ Code Injection β†’ Site Header. Click Save and you're done πŸ₯³ Remember that you still need to add the navigation items, as explained in the previous step.

To see how to add the icons manually or learn more about the process, continue the tutorial below.

Add the icon library

We're going to use FontAwesome as our icon library. Let's load it on our Ghost site. Go to Settings β†’ Code Injection β†’ Site Header.

Paste in the following line of code and click Save.

<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" />
Add FontAwesome to your Ghost site

Add the base styles

Next, add the base icon styling right after the line of code from the previous step.

<style>
.gh-head-menu .nav-facebook a,
.gh-head-menu .nav-github a,
.gh-head-menu .nav-instagram a,
.gh-head-menu .nav-mastodon a,
.gh-head-menu .nav-tiktok a,
.gh-head-menu .nav-twitter a {
  font-size: 0 !important;
}
.gh-head-menu .nav-facebook a::before,
.gh-head-menu .nav-github a::before,
.gh-head-menu .nav-instagram a::before,
.gh-head-menu .nav-mastodon a::before,
.gh-head-menu .nav-tiktok a::before,
.gh-head-menu .nav-twitter 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>

Notice that the styles include the names of the social media networks. If the social media network you want to use is already included, then you can copy these styles as is. Otherwise, you'll need to update them to include the new social media network. For example, for LinkedIn, you would add: .gh-head-menu .nav-linkedin a and .gh-head-menu .nav-linkedin a::before.

Code Injection now looks like this:

Code Injection with base styles

Add the social media icons

The final step is to add styling that pulls in the actual icon for each social media network. Here's the code for the icons listed above. Again, add it to the Site Header.

<style>
.gh-head-menu .nav-facebook a::before {
  content: "\f09a";
}
.gh-head-menu .nav-github a::before {
  content: "\f09b";
}
.gh-head-menu .nav-instagram a::before {
  content: "\f16d";
}
.gh-head-menu .nav-mastodon a::before {
  content: "\f4f6";
}
.gh-head-menu .nav-tiktok a::before {
  content: "\e07b";
}
.gh-head-menu .nav-twitter a::before {
  content: "\f099";
}
</style>

For additional social media icons, copy the unicode (the value after content) from FontAwesome's website. Then, follow the pattern above to create a new CSS rule.

For example, add a LinkedIn icon with the following CSS rule:

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

Save your styles in Code Injection, refresh your homepage, and revel in your new, beautiful social media icons ✨

Ghost website with custom icons

Summary

By adding FontAwesome and some CSS to Code Injection, you now have a customized Ghost site that puts your social media icons front and center. This approach has the benefit of being maintenance-free, meaning that you can continue to install the latest version of your theme without having to worry about reincorporating this code.

We're eager to see your custom social media icons. Come share your site with the whole Ghost community over on our official Forum. It’s also a fantastic place to get help and meet other people using Ghost.

On this page Introduction

How was the tutorial?

Be the first to know.

Join the Ghost developer community β€” sign up to get early access to the latest features, developer tools, and tutorials.

No spam. Once a month. Unsubscribe any time.