Fixing the “Proud” Icon In The Social Icons

Ever since I started using WordPress instead of the statically compiled Markdown thing I’ve been using the ClearBook theme. I’ve made a handful of small changes here and there, mostly lightly colorizing it, but up until recently it was all with things exposed, either by the theme or WordPress itself, within the Customize interface.

One thing I’ve been trying to get working the whole time, since ClearBook uses FontAwesome, is to add the transgender icon to the list, as an expression of pride. (The double-venus was my second choice.) But up until now, I was only getting the generic box-with-hex-digits symbol. I finally fixed it, but it took a deep dive into the theme files.

Step 1: Preparing for Editing

WordPress runs within a container environment here, which, for all its benefits, does come with a big downside – accessing the files within the container is kind of a pain in the ass. Sure, I could set up another container to mount all the volumes and then edit them from there, since WordPress’ container doesn’t come with copy of vi, but lucky me, I found a file manager plugin.

Actually a pretty slick looking file manager too. I’m impressed with how much it looks like MacOS, given that screenshot came from Windows.

Step 2: Finding The Blockage

I had kind of deduced what was going on already from some of ClearBook’s default behavior – the social icons only worked if I was feeding it icon names for “brands”, like Instagram, or Unity, or Wizards of the Coast. Given that they were meant to be used as links to social networking sites, that’s understandable. It was probably prepending the appropriate string for specifying a “brand” icon to the text box I was provided to select an icon.

And sure enough, when inspecting the element, it was always prepended with the “fab” class! Now I just needed to find the file that was adding that. The file manager plugin I was using didn’t have a feature like that, but luckily, the WordPress container does have grep, and grep -ilR \"fab ${WORDPRESS} found the appropriate file within the theme directory.

Step 3: Re-setting the social links

Returning to the Customization interface in WordPress, the first thing I noticed was that all of the icons were broken now. This made sense, given that I wasn’t specifying brands in my actual social links before. I had to go and fix them all. Luckily, it was as easy as readding the brands token to the social links manually.