How to Replace the Mobile User Icon

The user icon displayed in the mobile menu can be replaced with another Font Awesome icon by using custom CSS.

Find the Font Awesome Icon Code

First, choose the Font Awesome icon you want to use from the Font Awesome icons library:

https://fontawesome.com/icons

Each Font Awesome icon has a unicode value. For example, the cogs icon uses the code f085.

Add the Custom CSS

Use the CSS below to replace the current mobile user icon:

.fa-cogs:before {
  content: "\f085" !important;
}

Replace f085 with the unicode value of the Font Awesome icon you want to use.

For example, if the new icon uses the unicode value f007, the CSS would be:

.fa-cogs:before {
  content: "\f007" !important;
}

Where to Add the CSS

Because the Redux Framework may not save the backslash character \ correctly in this CSS rule, do not add this code in Theme Options custom CSS.

Instead, add the CSS in one of these places:

• Appearance > Customize > Additional CSS
• The style.css file from your child theme

Important Note

This customization changes the icon visually using CSS. After adding the CSS, clear your website cache, browser cache, and any server or CDN cache if used.