Today we’re going to be talking about how to add icons to your WordPress website menu. So in this example I will be using Elementor and Font Awesome. So if you’re using Elementor then you don’t need to link Font Awesome, you can skip straight to the part that talks about how to put them in. If you’re not using Elementor, let’s show you how to do that now.

So let’s navigate to the dashboard, and then go to plugins. Now, for … Let’s click on add new. Now, if you’re using Elementor you only need to add one plugin, otherwise you’ll need to add two. So our keyword search will be Custom CSS.

And we’re going to add simple Custom CSS and JavaScript, install that. And the other one we’re going to need for both of these situations is Custom CSS Pro. Install both of these. And once they both have been installed activate one of them, and we’ll always get redirected to the plugins panel, and then come down here and activate simple Custom CSS and JS. So now we have both those activated I’ll show you how to link CDN from Font Awesome, and then I’ll show you what happens when we do.

So we’re going to go to Custom CSS and JavaScript. I’ve already done it here in the past, but we’ll add HTML code. We’re going to call this Font Awesome, and we’re going to be adding the Font Awesome style sheet. So navigate to the Font Awesome website, and then here you’re going to click on start.

And once you’re here you’re going to click on this button over here which copies the entire code, and navigate back, and we’re just going to remove all of this, and paste in your CDN. Once that’s done you can head to publish. Now it’s done.

So as previously started I’m using Elementor, and Elementor already uses Font Awesome. So you’ll see here, with these icons I already have established what happens when we add a new link, when we link a new style sheet and refresh the page, that messes up the icons we already have. So, that tells us we don’t have to link Font Awesome again. So if you’re using a different page builder and this happens you need to check the documentation to see if they’re using Font Awesome as well.

So what we’re going to do is we’re going to delete this, and I’ll delete the other one too because I don’t need it. And we’ll come back here and we’ll refresh and our icons reappear. That means our Font Awesome, that is default with our page builder is being applied. So before we move any further you want to delete that plugin, deactivate it and then delete it, if that is the case in your situation.

Once you’ve identified which situation you’re in then we’re going to come over here to Custom CSS Pro. Now the reason we’re doing this on a separate page is so we can a difference on our live site, what happens when we do this. Now Custom CSS Pro is a live CSS editor. And it’s one of my favorite ones, I use it all the time.

So here we have phone number, email and a support link, so we need three icons to identify. So first we’re going to navigate back to Font Awesome, and let’s type in phone. All right. And you’ll see here that these icons are pro. That means that they’re paid icons. So we’ll have to work within the limitations of either free or not free, depending on your own situation. In this situation I’m just going to be using free icons.

So I’ll open this up in a new tab so I can come back to that later. Next we’re going to search for email. All right. And I like this one here. Some people might like a different one. All right, and then we’re going to slide this down. The third one is support link, so let’s add a question to that. All right. And I like this one. We’ll go with that.

All right, so now we have three icons ready to go. All right? So back in your website you’re going to inspect the element to figure out how we’re going to add this with CSS. Now in this situation there is a list ID with a link under it. And that link has a class of menu link, if you open up the other two they have the same class, which means we can’t use this on one class, otherwise they will be applied to all three. So we’re going to have to use the list ID and navigate, what’s it called? Traverse down, we’re going to have to use the list ID and traverse down to the list item.
So we’ll start there, ID, menu item 84, and add our brackets. Do this for all three of them. And the other one is 83. All right, so that’s just catching the item, so then we’re going to add, traverse down to the link, to the anchor element. And then because we want these to be before their respective links we’re going to have to add the pseudo element of the four. So we’ll add that to all three.

And now we’re ready to go. All right, so let’s put some space in between these three here. All right, so the way that this is done is we have to select the Font Awesome unicode, not the element, because we’re using it WordPress. We’re not HTML, we have to use the unicode. So let’s navigate back here.

Now I’ve already typed up everything that we need for this. I’m going to paste it in here. All right, so for each item we’re going to do text decoration, content, font family, font style, font weight, text decoration, color, font size and then padding right.

So you can see already that the Facebook square is already there, and that’s because of this right here. Now if you just copy this and paste it in and let it run, the only thing you need to change is the unicode, because the rest of it is pulling from the website that you’ve already built. So let’s paste this in two more times.

Clean this up a little bit. All right, all right, so now all we need to do is change the unicode item and we’re done. So the first one is a phone number, we’re going to copy that unicode item, plug it in. Next one is your envelope, and plug it in. The third one is your question, and plug it in.
Now notice here right out the gate that this one did not come through, that tells you that it’s not on our current Font Awesome font. So I’ll have to come back in here and find a difference one. Let’s just do phone. All right. Copy the unicode, and we’ll plug it in. You see right away all three of those have been added, and then finally we’ll see the changes.

We can close all of this out, we’ll come back to a regular page, we’ll refresh, and you can see all three of those, they have now been added with an icon. Well now that I’m looking at it, I don’t really like the size of those icons. So let me come back here and I will change the font size. So first we’ll need to know what is the font size, so we’ll inspect. And of course my screen is in the way. All righty, so I’ll switch font size 13 pixels. Okay.

That means we need to change inherent. Let’s go with 16 pixels, too small, let’s go with 20. That looks pretty good. And then we’ll do 20 pixels across the board. Font size, 20 pixels. That’s exciting, well now our font size for our icons has pushed our menu onto a different line. So, that means we’re going to have to make these smaller. So let’s say 18, 18, and 18. And now they’re back to the same line. So that’s all there is to it, that’s all I have for you today, if you have any questions just leave a comment or send us an email, have a good night.

//carbondigital.us/wp-content/uploads/2019/08/Carbon-Digital-Web-Logo.png

We create experiences that change the way people interact with brands – and with each other

Newsletter

Enter your email address here always to be updated. We promise not to spam!