Jekyll Blog: Icons – CSS classes and Font Awesome

How icons work in the Chirpy theme: using Font Awesome via CSS classes in HTML, plus a simple Python script that generates an icon grid in Markdown.

Posted Feb 19, 2026 Updated Feb 20, 2026

By Marcin Szewczyk

2 min read

Icons are small UI elements, but they make a big difference to readability and the overall look of a page.

On this blog I use icons for a few practical things:

light / dark theme toggle:
RSS:
landing page:
LinkedIn:
GitHub:
ORCID:
faculty-hosted page:

Below I briefly describe how they work and how I use them.

From image files to CSS icons

In early HTML, icons were simply small image files inserted with <img> (for example .gif or .png). In older Java applications (25 years ago), I used the standard icon set provided by Java Swing (© Sun Microsystems, 2000):

Fig. 1. .gif image files used as Java Swing icons, © Sun Microsystems, 2000.

Over time, other techniques appeared (CSS, SVG). One of the popular solutions became Font Awesome. It is an icon set distributed as a font/SVG with appropriate CSS classes. Icons are rendered like a font (or SVG), and selecting an icon and its appearance is reduced to choosing the right CSS classes.

The full Font Awesome set is paid (https://fontawesome.com/), but a very large number of icons are available in the free version.

What “icons” mean in Jekyll (example: Chirpy)

In Jekyll themes, icons are most often implemented using Font Awesome.

Chirpy already includes Font Awesome in its layout, so in a post (or any HTML snippet) it is enough to use the appropriate classes.

In practice, an icon is inserted using an <i> element with appropriate CSS classes.

For example:

  
<i class="fab fa-github" aria-hidden="true"></i>

Classes have two parts:

fas / far / fab – icon family/style:
- fas → solid (filled)
- far → regular (outline)
- fab → brands (logos)
fa-github — icon name.

Icons used on this blog:

  
<i class="fas fa-adjust text-muted" aria-hidden="true"></i>
<i class="fas fa-rss text-muted" aria-hidden="true"></i>
<i class="fas fa-globe text-muted" aria-hidden="true"></i>
<i class="fab fa-linkedin text-muted" aria-hidden="true"></i>
<i class="fab fa-github text-muted" aria-hidden="true"></i>
<i class="fas fa-id-card text-muted" aria-hidden="true"></i>
<i class="fas fa-landmark text-muted" aria-hidden="true"></i>

Python script for generating an icon grid

I added a simple Python script to keep selected icon names organized.

What the script does:

reads a list of classes from a text file
generates a Markdown grid of icons
writes a ready-to-paste .md file

Input file – icon names: icons-font-awesome-input.txt.

Output file – generated Markdown: icons-font-awesome-output.md.

Python code: icons-generator.py.

Example of icon grid

Summary

In Chirpy, adding an icon comes down to adding the right CSS classes to an <i> element.

I choose the icon name → I type the CSS class → I get the icon on the page.

Simple → works → looks good.

Jekyll Blog