Press "Enter" to skip to content

How to Add an External Link Icon to a WordPress Menu Item

In the previous tutorial, you learned how to add external links to your menu. In this video, you’ll learn how to add an external link icon next to the external link.

Whenever you include an external link in the menu, you should always add an idea to let visitors know clicking menu item will take them to a different website.

Code snippets

There are two different code snippets you can use to add the icon.

This code will add the Emoji-based icon to the menu:

↗

And this code will add the Font Awesome based icon:

<i class="fas fa-external-link-alt"></i>

Other resources

If you are interested in learning more about HTML character codes, check out this article: https://html.com/character-codes/

And this is the WP Font Awesome plugin you should install if the second method doesn’t work on your site: https://wordpress.org/plugins/wp-font-awesome/

Transcript

In this video, you'll learn how to add an external link icon to external links within your WordPress menus. So in my example here, I have these menu items and one of them is called "Themes." And unlike these other menu items that take visitors to pages within this existing site, if I click on "Themes," it takes me to competethemes.com and so that is fine. That's what I wanted. It's an external link. But if I'm a visitor and I've never been to this site and I look at "Themes" and I look at "Home" and I look at "Page" visually, they're all the same. So I don't expect "Themes" to take me to a completely new site. And as the site owner, you don't want to confuse your visitors. So if you do add an external link to your menu, you want to mark it in some sort of way so that visitors know it will take them to a different website.

Here's how you can do that. First, I'm going to go up to the Admin toolbar here and I'm going to click on customize to take myself to the live customizer. Next, I'll click on this Menus section at the bottom and then I'll select the primary menu which I created and assigned to the... excuse me, primary menu location. So now that I'm viewing the menu items that I see on my site, I'll click on the "Themes" menu item. And once I do click on it, I'll see the URL that I've entered and the label. Now in order to add this icon, I'm going to add an HTML character code. Now you don't really need to know much about this and I'll include a link to a tutorial, so you can learn more about character codes if you're interested, but they allow you to add, um, various icons outside of, um, plain letters.

For instance, they always begin with an ampersand and they always end with a semi-colon. And I can type in "rarr" for a right arrow icon. And so you might find this handy to add this within your posts, your pages, or your menu items. It's a cool way to include symbols, um, and there are a lot of different symbols available. So I'll include a link below so you can check that out. But for our purposes, I'm going to use this messy looking code. And this one is going to add an external link icon. So unlike a lot of HTML character codes, this one will also be affected by whatever, um, emoji system is currently being used by the device. So in this case you'll see a blue, um, external link icon and it might look different in a different browser, different computer, uh, or if you view it on an iPhone versus an android device.

But it's a really, really easy way to just add an external link icon. So in case you don't like the color, which you unfortunately cannot control if you use this method, I'll share one more method for adding external link icons. The other approach is to add an icon with Font Awesome. So this one's a bit more complex. And by the way, I will include these code snippets below so you can copy and paste them. But this time I'm going to create an icon HTML element and I'll close that out and I'll give it a class equal to "fas" and "fa-external-link-alt." Now I know that's a lot of stuff that you may not understand and I'm not going to bother really going over all this because it's not necessary. If you just want to add an icon, but again, I will include this so you can just copy and paste it into your own site.

And now you can see I've got this nice external link icon added and it's displaying the same color as the menu item. So one last thing you need to know. If you do choose to use this code snippet to add the icon. If your theme doesn't load the icon font called Font Awesome, then you're not gonna see anything show up. Most WordPress themes do load Font Awesome. But if you include this, this snippet here, and you don't see the icon, what you can do is go to your Plugins menu which I'll navigate to now and you can install this plugin called WP Font Awesome. All you have to do is install this plugin and then the icon will display on your site. So there's two easy ways to add an external link icon to any external links in your WordPress menu. If you have questions or any trouble with this, please leave a comment below. If you want to see more videos, don't forget to subscribe and thanks for watching.

Ben Sibley
Ben Sibley

After using WordPress for the last 9 years, I've made dozens of websites, designed and developed 20 themes that have been downloaded more than 1.5 million times, and personally helped thousands of WP users with their sites.

Now I'm sharing everything I know to help make WordPress an easier and more rewarding choice for building a website. If you have a question you want answered, submit your question here.