User profile – section icons

[rlarson87]

Hi, is it possible to update the section icons in the user profile? A lot of section icons are just boxes. See screenshot.

Is there a list of icons that are available?

[Laura]

Hello, using css its easy but i need to now which icons you want to use for which item, check fontello icons and fontawesome icons libraries on google 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Thanks. Here are the icons I would like to use…

Profile – fa-user-circle-o
Events – fa-calendar
Friends – fa-address-book-o
Groups – fa-users
Listings – fa-map-marker
Favorites – fa-heart-o
Rendez-Vous – fa-handshake-o
Settings – fa-cog

Also, how do I hide the “Reviews” tab in the profile?

[rlarson87]

Hi, can you update these please. Thanks

[Laura]

Hello, the access provided do not work, let me know so i can build the code for you

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Access details are:

http://www.irside.com/wp-admin
rlarson87
Grace226!

[Laura]

Hello, it seems the password is not correct, let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

That password is the correct one. Please try again.

rlarson87
Grace226!

I have been having a bug with the login screen not processing. Click on register, then click on login for it to work.

[rlarson87]

Thanks. My credentials are as follows:

http://www.irside.com
rlarson87
Grace226!

If login is not working, please login on this page.

https://irside.com/wp-login.php

[Laura]

Hello, this is the css style, add it to style.css of child theme you need to add the code of the icon, its not font awesome, its fontello

COPY CODE

li#xprofile-personal-li a:before {
    content: "\ea03";
}
li#events-personal-li a:before {
    content: "\ea03";
}
.bp-light-icons #buddypress div#item-nav ul #friends-personal-li a:before {
    content: "\e9ab";
}
.bp-light-icons #buddypress div#item-nav ul #groups-personal-li a:before {
    content: "\e9cb";
}
li#gdbuddypress-nav-listings-personal-li a:before {
    content: "\e9cb";
}
a#user-gdbuddypress-nav-favorites a:before {
    content: "\e9cb";
}
li#rendez-vous-personal-li a:before {
    content: "\e9cb";
}
li#settings-personal-li a:before {
    content: "\e9cb";
}

Just change the \e9cb wth the icon code

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Can you give me an example of the icon name to add? Do I need to load the Fontello icon file?

[rlarson87]

Hi, I updated based on the fontello codes but it did not work. Here is code and screenshot.

li#xprofile-personal-li a:before {
content: “59413”;
}
li#events-personal-li a:before {
content: “59414”;
}
.bp-light-icons #buddypress div#item-nav ul #friends-personal-li a:before {
content: “59415”;
}
.bp-light-icons #buddypress div#item-nav ul #groups-personal-li a:before {
content: “59416”;
}
li#gdbuddypress-nav-listings-personal-li a:before {
content: “59417”;
}
a#user-gdbuddypress-nav-favorites a:before {
content: “59418”;
}
li#rendez-vous-personal-li a:before {
content: “59419”;
}
li#settings-personal-li a:before {
content: “59420”;
}

[Laura]

Hello, those codes are not correct, they should look like the ones before “\e9cb” same like this

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Thanks. Where do I find those codes at?

[rlarson87]

Nevermind, I found the codes list. But the issue I’m having is that when I insert the codes, not all the icons on the profile page are updating. Here is the code I used which uses an hour glass icon, but not all the icons were updated.

li#xprofile-personal-li a:before {
content: “e800”;
}
li#events-personal-li a:before {
content: “e800”;
}
.bp-light-icons #buddypress div#item-nav ul #friends-personal-li a:before {
content: “e800”;
}
.bp-light-icons #buddypress div#item-nav ul #groups-personal-li a:before {
content: “e800”;
}
li#gdbuddypress-nav-listings-personal-li a:before {
content: “e800”;
}
a#user-gdbuddypress-nav-favorites a:before {
content: “e800”;
}
li#rendez-vous-personal-li a:before {
content: “e800”;
}
li#settings-personal-li a:before {
content: “e800”;
}

[Laura]

Hello, add !important before each ; this should work
Example:
li#settings-personal-li a:before {
content: “\e800” !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Thanks. That fixed all of them except the Favorites icon. The Favorites icon is still not updating. Here is the code for that one…

a#user-gdbuddypress-nav-favorites a:before {
content: “e800” !important;

[rlarson87]

Can I get a response on this please?

[Laura]

Hello, try

COPY CODE

a#user-gdbuddypress-nav-favorites:before {
    font: 320% "fontello";
    content: "\e800" !important;
    margin-bottom: 10px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Hi, that new code did not work. The icon still did not update.

[Laura]

did you try adding it to quick css of theme options?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

That worked. Thanks!

[rlarson87]

What would code be to replace the “Notifications” and “Messages” icons too? Those are the only ones I don’t have yet.

[Laura]

Hello, maybe this works

COPY CODE

li#messages-personal-li a:before {
content: “\e800” !important;
}
li#notifications-personal-li a:before {
content: “\e800” !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rlarson87]

Hi, I am still having issues with three icons not updating. Can you please try to fix?

The three icons on the profile page that aren’t updating are “Messages”, “Notifications” and “Favorites”

http://www.irside.com
rlarson87
Grace226!

[Laura]

Hello, added this to quick css, it works now

COPY CODE

.bp-light-icons #buddypress div#item-nav ul #notifications-personal-li a:before {
    content: "\e800" !important;
}
.bp-light-icons #buddypress div#item-nav ul #messages-personal-li a:before {
    content: "\e800" !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts