Adding social icons to a Ghost page, part 2

Welcome back to social icons on any page! See Part 1 for a little more context.

Here's another way to get social links onto a page, this time by loading the icons from FontAwesome. The resulting code is shorter and looks less awful in the Ghost editor, but the result is about the same.

If your theme already loads FontAwesome, all you need is the code below. If it doesn't, you'll need to load it. You can add this into the HTML card, or put it into the code injection header for the page.

Load FontAwesome (if needed):

<!-- load font awesome --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/brands.min.css">

HTML to make the social icon links appear:

<div class="gh-author-meta" style="flex-wrap: wrap; display: flex; flex-direction: row; margin-bottom:-1em; gap: 1em">
    <!-- don't remove the line above -->
    <!-- feel free to remove an entire social chunk, in between html comments.-->
    <!-- for any socials you want to use, be sure to update the line starting with href!-->

<!-- this section is for your name -->
 <a href="https://www.spectralwebservices.com"><em>Cathy Sarisky</em></a>
 <!-- or you could use the line below instead, if you don't want a link:: 
 <em>Cathy Sarisky</em>
-->
<!-- X (Twitter) -->
    <a class="gh-author-social-link" 
       href="https://x.com/cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-x-twitter"></i></span></a>

    <!-- Facebook -->
    <a class="gh-author-social-link" 
       href="https://www.facebook.com/cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-facebook"></i></span></a>

    <!-- LinkedIn -->
    <a class="gh-author-social-link" 
       href="https://www.linkedin.com/in/cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-linkedin"></i></span></a>

    <!-- Bluesky -->
    <a class="gh-author-social-link" 
       href="https://bsky.app/profile/cat" 
       target="_blank" rel="noopener"><span><i class="fa-solid fa-cloud"></i></span></a>

    <!-- Threads -->
    <a class="gh-author-social-link" 
       href="https://www.threads.net/@cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-threads"></i></span></a>

    <!-- Mastodon -->
    <a class="gh-author-social-link" 
       href="https://cat.social/@cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-mastodon"></i></span></a>

    <!-- TikTok -->
    <a class="gh-author-social-link" 
       href="https://www.tiktok.com/@cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-tiktok"></i></span></a>

    <!-- YouTube -->
    <a class="gh-author-social-link" 
       href="https://www.youtube.com/@cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-youtube"></i></span></a>

    <!-- Instagram -->
    <a class="gh-author-social-link" 
       href="https://www.instagram.com/cat" 
       target="_blank" rel="noopener"><span><i class="fa-brands fa-instagram"></i></span></a> 
</div>

So which should you use? For convenience, the version above is a little easier to work with. For loading speed, skipping loading the Font Awesome package is likely to be slightly faster, but if your theme is already loading it (many are), then there's not much difference.

Happy social web!