Adding social media icons to your Ghost blog - Part 2

In the previous post, we set up our development environment and created a Github workflow to automatically deploy our custom theme.

Let's start adding our icons to the theme.

Preparing the icons

1. Head over to simpleicons.org and download the icons as SVG files.

2. Copy them to the partials\icons folder in the themes folder.

3. Rename the SVG files to .hbs. Edit the files and add fill attribute as shown in the screenshot below.

Adding icons to the theme

1. Open default.hbs file and search for <div class="gh-social"> and add the icons as shown below (modify the links to suit your needs).

<a class="gh-social-link gh-social-twitter" href="https://stackoverflow.com/users/12178/shoban" title="StackOverflow" target="_blank" rel="noopener">{{> "icons/stackoverflow"}}</a> 
<a class="gh-social-link gh-social-twitter" href="https://www.linkedin.com/in/shoban-kumar-8737a71b/" title="Linkedin"
                            target="_blank" rel="noopener">{{> "icons/linkedin"}}</a>
<a class="gh-social-link gh-social-twitter" href="https://instagram.com/shobankr" title="Instagram" target="_blank" rel="noopener">{{> "icons/instagram"}}</a

2. Save the file, commit and push your changes. Within a few minutes, the Github action will finish and you should see the icons.

That's it! You have your shiny new social icons :)