How to Change the Mobile Profile Menu Icons.

Changing mobile profile icons requires a small effort on your part and patience in reading HTML. If you do not know how to add custom CSS please view the how to here first:

The following is the format for changing the mobile profile menu icons

#mobile-item-nav ul li#[id of the menu item]:before{ content: '\f0fb'; }

You will need to change two things in this code

  1. [id of the menu item]
  2. content: '\f0fb';

To find the ID of the menu element to change you will need to view the source of your web page if the menu item is from a third party plugin, you could also try asking the plugin developer for the menu ID. Or, you can use one of the default menu IDs as follows:

  • activity-personal-li
  • xprofile-personal-li
  • members-following-personal-li
  • members-followers-personal-li
  • groups-personal-li
  • blog-personal-li
  • forums-personal-li
  • docs-personal-li
  • photos-personal-li

Additionally you could use the browser developer tools to inspect elements but that is an advanced option discussed here:

To change the icon you will need to search the FontAwesome cheat sheet web page and replace the four characters of content. Make sure you do not remove the quotes or backslash, these are IMPORTANT. Here is a link for your reference:

If you are using the BuddyBoss or Boss theme add the code to your custom.css file in your child theme. Otherwise add the code to your Custom CSS section in your theme options discussed here:

Save your changes and check your site to see your live changes. If you do not see the changes right away your browser may have cached the page or you may have a caching plugin installed and need to purge the cache. Check with the plugin author how to do that.

Powered by Zendesk