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=""><span class="screen-reader-text">github</span></a></li>
</ul>       

</footer>

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/810311"><span class="screen-reader-text">github</span></a></li>
</ul>       

</footer>

• menus

• Include your code so someone can actually see what's going on. It's fine that you shared the link that you used to build it, but no one can tell what you did or what other elements may be interfering. – Tony Djukic Commented May 10, 2020 at 14:16
• Hi Tony, thank you for the quick response. I have edited my question to include the code and the output I am getting. Please take a look when you have time. – 810311 Commented May 10, 2020 at 19:44
• I've updated my original answer. – Tony Djukic Commented May 10, 2020 at 22:20

1 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.