Pride 2025: Be an Ally by Raising Up a Flag
Published:
Happy Pride Month! June is a time for celebration, reflection, and showing support for the LGBTQ+ community. As developers, we have a unique canvas for expression: our own websites. Adding a small touch of Pride to a personal site is a wonderful way to signal that it’s a safe, inclusive space and to stand as an ally.
The First Idea: Adding a Flag Element
This year, I wanted to add a Pride element to my website’s navigation bar. What started as a plan to add a simple flag element evolved into a much more elegant and integrated solution. I wrote this tutorial to share how I applied a pride flag gradient to a Font Awesome icon on my Jekyll site using the lgbtq.css library and a clever CSS trick.
Step 1: Link the Required Stylesheets
First, we need to include two external CSS libraries in our website’s <head>: Font Awesome for the icon itself, and lgbtq.css for the pride flag gradients. The easiest way is to use a CDN. Add the following lines to the _includes/head/custom.html file.
<link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css)">
<link rel="stylesheet" href="[https://unpkg.com/lgbtq.css](https://unpkg.com/lgbtq.css)">
Step 2: Define the Gradient Style
Next, create a CSS class that applies the gradient effect. Add the following code to our _sass/_custom.scss file.
.rainbow-icon {
/* Use a gradient variable from lgbtq.css (e.g., --gay, --rainbow) */
background: var(--gay);
/* Clip the background to the icon's shape */
-webkit-background-clip: text; /* For WebKit browsers (Chrome, Safari) */
background-clip: text; /* Standard property */
/* Make the icon's color transparent to let the background show */
-webkit-text-fill-color: transparent; /* For WebKit browsers */
color: transparent;
}
Step 3: Apply the Class to Our Icon
Finally, apply the .rainbow-icon class to the icon we want to style. In this example, I modify the Bionic Reading toggle icon in _includes/masthead.html.
<li id="bionic-reading-toggle" class="masthead__menu-item persist tail bionic-toggle" title="Toggle Bionic Reading">
<a>
<i class="fa-solid fa-book-reader rainbow-icon" aria-hidden="true"></i>
</a>
</li>
And that’s it! After saving our changes, the icon will now display the beautiful pride gradient. This simple but powerful technique is a great way to show your allyship.
Happy Pride!