# Changing section icons in profiles and groups

Source: https://seventhqueen.com/docs/kleo/changing-section-icons-in-profiles-and-groups/

On profile and group pages, you'll see icon bars like the one shown above. You can change these icons to anything you want, here's how...

#### 1: CSS IDs

Start by finding the CSS selector for the icon you want to change. You will need the id of the  element associated with the icon. On profile pages it will end with "-personal-li" and on group pages it will end with "-groups-li". The easiest way to do this is to install [Google Chrome web browser](https://www.google.com/intl/en/chrome/browser/), and then right-click on the icon you want to change and choose "Inspect Element" you'll see something like this:

![](https://cdn.seventhqueen.com/docs/media/2020/11/inspect-icon.png)

#### 2: Icon IDs

In your WordPress installation folder, navigate to: **wp-content/themes/kleo/assets/font** and find the **config.json** file. Go to [fontello.com](http://fontello.com/) and from the tools menu, choose **Import**:

![](https://cdn.seventhqueen.com/docs/media/2020/11/fontello-import.png)

When prompted, upload your **config.json** file and the fontello website will highlight all the icons that KLEO provides. Next, click on the **Customise Codes** tab and you'll see a list of the icons with their unique codes below them.

![](https://cdn.seventhqueen.com/docs/media/2020/11/fontello-customise-codes.png)

Find the icon you want to use and write down it's code (the code always starts with "E").

#### 3: Write CSS

The format of your CSS will be slightly different depending on whether you're changing a profile icon or a group icon. In the example below, I'm changing the LOCATION icon for both profile (location-personal-li) and group (nav-gmw-group-location-groups-li) pages to icon number E868 (a map pin).

```
/* Profiles: LOCATION icon */
#buddypress div#item-nav ul #location-personal-li a:before { content: "\E868"; }

/* Groups: LOCATION icon */
#buddypress div#item-nav ul #nav-gmw-group-location-groups-li a:before { content: "\E868"; }
```

Note how there's a # in front of the icon id, and a \ in front of the icon code.

#### 4: Add CSS

_Important: Make sure that Kleo Child is the active theme (in Appearance > Themes) first!!_

In the WordPress admin area, go in to Appearance > Editor and edit the Kleo Child: Stylesheet (style.css) - it looks like this:

```
/*
Theme Name:     Kleo Child
Theme URI:
Description:    Child theme for Kleo
Author:         SeventhQueen
Author URI:     http://seventhqueen.com
Template:       kleo
Tags:  one-column, two-columns, right-sidebar, fluid-layout, custom-menu, featured-images, post-formats, sticky-post, translation-ready
License: GNU General Public License
License URI: license.txt
*/

/*
* Please add your custom styles below
*/
```

Add in the CSS code you made earlier and save it.

#### 5: Test

After [clearing your browser cache](https://www.wikihow.com/Clear-Your-Browser's-Cache), go into the front end and refresh the profile or group page to check it's working. If it's not working, common mistakes include:

	- Forgetting to put the # in front of the icon id or mistyping the id

	- Forgetting to put the \ in front of the icon code

If you need help, please ask in our [support forums](https://archived.seventhqueen.com/forums/topic/change-buddypress-navigation-menu-icons).

#### 6: Common ID's

_**Common profile item id's:**_

	- ACTIVITY: **activity-personal-li**

	- PROFILE: **xprofile-personal-li**

	- NOTIFICATIONS: **notifications-personal-li**

	- MESSAGES: **messages-personal-li**

	- FRIENDS: **friends-personal-li**

	- FOLLOWING: **members-following-personal-li** ([BuddyPress Follow](https://wordpress.org/plugins/buddypress-followers/) plugin)

	- FOLLOWERS: **members-followers-personal-li** ([BuddyPress Follow](https://wordpress.org/plugins/buddypress-followers/) plugin)

	- GROUPS: **groups-personal-li**

	- FORUMS: **forums-personal-li**

	- LOCATION: **location-personal-li** ([Geo my WP](http://geomywp.com/) plugin)

	- BUDDYDRIVE: **buddydrive-personal-li** ([BuddyDrive](https://wordpress.org/plugins/buddydrive/) plugin)

	- DOCS: **docs-personal-li** ([BuddyDocs](https://wordpress.org/plugins/buddypress-docs/) plugin)

	- SETTINGS: **settings-personal-li**

	- MEDIA: **media-personal-li** (rtMedia plugin)

	- MY ARTICLES: **articles-personal-li** ([Social Articles](https://wordpress.org/plugins/social-articles/) plugin)

_**Common group item id's:**_

	- HOME: **home-groups-li**

	- FORUM: **nav-forum-groups-li** ([bbPress](https://wordpress.org/plugins/bbpress/) plugin)

	- DOCS: **nav-docs-groups-li** ([BuddyDocs](https://wordpress.org/plugins/buddypress-docs/) plugin - if you rename the menu item in its settings, the id will change)

	- MEMBERS: **members-group-li**

	- GROUP TREE: **nav-hierachy-groups-li** ([BP Group Hierarchy](https://wordpress.org/plugins/bp-group-hierarchy/) plugin - when link is active, the id changes to **group-hierarchy-group-li** so you'll need to add both to your CSS)

	- LOCATION: **nav-gmw-group-location-groups-li** ([GMW Group Locator](https://geomywp.com/add-ons/groups-locator/) plugin)

	- SEND INVITES: **invite-groups-li**

	- EMAIL-OPTIONS: **nav-notifications-groups-li** ([BuddyPress Group Email Subscription](https://wordpress.org/plugins/buddypress-group-email-subscription/) plugin)