Sometimes I find myself needing to add Divi icons to the navigation bar. Now I know ET recently released a blog article on how to achieve this (read here); however, I personally found it a bit convoluted, inefficient, and lacked instructions on how to gain precise control over size, color, and position.

First thing I found unnecessary was linking to an outside font library when Divi ships with its own icons. Unless you want a special icon, I don’t see the need to have the extra HTTP request. Another gripe I had with the tutorial was the bloated code in the menu area, specifically wrapping the <i> tag in an anchor tag. WordPress not only gives us a field to input a URL, but it also gives us the option to enable a setting that allows a link to open in a new tab. So without further ado, lets get into it.

First things first, head over to ET icon list and copy the unicode associated with the icon you what. In my example, I needed the round Facebook (\e0aa), Pinterest (\e0ac), and Twitter (\e0ab). But to keep it short, we’ll just work with one icon and you can repeat as needed.

Once you have copied the appropriate unicode, head over to your WordPress dashboard and go to Appearance > Menus. Now select “Custom Links” and insert the URL you want the icon to link to and paste the code below in the “Link Text”.

<span class="fb_icon"></span>

As you can see above, the code is a simple span tag with a class name of “fb_icon”. Last step (which is rarely used or known) is to enable “Link Target” in your “Screen Options” drop down on the top right of the menu page. This will add the option to have the link open in a new tab. Altogether it should look like this.

Final Custom Link

Link Target Option

Now for the fun part. All we have to do is copy the code below and paste it in your child theme’s style sheet (which you can download here). The media query simply stacks the icons when the menu collapses to mobile.

.fb_icon {
    padding-left: 10px;
}
.fb_icon:before {
    font-family: "ETModules"; 
    content: "\e0aa"; 
    position: absolute;
    color: #FF3300;
    padding: 5px;
    font-size: 30px;
    bottom: 30px;
}
@media all and (max-width:980px) {
    .fb_icon {
        padding-left: 0px; 
    }
    .fb_icon:before {
        position: static;
    }
}

And that about wraps it folks. Easy peasy right! Please stay tuned for upcoming tips & tricks.
Till the next time Divi Dezigners.