This one is simple, but really cool.

You’ll like it.

So, let’s change the mobile menu icon.

This is the mobile menu icon.

Here’s what we will get in the end

So, for starters, here’s the css code for the mobile menu icon.

.mobile_menu_bar:before {content: " ";}

What you put inside the quotation marks are what becomes the mobile menu icon.

So how do we put an icon in there?

Well you go here for the icon list..

Elegant Icons

and you find something you want to use.

Now the code part is tricky. (Sort of)

This is what the unicodes for the icons look like

The target shaped icon has the code

\

You are going to change the &#x to a \
and take out the ;

This gives you \5c

That goes inside the quotation marks.

like this:

.mobile_menu_bar:before {content: "\5c";}

and you’ll get a new mobile menu icon.

Bonus: You can use them in the menu as well

This reduces the need for fontawesome sometimes, and loading less stuff to do the same thing is always better.

So, start by adding a class just for the icon set.

.icons {font-family: 'ETmodules' !important;}

And now you can call any unicode icon with the class around it. Like this:

<span class="icons">&#xe0e7</span> Calculator

Just drop that in the menu title

And this is what you get!

Pretty neat, huh?

Edit:
Because some kind gentleman has commented that the hamburger icon should stay, that doesn’t mean alternate hamburgers like b, c, or even a for a menu that opens to show contact info is not usable.

Also, you can totally do

.mobile_menu_bar:before {content: "\64 MENU";}

Just so the icon will say menu. Have a read here to see why adding the text MENU helps. (Click this sentence)

So yeah, have fun with this new power, and as we all know, the hamburger is ubiquitous enough that people don’t have too much trouble guessing its function. So use this tip wisely.
 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

Reference: This link helped me with modifying the unicode: ElegantTweaks

Photo by Lidye Petit on Unsplash