Twentysixteen child theme - social links menu to output font awesome icons

CMS & WordPress
1

hello,

I have the following markup which I am trying to incorporate into my child theme footer.php

<footer class="footer">
  <ul>
    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  </ul>

  <p>This site is hosted by <a href="https://www.bluehost.com" target="_blank">Bluehost </a></p>
</footer>

twentysixteen has a ‘Social Links Menu’ which I was wondering if it can be used to output the above markup. I have registered new menu using custom links and font awesome classes and assigned it to Social Menu location however this is what I get

footer-social-links-menu

what I am trying to achive is the footer as seen here

2

Hi 810311,

That’s the html…

Since you don’t mention what the CSS is that inserts the icons in the links, I guess the theme takes care of that too as it seems to do in the HTML you posted.

Like in the page you linked to:

.fa {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}

.fa-youtube::before {
	content: "\f167";
}
.fa-twitter::before {
	content: "\f099";
}
.fa-linkedin::before {
	content: "\f0e1";
}

The rules above comes from the stylesheet that is fetched by the external stylesheet link in the head of the html page you linked to:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

That stylesheet is located at the bootstrapcdn site and imports the Font-Awesome font locally from there.

So, I have to ask:
Have you checked that you have that link in your page head to fetch the font-awesome stylesheet?

1 Like
3

Hi Erik_J,

Thank you for the quick response.

In the admin area under Menus I used Custom Links with an optional CSS Classes field where I put corresponding font awesome CSS classes - fab fa-github, fab fa-codepen, fab fa-youtube- that insert those icons in the links

Yes, I have that done via functions.php

twentysixteen uses the following code in its footer.php which I think makes social menu work

<?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; ?>

I copied that code into my child theme footer.php but because my child theme CSS is based on my original markup (shown at the beginning of this post) that the reason its not working. I am going to try tweak wp_nav_menu function to make it produce the desired mark up…I guess…

Following is the markup that the above PHP produces…

<nav class="social-navigation" role="navigation" aria-label="Footer Social Links Menu">
					<div class="menu-footer-container"><ul id="menu-footer" class="social-links-menu"><li id="menu-item-208" class="classfab fa-github menu-item menu-item-type-custom menu-item-object-custom menu-item-208"><a href="https://github.com/810311"><span class="screen-reader-text">github</span></a></li>
<li id="menu-item-209" class="classfab fa-codepen menu-item menu-item-type-custom menu-item-object-custom menu-item-209"><a href="https://codepen.io/810311/"><span class="screen-reader-text">codepen</span></a></li>
<li id="menu-item-210" class="classfab fa-youtube menu-item menu-item-type-custom menu-item-object-custom menu-item-210"><a href="https://www.youtube.com/channel/UC0_jTafBINnwoJDwuX9ehNg"><span class="screen-reader-text">youtube</span></a></li>
</ul></div>
4

The stylesheet link should be present in the HTML source in the <head> section at the top of the HTML document.

Like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>   </title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

I couldn’t see that you mentioned the correct place for the stylesheet link. I’m afraid you misunderstood where in the HTML I referred to. :wink:

5

It’s there. I referred to functions.php because it uses a function to enqueue child theme CSS stylesheet :slightly_smiling_face:

1 Like
6

Does the icons show?

If not can you give a link to the page/site to check what’s wrong?

7

No, I don’t have external link - its deployed on my local machine via WAMP server. Please let me know what code you need

8

It seems you’ve already posted the code in play.

Could you use e.g. the Inspector tool in your browser to see what your browser see and try find out what is not working and try fix things with the Inspector edit.

I’m out of here for some time now so I hope next member can give you more ideas. :slight_smile:

9

Yes, I can use Inpector tool but my guess would be it has to do with PHP output. Anyways thanks for trying to help.

1 Like
10

I thought the use of the Inspector would show what the browser made of the code it received. Especially the fetched css file, if it was applied to the html you added…

Browsers nowadays are programmed to try amend common errors and typos in the source. Though sometimes that could also break things.

Please post the solution when you got it working. :smiley:

11

My font awesome icons are not clickable and navigation label text still appears next to icons. I was wondering if its possible to remove labels and make icons clickable

12

I was able to get help on here

1 Like
13

Thanks for letting us know! :+1:

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.