- This topic has 17 replies, 4 voices, and was last updated 7 years, 8 months ago by
.
-
Posts
-
Is it possible to add Font Awesome icons for user profiles and groups BuddyPress, as is done in the KLEO template: http://seventhqueen.com/themes/kleo/members/kleoadmin/. I would also like a horizontal line, as is done there.
-
This topic was modified 8 years, 2 months ago by
.
Lead Developer
It’s possible but involves using CSS in the :before selectors of the links.
For example:
#buddypress div#item-nav ul li a:before { font: 400% "FontAwesome"; content: "\e8a5"; /* change this to proper Font Awesome unicode */ display: block; text-align: center; transition: all 0.4s ease-in-out 0s; } #buddypress div#item-nav ul #activity-personal-li a:before, #buddypress div#item-nav ul #home-groups-li a:before { content: "\e8ed"; /* change this to proper Font Awesome unicode */ } #buddypress div#item-nav ul #xprofile-personal-li a:before { content: "\e98e"; /* change this to proper Font Awesome unicode */ } #buddypress div#item-nav ul #blogs-personal-li a:before { content: "\e802"; /* change this to proper Font Awesome unicode */ } #buddypress div#item-nav ul #friends-personal-li a:before { content: "\e98f"; /* change this to proper Font Awesome unicode */ } #buddypress div#item-nav ul #groups-personal-li a:before { content: "\e995"; /* change this to proper Font Awesome unicode */ } #buddypress div#item-nav ul #forums-personal-li a:before, #buddypress div#item-nav ul #nav-forum-groups-li a:before { content: "\e97b"; /* change this to proper Font Awesome unicode */ }You can find the unicode on the icon details page (for example: http://fortawesome.github.io/Font-Awesome/icon/car/).
Hope this gets you on your way 🙂
Thanks It works! However, if you can change the color of icons? Or will it be the same with text link?
You should be able to do it with this:
#buddypress div#item-nav ul li a:before { color: #222222; }1) And what about the horizontal line? Is that possible?
2) Can I lift up the counter activity?
You can find all of these answers by using the inspect element tool in your browser.
Counter:
#buddypress div#item-nav ul li a span { position: absolute; top: 10px; left: 52%; z-index: 12; }Border:
#buddypress .item-nav { border-bottom: 1px solid #DDD; }I use your CSS:
#buddypress div#item-nav ul li a span { position: absolute; top: 10px; left: 52%; z-index: 12; }the counter is displayed at the top of the site, rather than next to the icon.
Ah, you need this as well:
#buddypress div#item-nav li { position: relative; }Thank you!
How to assign different classes of links at the top and bottom? For example, I want to make a link at the top of a different color.
You can try this:
#buddypress div.item-list-tabs a { color: #555555; }hi, your code is awesome and couldn’t be easier to install yet i’ve ran into some problem
when trying saving the custom i get some error “Unsafe strings were found in your CSS and have been filtered out.” i’ve looked on the forum of the theme creators and they’ve said that their theme currently doesn’t support customizing font awesome icons, so my question is, is there a work around to get my icons for my buddypress profiles?
p.s. forgot to mention, apparently it has an issue with this sign \ from
content: "\e995";How are you trying to save the CSS? Using a plugin?
no, the theme has tab in the theme dashboard called Custom Code, an option many current premium themes have. The theme creators only gave a suggestion saying they’ve used font awesome icons across their theme and to look there but i’m no web designer, i only know a little, nowhere enough apparently to solve this issue, if it was any other theme it would’ve been piece of cake to implement the code above but this one has issues
Try a plugin to insert your CSS then: https://wordpress.org/plugins/simple-css/
-
This topic was modified 8 years, 2 months ago by
- You must be logged in to reply to this topic.