Hacking my OMG.lol Hello Page

I adopted the “Square MB” (㎆) character this week, so I was wondering how hard it would be to replace one of the Font Awesome glyphs used as icons on my Hello page with a Unicode character.

Turns out it’s not very difficult at all, but it does require a tiny little bit of JavaScript in addition to a bit of CSS styling.

• First 1️⃣ I inserted a span element in my markdown that includes a unique identifier.

- <span id="my-custom-id">Some Text</span> [Link Text](https://www.example.com/)

• Second 2️⃣ A bit of JavaScript to locate the parent li element and add a special class name. Be sure to wrap the code in a function that runs after the page content loads!

const el = document.getElementById("my-custom-id").parentElement.querySelector("i.fa-link");
el.classList.add("my-class");

• Third 3️⃣ Add a style to the style sheet that sets the content using the Unicode code point in hexadecimal.

i.my-class::before { content: "\2700" !important; }

That’s it! I use this technique to set the fourth bullet on my Hello page to the “Square MB” character (㎆). Cheers!