Adding Custom Social Links And Icons To Chirpy Jekyll Theme

This guide walks you through my process used to enhance my Chirpy-themed Jekyll site with custom social links and icons, in particular to include my presence on Farcaster. I explored some solutions designed for the Jekyll default Minima theme and then combined several ideas to create a straightforward method that works for Chirpy. This guide outlines my approach, making it easy for anyone else looking to personalize their Chirpy site with social media links and icons for custom platforms.

The Problem

I wanted to add custom social links and icons to my Chirpy-themed Jekyll site because my deepest social presence is on Farcaster which isn’t supported by Chirpy. I found a few solutions described online, but they were for the default Jekyll theme, Minima, and didn’t work for the Chirpy theme I’m using. I was able to combine a few ideas and create a solution that works and is easy to implement for Chirpy.

Farcaster arch

Specifically, I wanted to add the icon and link to my most active social media platform, Farcaster.

The Solution

I found a solution that combined a few other approaches and is easy to implement. I described my solution on Chirpy’s github discussion for anyone else who wants to add custom social links and icons to their Chirpy-themed Jekyll site, but here it is in longform.

Social link buttons

Overview

Basically, we want to add icons as svgs for each custom social link so that we can use them in the social links section of the sidebar or anywhere else. To accomplish that, just follow these steps:

1. Create custom icons as a custom font using the social media logos.
2. Add the custom font to the Chirpy theme using CSS.
3. Create the custom link and icon mapping in the _data/contact.yml file.

Note: Make sure you name the icons whatever you want to refer to them as on your site before uploading to icomoon in step 1. The names cannot be changed in CSS later. I’m using CUSTOM_ICON_NAME to refer to the icon in this example CSS file.

Step 1: Create Custom Icons as a Custom Font Using the Social Media Logo

We’re going to use IcoMoon to create custom icons as a custom CSS font from the social media svg.

1. Go to IcoMoon and click on “Import Icons”.
2. Choose the svg files for the social media logos you want to use.
3. Select the icons you uploaded.
4. Click on “Font” at the bottom of the page and download the zip file.
5. Unzip the file.
6. Copy the contents of the fonts folder to the assets/fonts folder in your Jekyll site.

Step 2: Add the Custom Font to the Chirpy Theme Using CSS

By appending CSS rather than replacing the file entirely, we are keeping the default theme and just adding the custom font.

1. Create a copy of the jekyll-theme-chirpy.scss file in the assets/css folder of your Chirpy site.
2. Append the contents of the style.css file downloaded from icomoon in step 1 to the assets/css/jekyll-theme-chirpy.scss file in your site.

The final file should look like this:

@use 'main 
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%} 
';

@font-face {
  font-family: 'icomoon';
  src: url('/assets/fonts/icomoon.eot?weotyf');
  src: url('/assets/fonts/icomoon.eot?weotyf#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?weotyf') format('truetype'),
    url('/assets/fonts/icomoon.woff?weotyf') format('woff'),
    url('/assets/fonts/icomoon.svg?weotyf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.CUSTOM_ICON_NAME:before {
  content: '\e900';
}

Step 3: Create the Custom Link and Icon Mapping

1. Create a copy of the contact.yml file in the _data folder of your Chirpy site.
2. Add the custom link and icon mapping to the _data/contact.yml file in your site.

The final file will have a custom entry that looks like this:

- type: CUSTOM_SOCIAL_TYPE
  icon: "CUSTOM_ICON_NAME"
  url: "CUSTOM_SOCIAL_LINK_URL"

Note: Your icon name must match the icon name in the modified jekyll-theme-chirpy.scss file.