This one is pretty niche even by my standards. Notes largely for my own benefit, but they may be useful if you:

• are creating a Jekyll (https://jekyllrb.com)-based website or blog

• specifically, a site using the Chirpy theme (https://github.com/cotes2020/jekyll-theme-chirpy) or one based on it

• and you want to add, at the bottom of the left sidebar, a custom icon i.e. one that cannot be added to the contact.yml file using a Font Awesome icon

I’ll assume that you have git-cloned jekyll-theme-chirpy, run bundle and are able to serve the site on a local machine by running bundle exec jekyll serve. On opening 127.0.0.1:4000 in a browser, the bottom of the left sidebar looks something like this:

The icons for Github, X/Twitter, mail and RSS are provided via Font Awesome (https://fontawesome.com). They are specified in the contact.yml file, like so:

• type: github icon: “fab fa-github”

Which is great – but what if you’d like to add a link to a resource that doesn’t have a Font Awesome icon? Specifically, in my case, a link to my iNaturalist profile (https://www.inaturalist.org/people/neilfws)? Here are the steps.

1. Locate or prepare your icon in SVG format

There are SVG files of the iNaturalist icon online – here for example (https://iconape.com/inaturalist-seeklogo-com-2-logo-icon-svg-png.html) – but I found that some of them didn’t work well in subsequent steps, and I wanted grayscale. So I downloaded a PNG file (https://brandfetch.com/inaturalist.org?library=default&collection=logos&asset=id9UEYTryQ), converted it to grayscale and then used an online PNG to SVG conversion tool. There are several of these available and I found that they all work differently and again, don’t always generate files that work well in later steps. I used this one (https://picsvg.com) with the ‘Internal 1’ filter.

The final result:

2. Convert the SVG file to a font

Conversion to font is achieved using the tool IconMoon (https://icomoon.io/app/#/select). Click on ‘Import Icons’ at the top of the page and upload your SVG file. By default it will be named ‘Untitled Set’. Next, click on ‘Generate Font’ at the bottom of the page. You’ll see a page with a preview of your icon. If all looks good, click on ‘Download’ at the bottom of the page, which downloads a ZIP file named icomoon.zip.

3. Copy the font icon files to the appropriate locations

Unzipping the ZIP file from step 2 generates a folder, icomoon, with a number of files and sub-folders inside.

Copy the folder named fonts to the assets folder of your local jekyll-theme-chirpy git clone.

Copy the file named style.css to the assets/css folder of your local jekyll-theme-chirpy git clone.

4. Edit files

Now we need to edit three files in our local jekyll-theme-chirpy.

4.1 _includes/head.html

Somewhere between the tags – near the bottom is good – add these lines:

4.2 style.css

Edit the top of this file so as the path to fonts is relative. It should look like this:

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

Note that further down, we have the specification for the icon font:

.icon-inat4:before { content: “\e900”; }

My SVG file was named inat4.svg and so the icon font is also named inat4. This is also important for the final edit.

4.3 contact.yml

Edit contact.yml, placing the specification for your custom icon in your desired order. Mine comes last: I’ve removed the icons and links for X/Twitter, email and RSS, and added an icon and link for Stack Overflow. So the full set, including my custom iNaturalist icon, looks like this:

• type: linkedin icon: ‘fab fa-linkedin’ # icons powered by https://fontawesome.com/ url: ‘https://www.linkedin.com/in/nfwsaunders/’

• type: github icon: “fab fa-github”

• type: stack-overflow icon: ‘fab fa-stack-overflow’ url: ‘https://stackoverflow.com/users/89482/neilfws’

• type: inaturalist icon: ‘icon-inat4’ url: ‘https://www.inaturalist.org/people/neilfws’

5. We’re done!

If everything goes to plan you can fire up the local Jekyll server, open the site in a browser and there is your custom icon and link:

Last words

With thanks to user lamininA1: most of the instructions in this post are taken directly from their contribution to this discussion (https://github.com/cotes2020/jekyll-theme-chirpy/discussions/1763).