Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

BuddyPress icon

Home Forums Support BuddyPress icon

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #174298
    Oleg

    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 4 years, 9 months ago by Oleg.
    #174317
    Tom
    Lead Developer
    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 🙂

    #174323
    Oleg

    Thanks It works! However, if you can change the color of icons? Or will it be the same with text link?

    #174439
    Tom
    Lead Developer
    Lead Developer

    You should be able to do it with this:

    #buddypress div#item-nav ul li a:before {
        color: #222222;
    }
    #174489
    Oleg

    1) And what about the horizontal line? Is that possible?
    2) Can I lift up the counter activity?

    1

    #174544
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #174564
    Oleg

    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.

    #174580
    Tom
    Lead Developer
    Lead Developer

    Ah, you need this as well:

    #buddypress div#item-nav li {
        position: relative;
    }
    #174600
    Oleg

    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.

    1

    2

    #174853
    Tom
    Lead Developer
    Lead Developer

    You can try this:

    #buddypress div.item-list-tabs a {
        color: #555555;
    }
    #193452
    Gabriel

    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?

    #193454
    Gabriel

    p.s. forgot to mention, apparently it has an issue with this sign \ from

    content: "\e995";

    #193544
    Tom
    Lead Developer
    Lead Developer

    How are you trying to save the CSS? Using a plugin?

    #193659
    Gabriel

    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

    #193679
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.