How to Add an Email Icon Link in your Main Menu in Divi
Email & Other Icon Links:
This tutorial shows you how to add an email icon link to your main Divi menu. By default, if you enter your email address in the appearance section, it will display your address on the secondary menu bar (above the main) and puts it on the left hand side. This process that I will show you, is the same concept you can use to apply any other icon links to your menu.
The following steps are pictured left for further clarification. Click on an image to enlarge.
Quick Reference: Paste the code that allows you to use font awesome icons on your site in the head of your blog – Find the icon you want to use and copy the code – In “Appearance – Menus – Custom Links” – Paste that code in the section labelled “Link Text” – In URL type: mailto:enter your email address here – Click “Add to Menu”
Step One – Paste Font Awesome Code in the Head of your Blog:
- Copy this code: <script defer src=”https://use.fontawesome.com/releases/v5.0.6/js/all.js”></script>
- Paste it in Divi Theme Options – Under the Integration tab, where you see: Add code to the < head > of your blog. By default, the “Enable header code” should be enabled, but if it is not, make sure you enable that.
- Click the green “Save Changes” button
Step Two – Get the Icon Code from the Font Awesome Website:
- Go to the icon page on the Font Awesome website
- Type in “Email” in the search bar and hit enter.
- Click on the email icon you would like to use.
- When the icon page loads, scroll to the bottom to find the code.
- Copy the code for that icon
Step Three – Add Icon Code and Email Link to your Menu:
- Hover over Appearance of your left side menu and click “Menus”
- When the page loads, click “Custom Links”
- Paste your copied icon code in the “Link Text” box
- In the URL box, type the following (adding your email address after the colon): mailto:add email address here
- Click the “Add to Menu” button
Now that you know how to add email, the concept is the same for any other icons you want to add. The code that you added to the “head of your blog” only needs to be added once in order for the font awesome icons to be used. For anything other than email, you would enter a website address in the URL box.
Below is a video that walks you through the process:
Other Available Tutorials:
Remove the Drop Down Arrow in Divi Main Menu
Here’s how to remove the drop down arrow on your divi menu. It’s a simple bit of code you can copy and paste into your custom CSS section.
Edit Divi Posts or Pages
When Editing a Page or Post: There is no simple description on how to edit Divi posts or pages. There are simply too many options available in each item or module. Here, I am going to give you the starting blocks to editing your Divi posts or pages. ...
How to Save and Load a Layout in the Divi Library
What is the Divi Library and why save or load an existing layout: The Divi Library is place that stores pre-made layout templates as well as your custom saved layouts, modules and widgets. Save a layout to the Divi Library if you would like to use it as a template...
Create a Post in Divi – Beginners Guide
Q: Why create a post and how is it different from a page? Posts are pages of information that belong to or fall under a main topic. They are built just like pages with one big difference. When you create a post, you can assign it to a category which...
How to Update Plugins in WordPress
What is a Plugin and Why Update: Plugins are like little programs that work with the main software to help further customize design and function of your website. You need to keep them updated, or they can become a security risk or may not function...