Social Media icons are invisible

Used the social media icon generator to generate code for X, Facebook and Instagram. The icons work and are located in the header. However, I can’t see them??

This is the code below that I have injected into my website:

:where(.nav, .gh-head-menu) .nav-facebook a, :where(.nav, .gh-head-menu) .nav-instagram a, :where(.nav, .gh-head-menu) .nav-x a { font-size: 0 !important; } :where(.nav, .gh-head-menu) .nav-facebook a::before, :where(.nav, .gh-head-menu) .nav-instagram 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-facebook a::before {content: "\f09a"} :where(.nav, .gh-head-menu) .nav-instagram a::before {content: "\f16d"} :where(.nav, .gh-head-menu) .nav-x a::before {content: "\e61b"}