Newer versions of FontAwesome

[iandessers]

Hi all,

Not entirely sure if this is the correct category to use, so if not, feel free to move it to the appropriate one

I was following the tutorial from Ghost itself to get my social media icons configured and managed to get the icons in the footer by using code injection for the site footer.

However, for the LinkedIn icon I am trying to use, I do notice this is a newer version, 7.0.0, than the one being used in the tutorial, which is 6.5.2 instead.

I tried adding the newer version’s URL, by using the parameters from this site, but that does not seem to work, as the icon appears like this instead.

Next, I tried following this similar post on here, to generate the necessary hash, using the site SRI Hash Generator as mentioned, but unfortunately, the issue persists.

Has anyone managed to figure out how to get this working or stumbled across the same situation as me?

Thanks in advance for any help!

Regards

Ian

[Cathy_Sarisky]

what appears in your console logs when you try this? (F12 in browser and switch to console tab)

[muratcorlu]

You need to change url, font-family and unicode character. You can find the unicode characters for each icon on the page: Square Linkedin Icon | Font Awesome

Example code for Linkedin icon:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/brands.min.css"  crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    :where(.nav, .gh-head-menu) .nav-linkedin a {
        font-size: 0 !important;
    }

    :where(.nav, .gh-head-menu) .nav-linkedin a::before {
        font-family: "Font Awesome 7 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    :where(.nav, .gh-head-menu) .nav-linkedin a::before {content: "\e7d0"}
</style>

[iandessers]

No errors regarding the hash provided. Except now I do notice both icons are broken, though.

[iandessers]

Oh my… it was that simple. I feel silly now. Thanks for the quick help, though. Just wondering, for the font family, is that mentioned somewhere on the page in the print screen, or was it from somewhere else?

[muratcorlu]

To be honest, I read the font name inside the CSS file itself. But probably it’s documented somewhere else too