HIDING THE LINK TEXT:
With wp_nav_menu, you can specify content to go before and after each link in the menu.
Here “link_before” and “link_after” are being used to wrap the link text in a span that hides it while still remaining accessible.
wp_nav_menu(array(
'theme_location' => 'menu_social',
'menu_class' => 'menu menu-social',
'link_before' => '<span class="visually-hidden">',
'link_after' => '</span>',
'container' => 'nav'
));
INSERTING THE ICONS:
Then we can use CSS BEFORE pseudo-class selectors in order to inject specific icons inside the link, but outside the span that is making the text invisible.
The use of pseudo classes for this technique is explained here on the font awesome site.
If the selectors used in the following examples aren’t similar to ones you’re seen before, this page from tutsplus has a good explanation. With respect to this example, we’re here combining the techniques mentioned in examples 10 and 13 of the tutplus listing of css selectors.
Using “starts with” attribute selectors like [href^= ] will give bulletproof links. If you’re targeting a link by the database ID in classes that WP outputs, it’s likely to easily break.
(I’m using both http & https protocols and links with and without “www”, in case you’re wondering what the difference between each URL in each style is).
.menu-social a::before{
font-family: "Font Awesome 5 Brands";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.menu-social a[href^="https://facebook.com"]::before,
.menu-social a[href^="https://facebook.com"]::before,
.menu-social a[href^="https://www.facebook.com"]::before,
.menu-social a[href^="https://www.facebook.com"]::before {
content: "\f082";
}
.menu-social a[href^="https://twitter.com"]::before,
.menu-social a[href^="https://twitter.com"]::before,
.menu-social a[href^="https://www.twitter.com"]::before,
.menu-social a[href^="https://www.twitter.com"]::before {
content: "\f081";
}
.menu-social a[href^="https://pinterest.com"]::before,
.menu-social a[href^="https://pinterest.com"]::before,
.menu-social a[href^="https://www.pinterest.com"]::before,
.menu-social a[href^="https://www.pinterest.com"]::before {
content: "\f0d3";
}
/* etc. */