0

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

enter image description here

Following is the output by the parent theme

enter image description here

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>
3
  • 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 May 10 '20 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 May 10 '20 at 19:44
  • I've updated my original answer. – Tony Djukic May 10 '20 at 22:20
0

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.

13
  • I understand we can hide the link text. Current icons are not links. I am not sure if its possible using CSS only to make font awesome icon clickable since they would have to be inserted within anchor tags in html output. I did more research and found the following https://wordpress.stackexchange.com/questions/285260/edit-custom-links-menu-markup-making-a-social-media-menu-with-linkable-icons – 810311 May 10 '20 at 20:53
  • I tried using atribute selector with 'after' pseudo element as suggested by @WebElain (wordpress.stackexchange.com/questions/355979/…) but it just inserts duplicate icon next to the one produced by font awesome class. I tried removig the class from custom menu but it removes both icons leaving a square instead – 810311 May 10 '20 at 21:13
  • You realize that your screen shots don't really explain that the issue you're having is that the icons aren't links? Please try to be a bit clearer with your question. Can you include the HTML output for one of the links that your wp_nav_menu() generates? – Tony Djukic May 10 '20 at 21:23
  • Sure. Sorry for the confusion. I've edited my question – 810311 May 10 '20 at 21:46
  • Ok, I have a fix for this but quick question, what's adding the fa fab fa-github to the <li> elements - are you just doing that through adding classes in the menu admin? – Tony Djukic May 10 '20 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.