Add a Bluesky Social App Icon to a Ghost template

I've recently created an account on Bluesky.

While I am still not really sure how I might leverage this new service, it certainly claims to have some pretty strong adoption numbers and looks very much like the service it intends to replace (and poach users from).

So I figured I should add it to my list of social apps in my navigation.

If you have added a few icons already, this will be a breeze. Otherwise, take a few extra moments to complete the tutorial and then these steps will make a lot more sense. Although this tip describes a Bluesky icon, you can use this to add any FontAwesome icon. It is simply building off the tutorial steps.

• You can find the link to the FontAwesome icon here (there are two, this link takes you to the details for the one I use in my navigation)
• Go to Ghost Admin (if you aren't there already)
• Go to Settings > Advanced > Code Injection
• Add the following statement after the first set of selectors hiding the text content: :where(.nav, .gh-head-menu) .nav-bluesky a . This will add the icon at the end of your existing navigation, so if you'd like to put it elsewhere, insert it between the two selector statements for those icons. If you are adding this at the end, don't forget to modify your terminating comma.
• Add the following statement after the second set of selectors specifying font attributes: :where(.nav, .gh-head-menu) .nav-bluesky a::before. As in the previous step, choose where it should be inserted and change your comma if this is inserted at the end of the selector block.
• Add the last selector to assign the icons unicode value: :where(.nav, .gh-head-menu) .nav-bluesky a::before {content: "\e671"} . You can find the Unicode value in the top right corner of the icon's details screen:
  

• Save and refresh your site - the icon should be in the expected position in your navigation!