Adding icons to group navigation
- This topic has 15 replies, 9 voices, and was last updated 11 years ago by .
- You must be logged in to reply to this topic.
Tagged: groups, icons, navigation, profile
I found that one of the most annoying things with the CBox theme is the inability to add icons to group and profile navigation if the plugins aren’t supported by CBox.
So … after a little research here is my solution for the most common ones:
Add the following to “options” – “custom css” in CBox theme options
For Buddydrive:
li#nav-buddydrive-groups-li a:before,
#user-buddydrive:before {
content: "M"
}
For Collabpress
li#nav-projects-groups-li a:before,
#user-projects:before {
content: "S"
}
li#calendar-groups-li a:before,
#user-calendar:before {
content: "R"
}
where the first is for projects and the second for the calendar.
The letter behind “content” is the icon. These are changeable to display different icons. Play around with them to find out which works best for you.
I’ve only tested with these two plugins but it should work the same for others too
@helenef – Helene Finidori – please see Dave’s solution above to address issue with icons. Thanks all.
Yesss! It worked. Thanks, one line to check off in my list 🙂 Thanks @musicmovement and @scottvoth!
Thanks alot @musicmovement, I don’t why I didn’t think of this myself 🙂
@haystack shared this nice tidbit on Github.
To see the full list of icons that the icon font uses, check out this link:
wow thank you, it work perfect.
But i want edit some icons, Can i do it?
editing an icon is not possible I’m afraid. There are ways to completely change the entire icon font and replace ALL the icons, but this is not an easy task. I hope to write a tutorial about this someday.
This is fantastic, just a few more questions please – then I will try not to appear in your inbox so often!:
1. I had assumed that my inability to get into Cbox theme options was as a result of the upgrade but it looks like everyone else still has access. Any idea what my issue could be?
2. If I want to add icons to personal profile menus, does the code stay the same (obviously bar the label). I am using social articles on personal profiles – menu label ‘My articles’
Css for social articales plugin:
li#articles-personal-li,
#user-articles:before {
content: "C"
}
Thank you @Nd-elect
I have Member Groups that create a hierarchical group tree as in main group >member group 1; member group 2;member group 3;etc. The plugin is BP Group Hierarchy and the navigation label id Member Groups. I can’t seem t fathom the correct code to display an icon. can any one help me again please?
@sam brown
your code:
li#nav-hierarchy-groups-li,
#nav-hierarchy:before {
content: "{"
}
@Nd-elect Ahh I had gone very wrong! Thank you 🙂
Hi.
How do I find out the correct code for a particular plugin? In this instance I’m trying to work out the right choice for Buddypress Group Calendar.
Thanks.
Hi Chris, the following worked for me:
#calendar-groups-li a:before,
#user-calendar:before {
content: “R”;
}