One day as I was going through some of the Divi Facebook groups, a user had asked how they can add a separator in between menu items, as one of their clients wanted not only some separation, but something for the menu to stand out a little more as well. This article does just that the Divi Help way… adding icons to the Divi menu with NO CSS!!!
For the first part of this tutorial, we will add a little pizzazz to the menu using characters that are found on an standard keyboard.
For part 2, we’ll get a little fancier and introduce you to Font Awesome, which will allow you to choose from hundreds of really cool, custom icons that you can add to your menu without having to use any CSS!
PART 1: Adding a Basic Symbol Separator To The Menu
As an example I am using the following website page.
This is a site which is still in development. You can see that we have a couple menu items to work with for our tutorial. The end goal is adding icons to the divi menu like the picture below. The separator in the image is called the pipe and looks like this “|” on your keyboard. This gives us a nice little space between each menu item breaking things up a bit.
Adding icons to the divi menu is very simple to achieve. First of all you need to log into your WordPress dashboard and then go to Appearances > Menu where you can set up the primary menu to be used on your website. If you haven’t already done so, create a menu and add the menu items you want to include.
This example uses the pipe symbol as a menu separator, but you can use any symbol or combination of symbols that you want.
If you can’t see “Custom Links”, click on “Screen Options” at the top right corner of the screen and check the box marked “Custom Links”
Enter anything in to the “URL” box, in our example we used a #. it doesn’t matter what it is as we are going to delete it shortly. If we did not enter anything in the URL box, WordPress will not allow us to add a custom link. Then add the separator you want to use into the “Link Text” box. In our example, we used the pipe character.
In our last step we said we needed to add something for the URL (in our example a #) to be able to add the custom link. If we left it like this the pipe symbol would appear to be clickable (i.e. your mouse cursor would change when a user hovers over it) which isn’t what we want. So now click on the drop-down arrow next to the item you’ve just added to the menu. This will display a number of options for the menu item. In this instance we want to remove the # of the “URL” box so that it is blank. Now click on Add to Menu.
Repeat this step for each separator you need for between your menu items. Be sure to click on Add to Menu for each separator. You can do them all at once and then drag each one into place between each menu category. Make sure you put them directly below the menu category and not offset 😉
Then click on the “Save Menu” at either the top right-hand or bottom right-hand corner of the screen. If this is a new menu, don’t forget to assign it to the primary menu location by checking the box or adding it via your theme options.
Now if you view your site you will see your new separator has appeared on your menu bar.
If your screen looks like ours, but with your menu colors and selection of selector, GREAT JOB!!! You made your first Divi menu customization without CSS!!
Using this method you can very quickly and easily add any kind of separator you want to your WordPress menu.
PART 2: Adding a Font Awesome Symbol Separator To The Menu
Many times new designers hear the word “advanced” and fear begins to strike them. They may have tried some difficult task before and failed, so when they see or hear advanced, they start to freeze. Here at Divi Help, we try to make it as simple as possible to take a plain vanilla Divi site and show you some easy peasy tricks to help you make your site look better and unique.
We are going to expand on what we just created in the basic section by utilizing icons from the Font Awesome library. Not only is font awesome very easy to install (if you can copy and paste, you can install font awesome) and take all of about 30 seconds. Once installed, not only will you be able to use Font Awesome for this tutorial, but open the doors to use it in other areas in your site (more tutorials on that in the near future).
So what is Font Awesome? In a nutshell, Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Yeah yeah, I know, I said the “C” word, but here at Divi Help, we say NO to css for the complete beginner.
So take a deep breath, get your favorite beverage, and let’s get started
The first thing we need to do is get Font Awesome installed on our Divi site. To do so, we want the Font Awesome code to be pulled from their site with a URL. So on the left hand side menu, go to Divi -> Theme options and click on the integration tab at the top of the options window (see screenshot below).
In the add code to the <head> of your blog section, copy and paste the following into your add code to the <head> of your blog text box like in the above example:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” /><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />
Now scroll down to the bottom of the page and click on save changes. Congratulations!! Font Awesome is now installed on your Divi site!! You can not only use if for this tutorial, but if you choose to get into advanced Divi techniques and desire to learn css, the possibilities are endless!!
Now that the hard part is out of the way, we need to pick out an icon that we would like to replace or basic separator with. So go to the link below and pick out your favorite one :o) (clicking on the link will open in a new tab so you can work side by side)
For our example, and making it easy for your first time, let’s pretend we are working on a lawyer’s site. Click on the link below to see the icon I chose for the site.
Okay, roll up your sleeves and get ready for the absolutely one of the easiest things we have done thus far, copy and paste.
If you are not already in your menu screen, let’s start there by going to Appearance > Menus on the left side of the screen. Once there you should have a screen similar to the one below (except with the selector you chose to use).
So now the hard part!! From the previous step, we want to copy the Font Awesome code for our balance scale, and I have included it below. Highlight the code below and right click on it and choose copy, or ctrl+c for you hot key folks
<i class=”fa fa-balance-scale” aria-hidden=”true”></i>
Now we want to overwrite our “|” character that is currently there with the code we just copied above. So click in your navigation label box, be sure the | is highlighted and right click paste, or ctrl+v.
Your screen should now look like the following example.
Now change the rest of your custom links for each of your other separators and click on Save menu when you are done. Now let’s check your page for progress, it should look like the following (but with your sites menu colors)
Pretty cool, huh!!! And you thought it was going to be something hard that you wouldn’t be able to do. Well, now you can!!! BUT… Before you go, let’s go for broke and learn one more cool thing we can easily do with Font Awesome.
Alright, glad to see you wanted to go for broke and become the coolest divi beginner on your block!!
Let’s say we have a little bit of a proportionate issues between our menu size font and our newly learned Font Awesome icon separators. Well, the good news is, we can easily adjust the icon size by adding one small piece of code to our separators from the last step, but before we do, I want you to see from Font Awesome’s site an idea of what it will look like.
Now, I have included the same codes below for you to copy and paste depending on how big or how small you want your icons to be to match your font size as close as possible. The beauty of Font Awesome is that it is a vector based graphic and when they are resized, there is no loss of quality!! :o)
<i class=”fa fa-balance-scale fa-lg” aria-hidden=”true”></i>
<i class=”fa fa-balance-scale fa-2x” aria-hidden=”true”></i>
<i class=”fa fa-balance-scale fa-3x” aria-hidden=”true”></i>
<i class=”fa fa-balance-scale fa-4x” aria-hidden=”true”></i>
<i class=”fa fa-balance-scale fa-5x” aria-hidden=”true”></i>
As you can see in our example below, someone got a little icon happy!!
Well, this concludes our tutorial. We hope you learned lots, but more importantly, had fun learning some new and easy ways to pizzazz up your divi site using NO CSS!!!
Please feel free to leave us feedback on this or any tutorial on our site, or submit a request on what Divi Help can help you learn to become the best Divi master possible without using CSS.