Adding Icons To Your WordPress Menu with CSS

Today we're going to be talking about how to add icons to your WordPress website menu. In this example, I will be using Elementor and Font Awesome.

wordpress menu icons font awesome css home page

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.

WordPress Dashboard

So let's navigate to the dashboard, and then go to plugins.

wordpress menu icons font awesome css plugin home

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.

Custom CSS WordPress Plugins

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.

wordpress menu icons font awesome css add custom css plugins

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.

wordpress menu icons font awesome css activate plugins

Font Awesome CDN

So now we have both those activated. Next, we'll show you how to link the Font Awesome Content Delivery Network (CDN), and then I'll show you what happens when we do. So we're going to go to the Custom CSS and JavaScript plugin. I've already done it here in the past, but we'll add HTML code.

wordpress menu icons font awesome css add font awesome cdn

We're going to call this Font Awesome, and we're going to be adding the Font Awesome style sheet.

wordpress menu icons font awesome css add html code

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 see a difference on our live site, and 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.

wordpress menu icons font awesome css custom css pro main screen

So here we have phone number, email and a support link. We need three icons to identify. So first we're going to navigate back to Font Awesome, and let's type in phone.

wordpress menu icons font awesome css font awesome search phone

All right. And you'll see here that these icons that are grayed out, they are Font Awesome Pro icons. 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.

wordpress menu icons font awesome css font awesome search email

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.

wordpress menu icons font awesome css font awesome search question

All right, so now we have three icons ready to go. All right? So back in your website you're going to right-click and inspect the first menu element. We do this to figure out how we're going to add these icons 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.

Adding Font Awesome Icons via CSS to our WordPress Menu

So we'll start there, ID, menu item 84, and add our brackets. Do this for all three of them. And the other two are 83 and 85. All right, so that's just catching the item.

wordpress menu icons font awesome css add list ids

So then we're going to add, traverse down to the link, to the anchor element.

wordpress menu icons font awesome css add list anchors

And then because we want these to be before their respective links, we're going to have to add the pseudo element of before. So we'll add that to all three anchor elements.

wordpress menu icons font awesome css list anchor before pseudo class

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. Since we're not adding these icons to the HTML, we have to use the unicode within the CSS. So let's navigate back here.

wordpress menu icons font awesome css mobile icon

Now I've already typed up everything that we need for this. I'm going to paste it in here. Just copy the code between the brackets.

#menu-item a:before {
  content: "\f082";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  /* Adjust As Necessary */
  color: inherit;
  font-size: inherit;
  padding-right: 0.5em;
}

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 the content declaration in here.

wordpress menu icons font awesome css paste code snippet

Now if you just copy this and paste in the code snippet to each of the other two, you can see the icons starting to be applied. 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.

The first one is a phone number, we're going to copy that unicode, and paste it over one currently in the context declaration.

wordpress menu icons font awesome css update icon 2

Next one is your envelope, and plug it in.

wordpress menu icons font awesome css email icon

The third one is your question mark icon. Copy the unicode and and paste it in.

wordpress menu icons font awesome css question icon

Now notice here right out the gate that this mobile phone icon did not come through, as it's showing up as a box. That tells you that this icon is not on our currently linked/used Font Awesome list of icons.

wordpress menu icons font awesome css update icon 3

So I'll have to come back in here and find a difference one. Let's just search for phone again. All right. Copy the unicode, and we'll plug it in.

wordpress menu icons font awesome css revised phone icon

You see right away all three of those have been added, and then finally we'll see the changes.

wordrpess menu icons font awesome css all icons updated

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, and that's instantly 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.

Font Awesome Icons Have Been Added to our WordPress Menu!

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 the font size will be 18 for each icon. And now they're back to the same line.

wordpress menu icons font awesome css live site updated

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.