How to put a mail icon in menu

I found the below answer from Danny most helpful for putting social icons in menu bar.
Thank you.

Now I would like to put a mail icon in the menu.

Please tell me how to do that.

Thank you Danny. I never would have figured that out. See below.

Unfortunately, there is no option to include both the menu and social icons via the Customizer, unless you select the Nav Bottom option.

However, what you can do is navigate to your WordPress Admin Dashboard > Appearance > Menus and select the menu that is being used in your header.

From here, click on the Custom Links module and in the URL field, add the link to your social network i.e. your Facebook page and in the Link Text add <i class=“fa fa-facebook”></i>.

Repeat this process for all you social networks such as:

Twitter = <i class=“fa fa-twitter”></i>
Google+ = <i class=“fa fa-google-plus”></i>

For a full list of Font Awesome social icons, see the Font Awesome website.

When you have completed adding your menu items for each social network. Save the menu and when you visit your sites front-end. You should have something like this:


Hi Jack,

Using the steps I mentioned previously which you have added above. You will want to do the same thing, but this time use either:

<i class="fa fa-envelope-o"></i>
This gives a white envelope icon.

<i class="fa fa-envelope"></i>
This gives a black envelope icon.

You can see all the available icons on the Font Awesome site -


Nice - That worked great. I have the right size and right color envelope on the menu bar.

Now, can you tell me how to link that icon to my email address.

Hi Jack,

You will want to add a Custom Link to your WordPress Menu and in the URL field add the following and in the Link Text add the icon code. Like the image below.



Perfect -Thank you again Danny!

No problem, Jack. Happy to help and have a great weekend!