Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Over the last couple of years, the use of Icon fonts has become popular and for a good reason. Icon fonts allow us to insert icons where we normally insert images and these icons can be colored and shaped and sized in any way we want. And as a bonus, they look great on all screens, regardless of what resolution or size they are displayed in. If you want to know more about icon fonts, you should check out James Williamson's course on icon fonts in the lynda.com library.
Here I'm going to give you a crash course on how to use a specific Icon font called Font Awesome. And we're going to use it to swap out these menu items, Twitter, Google, and Facebook, and other social media items with the icons that match their logos. In the beginning of this course, when we set up functions.php, you may remember we enqueued the font awesome style sheet. Now we get to use it for the first time. So let's go to Font Awesome and see how it all works.
If you go to fontawesome.io and you select icons, you'll see the list of all the available icons that we can use in our site. What I'm looking for in this case are social media or brand icons and if I scroll all the way to the bottom of this page, there's a large section of these brand icons that we could call in and target different brands. So what we're going to do now, is use these icons in place of the text. And to do that we first need to understand how these icons work.
So let's take a look at one of them. I'll pick this one. Fa-Twitter, which is just a Twitter icon. And here, in the demo page, you see, first of all, how great it is to use icon fonts. because you can see, this is the same icon, scaled up in multiple different sizes. And it always looks nice and clean, no matter what size it is. But what we're looking for, here. Is how to implement the icon into our site. The suggested use is to do what you see down here. Call in the class FA, and then FA Twitter, which will call in this icon and wrap it inside an I tag.
Now this is something we're going to be doing later on, but right now I'm instead going to use CSS to automatically inject the icon in where I want it. So instead of using this type of mark-up, I'm actually going to go look for the Unicode here. So you see that the Unicode for this particular icon is F099. Now, what I mean by the Unicode is, this is in fact a font. So, just like you would hit A on your keyboard to get an A, you hit the equivalent font item for F099 to get the Twitter icon.
That also means we can treat these icons as fonts, so we can apply font color to them, and font size and so on. So I've created some code snippets that we're going to use here to get the social media to behave the way we want. So we're going to start off by aligning the social media menu to the right hand side. So I'm going to grab the two first lines here. So grab my new source of ul, and uloi, and copy it. Then I have to go to NetBeans, open style.css, and navigate to my menus.
And you'll remember they are at 5.2, so I'll search for 5.2. And here, I'm going to add a new menu. So I'll scroll all the way to the bottom of my menu section. So under small menu here. And here, I'm going to paste in my new social media menu. So these first two rules, all they do is shift the menu over to the right-hand side. So I'm just going to test that. So I'll save this style sheet so far and reload my page. And you see the menu items shift over, that's great.
Next, we're going to apply some generic styling, so that we can make all of these items, just display the same icon. So I'm going to go with the FontAwesome, and find the icon I want to use, and here if I scroll up a bit. You'll see there's an icon called fa-users that looks like, you know, a social group. So first, I want to add this social icon to the front of each of the text elements. So, I want the icon to appear first, and the word Twitter, or Google, or Facebook.
To do that, I'm going to use a pseudo element called Before. So, I'll copy out this code first, and I'll explain exactly what's going on. So when I paste this, rule here, what happens is, I'm saying, find the link items, within the list items, within the social media menu. And then place this content here before that item. And the content we're placing, is the icon that we just looked at, that social media icon. So what'll happen is, when the page is loaded, the browser will say oh, there's extra content here, and I'm going to place it before the list item.
And the rest of it is pretty standard. I've displayed it as an inline block, I set some padding so that it looks nice. And I've also set the font family to FontAwesome and the font size and the font color. So now if I save this new rule set, and reload, you'll see that in front of each of my menu items, the CSS is now injecting the font icon. Now that this works, I can use a custom type of rule set to target each individual font item. And what am going to do here is grab these rows here and these rows have this custom atrif targeting device inside them.
So what's happening here, I'm saying. If the link has the word facebook.com in it then use this font icon. If it has Twitter in is use this icon, if it has Dribble in it use this icon, and so on, and so on, and so on. And this is what Justin figured out. That was so smart. So when we take this code here copy it out and paste it in. What will happen is the styles will automatically recognize which social media network we're pointing at with our urls and then it'll inject the proper icon for that social media network.
So now I can reload the page. And you'll see for Twitter, we have a Twitter account. For Google+, we have the Google+ logo, and for Facebook, we have the Facebook logo. Now I just need to do one more thing. I need to hide the text, Twitter, Google, and Facebook. Now I already have some functionality in my site that hides content, you'll remember when I tabbed through my pages here. We get, like, this skip to content link. And the skip to content link has a class assigned to it called screen reader text. So the idea is, you hide the text so that only screen readers can see it, and that's highly appropriate for these links.
So now I need to wrap the actual text within my links in a class that targets the screen reader text. And that's done in the function we created that outputs the menu. So if you go back to the snippets and scroll down, you'll find that in template-tags.php, I've made a small change to my function. What I've done is, I've added this link_before and link_after and this basically wraps the text within the link in the screen reader text class, the screen reader text class will hide the text.
So I'm going to copy out this new function, go back to my theme, and find includes template tags, scroll to the bottom. And here I'm going to replace my existing function with this new one, save it, and now, when I reload my page again. The text disappears and we're left with just the social media icons. So now we have a custom menu, placed somewhere else on the page, that displays a completely different type of content and is still configurable from inside WordPress. And the only thing that's left to do now, is to make that menu responsive.
Because right now, if we scale it down. You'll see the menu disappears at the 600 point just like the other menu. So here, I need to add in some media queries, just to make sure that my social media menu stays in tact, even though we go down to smaller screens. So again, I'll go back to my code snippets. And you'll see here at the bottom of the CSS that I've created for this movie. I have a simple media query that targets the social menu when the screen is below 600 pixels wide. So I'm going to copy this media query out, go to style.css, and just paste it in below these social media links, save style.css, reload the browser one last time.
And now, when I scale down the size of my browser. You'll see the menu stays intact. So now you know how to configure the existing menu and also add new menus to your site. And you can use this exact same approach to add menus anywhere you want, in the footer, in the side bar, within the content itself, or below the existing menu. The only limitation here is what you can come up with.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.