child theme font awesome icons not working

Question

I created custom social media icons menu as recommended here, using custom links and optional CSS class.

my child theme footer.php currently has

<?php if ( has_nav_menu( 'social' ) ) : ?>
            <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
                <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'social',
                            'menu_class'     => 'social-links-menu',
                            'depth'          => 1,
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span>',
                        )
                    );
                ?>
            </nav><!-- .social-navigation -->
        <?php endif; ?>

Following is the output I am getting in my child theme

Following is the output by the parent theme

Parent theme uses attribute selector combined with pseudo element to insert font awesome icon before the anchor tag

.social-navigation a[href*="codepen.io"]:before { content: "\f216"; }

I didn't enqueue parent CSS files as I am using my own CSS for styling and layout.

My question is how can I use the above to produce same font awesome icons output in my child theme

I adjusted wp_nav_menu in child theme footer.php to

        <?php
          wp_nav_menu(
            array(

          'theme_location'    => 'social',
          'container'         => 'false',
          'link_before'    => '<span class="screen-reader-text">',
          'link_after'     => '</span>',
           )
         );
        ?>

which produces the following output, however, the icons are not clickable

<footer class="footer">


<ul id="menu-social" class="menu"><li id="menu-item-218" class="fab fa-github menu-item menu-item-type-custom menu-item-object-custom menu-item-218"><a href="https://github.com/810311"><span class="screen-reader-text">github</span></a></li>
</ul>       

</footer>

Answer 1

In your CSS, make sure you have this rule:

.screen-reader-text{
     display:none;
}
#menu-social li[class*='fa-']:before{
     content:'';
}
#menu-social li[class*='fa-codepen'] > a:before{
     content:'\f1cb';
}
#menu-social li[class*='fa-github'] > a:before{
     content:'\f09b';
}
#menu-social li[class*='fa-youtube'] > a:before{
     content:'\f167';
}

What you're seeing is labels intended to improve accessibility for the visually impaired so that their screen reader knows what to read. That probably already exists in the parent theme CSS but since you're not including the instruction it's still showing the labels.

Update

I've added new selectors that will target the <a href=""> instead of targeting the <li>. This way, you can still add the classes for fontawesome to the <li> tags but then output the icons :before or :after the <a href="">. It's really just a matter of going one level deeper with your selectors.