I’m trying to use this tutorial to add social media icons to my secondary navigation bar. While everything worked great, when I tried to add additional icons that are not part of the “Brands” font family, I’m getting a square with an X through it. I would like to add an envelope icon in the primary navigation for contact, and an RSS icon in the secondary navigation for an RSS feed. Right now they are showing a square with an X. Specifically,
- How to I get the envelope and rss icon to show properly in the navigation bars?
- How can I fix the vertical alignment of my secondary navigation? The text-based links seem higher than the logo and social media links.
- How would I center the content on the secondary navigation bar? It seems left-aligned except for the “Powered by Ghost”.
My site is here: https://www.gregforcey.com/
Here is my current icon code injection following the tutorial at the beginning of the thread:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/brands.min.css" integrity="sha512-DJLNx+VLY4aEiEQFjiawXaiceujj5GA7lIY8CHCIGQCBPfsEG0nGz1edb4Jvw1LR7q031zS5PpPqFuPA8ihlRA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:where(.nav, .gh-head-menu) .nav-bluesky a,
:where(.nav, .gh-head-menu) .nav-linkedin a,
:where(.nav, .gh-head-menu) .nav-github a,
:where(.nav, .gh-head-menu) .nav-researchgate a,
:where(.nav, .gh-head-menu) .nav-threads a,
:where(.nav, .gh-head-menu) .nav-orcid a,
:where(.nav, .gh-head-menu) .nav-google-scholar a,
:where(.nav, .gh-head-menu) .nav-contact a,
:where(.nav, .gh-head-menu) .nav-rss a,
:where(.nav, .gh-head-menu) .nav-x a {
font-size: 0 !important;
}
:where(.nav, .gh-head-menu) .nav-bluesky a::before,
:where(.nav, .gh-head-menu) .nav-linkedin a::before,
:where(.nav, .gh-head-menu) .nav-github a::before,
:where(.nav, .gh-head-menu) .nav-researchgate a::before,
:where(.nav, .gh-head-menu) .nav-threads a::before,
:where(.nav, .gh-head-menu) .nav-orcid a::before,
:where(.nav, .gh-head-menu) .nav-google-scholar a::before,
:where(.nav, .gh-head-menu) .nav-contact a::before,
:where(.nav, .gh-head-menu) .nav-rss a::before,
:where(.nav, .gh-head-menu) .nav-x a::before {
font-family: "Font Awesome 6 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-bluesky a::before {content: "\e671"}
:where(.nav, .gh-head-menu) .nav-linkedin a::before {content: "\f08c"}
:where(.nav, .gh-head-menu) .nav-github a::before {content: "\f09b"}
:where(.nav, .gh-head-menu) .nav-researchgate a::before {content: "\f4f8"}
:where(.nav, .gh-head-menu) .nav-threads a::before {content: "\e618"}
:where(.nav, .gh-head-menu) .nav-orcid a::before {content: "\f8d2"}
:where(.nav, .gh-head-menu) .nav-google-scholar a::before {content: "\e63b"}
:where(.nav, .gh-head-menu) .nav-contact a::before {content: "\f0e0"}
:where(.nav, .gh-head-menu) .nav-rss a::before {content: "\f09e"}
:where(.nav, .gh-head-menu) .nav-x a::before {content: "\e61b"}
</style>
Thank you!
before I get to coding).