WordPress tip: How to change the mobile menu icon of WordPress site?

The mobile menu icon is an element in the webpage. We can change an element by customizing the Theme’s CSS (Cascading Style Sheets).

1. Inspect the mobile menu class by using the developer tools of the browser (Press F12 if you are using Google Chrome)
2. Find the mobile menu icon element by using the “Inspect” tool
3. Select the mobile menu icon. The HTML code fragment of the mobile menu will be shown on screen.
4. Look for the class of the mobile menu icon element. (It might be something like ‘mobile-menu-icon’ or similar)
5. Go to WordPress Dashboard
6. Navigate to “Appearance” > “Customize”
7. Go to the “Additional CSS” session
8. Add custom CSS as below (here use mobile-menu-icon class as an example) and save changes.

.mobile-menu-icon::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f002";
    color: black;
}