This topic has 55 replies, 21 voices, and was last updated 6 years by plymouthvcse.

  • Author
  • #15750
     Abe
    Keymaster

    Hi, This topic will show you how to replace the defined icons for the existing menu items. See the attached screenshot with the referred icons

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    Attachments:
    You must be logged in to view attached files.
    #15753
     Abe
    Keymaster

    Fist thing, Kleo uses Fontello for Vector icons.

    To see the icons that are included follow the next steps:
    1. Go to http://fontello.com/
    2. Click on the litte tool icon at top and Import
    3. Go to the theme main downloaded package from Themeforest in Assets/Fontello and select the font-icons.json
    4. Now you’ll see all the icons that are available with a rounded border.

    All the icons are added by CSS, so you need to add some CSS rules to change the default icons defined by us.
    This is the default CSS for the icons:

    COPY CODE
    
    #buddypress div#item-nav ul #activity-personal-li a:before,
    #buddypress div#item-nav ul #home-groups-li a:before {
    	content: "\e8ed";
    }
    #buddypress div#item-nav ul #xprofile-personal-li a:before {
    	content: "\e98e";
    }
    #buddypress div#item-nav ul #notifications-personal-li a:before {
    	content: "\e863";
    }
    #buddypress div#item-nav ul #messages-personal-li a:before {
    	content: "\e98c";
    }
    #buddypress div#item-nav ul #friends-personal-li a:before {
    	content: "\e98f";
    }
    #buddypress div#item-nav ul #groups-personal-li a:before {
    	content: "\e995";
    }
    #buddypress div#item-nav ul #forums-personal-li a:before,
    #buddypress div#item-nav ul #nav-forum-groups-li a:before {
    	content: "\e97b";
    }
    #buddypress div#item-nav ul #buddydrive-personal-li a:before,
    #buddypress div#item-nav ul #nav-buddydrive-groups-li a:before {
    	content: "\e8d7";
    }
    #buddypress div#item-nav ul #media-personal-li a:before,
    #buddypress div#item-nav ul #rtmedia-media-nav-groups-li a:before {
    	content: "\e8c5";
    }
    #buddypress div#item-nav ul #settings-personal-li a:before,
    #buddypress div#item-nav ul #admin-groups-li a:before {
    	content: "\e98b";
    }
    #buddypress div#item-nav ul li.dropdown a:before {
    	content: "\e97c";
    }
    #buddypress div#item-nav ul #members-groups-li a:before {
    	content: "\e995";
    }
    #buddypress div#item-nav ul #invite-groups-li a:before {
    	content: "\e991";
    }
    #buddypress div#item-nav ul #achievements-personal-li a:before {
    	content: "\e996";
    }
    #buddypress div#item-nav ul #blogs-personal-li a:before {
    	content: "\e802";
    }
    #buddypress div#item-nav ul #articles-personal-li a:before {
    	content: "\e870";
    }
    

    To override an icon, lets say the Activity icon:
    – we identify it from list above and copy the code
    – go to Fontello and get the code for your new icon by going to the Customize codes tab
    – change the copied text with the new value
    – add this CSS to your child theme/style.css
    Example to replace the Activity icon with a heart icon:

    COPY CODE
    
    #buddypress div#item-nav ul #activity-personal-li a:before {
    	content: "\E80F";
    }
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15756
     Abe
    Keymaster

    To add icons to new items added by plugins you need to inspect the element using Chrome browser, get the ID of the specific list item and follow the above example.

    Example to add for Buddypress Follow plugin that adds two new navigation items, Followers and Following

    /* Following icon */
    #buddypress div#item-nav ul #members-following-personal-li a:before {
        content: "\E98F";
    }
    /* Followers icon */
    #buddypress div#item-nav ul #members-followers-personal-li a:before {
        content: "\E995";
    }
    
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15771
     Pedroml
    Participant

    Very useful thanks 🙂

    #15795
     Pedroml
    Participant

    I saw your screenshot and inactive icons are light gray.
    In my page they are transparent, maybe I modified the style without realizing it.

    What property controls that?

    Attachments:
    You must be logged in to view attached files.
    #15808
     Abe
    Keymaster

    They should be like in the my first attached screenshot. It could be related to Chrome. If you hove the mouse over, they become visible?

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

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15809
     Abe
    Keymaster

    To change those icon colors this is the CSS:

    COPY CODE
    
    .main-color #buddypress div#item-nav ul li a:before, .main-color #buddypress div#item-nav .tabdrop .dropdown-menu li a:before {
        color: #E5E5E5;
    }
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15854
     Pedroml
    Participant

    Yes, on mouse over they become visible.

    I tried in chrome and Opera and is the same, even after adding the CSS code.

    #15858
     Abe
    Keymaster

    And they remain visible after you no longer hover ?

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

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15891
     Pedroml
    Participant

    The active icon is correct.

    Inactive icons are displayed on mouse over only.

    The problem I think is that the color of the inactive icons is white, but I dont know where it modifies.

    #16049
     Pedroml
    Participant

    The problem of transparent inactive icons is not solved, here’s the link to check for solution.

    Thanks. http://terapianatur.com/miembros/dddfd/

    #16110
     Abe
    Keymaster

    Check Theme options – Styling options – Main section – Alternate border. If you set it to white then that is the problem

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

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #16114
     Pedroml
    Participant

    Perfect!

    The border color and the background color was white, now changed to default and it looks correct.

    Thank you very much 🙂

    #37300
     natiugango
    Participant

    Thanks for the advice to change the color of the icon.
    But how to change the color settings for the selected item and for the hover effect?

    K.

    #46670
     russellkhan
    Participant

    just wondering if there is anyway i can have smaller icon size than what we have default set. I want to keep the same icon which is available out of the box but want to have smaller size.

    #46915
     lemonjoe
    Participant

    Hey, how can I insert png-icons instead of fontello?

    Thank you very much!

    #47098
     jiant
    Participant

    Please help, I´m not pro, and also I can´t undertand perfectly the english language.

    The question is : (Really I readed all you wrote above of this topic,but can´t understand)

    I want to a new items appered in the navmenu , but not in desplegable menu wich is situaded at the rigth of the nav-menu.(made with custom menu)

    I want the items appeared with a new icom.

    Please be specific where I have to put the codes. (this is the more difficult par for me)

    Thank so much.

    #47989
     Andrei
    Moderator

    @russellkhan , you can achieve that by adding “font-size” property to the same exemplified css rules given above.


    @lemonjoe
    , you can do that by customizing the same exemplified css rules given above, and you should add them as backgrounds, and set content=””

    In both cases css knowledge is needed


    @jiant
    , firstly you will need programming skills to add/remove profile menu items, there are some tutorials over the internet to do so but is nothing easy, maybe try to find a plugin to help you do that, and secondly the dropdown menu only appears when you don’t have enough space to show all menu items.

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

    Thanks devs for the info..
    & please provide me a code to change the color of the current selected icon.

    #49875
     Andrei
    Moderator

    It’s basic css, inside the css rule you have to add:

    color: blue;

    Cheers

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

    Hi! I have a problem: in my member page there isn’t the icon for “article”. What I have to do?
    Second, is it possible to toggle off some icons/options on the member page?
    Third, is it possible to add a icon/option (and a content!) to the member page?

    thank you
    marco

    #50278
     Andrei
    Moderator

    The “article” tab is added by the “Social Articles” plugin, so please be sure you have it installed and configured.
    You can remove profile tabs by deactivating some of the buddypress components or implementations.
    Yes you can add an additional page and menu item but you’ll need programming skills to apply and modify some code snippets.

    Cheers

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

    Hello!

    Im missing the “sites” tab, where to find it or hoe to add it without installing “another plugin”? already downloaded BuddyPress Custom Profile Menu, but if I can avoid it the better, plus…checked your demo sites and “sites” is included.
    Any feedback will be much appreciated
    Tks

    #54709
     Abe
    Keymaster

    Hi, “Sites” menu appears only when you have WordPress multisite enabled and from Admin settings you enable registration and blogs creation

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

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #55143
     carolina marques
    Participant

    Hi, uma pergunta: o mesmo se aplica com o ícone de favorito que aparece na atividade? Eu queria substituir este icone estrela-vazia por um icone thumbs-up. Como faço?

    #55144
     carolina marques
    Participant

    Sorry , I write in Portuguese unintentionally…

    Hi, a question: the same applies with the favorite icon that appears in the activity? I wanted to replace this star-empty icon for a thumbs-up icon. How do I?

    #56376
     Andrei
    Moderator

    Hi,

    Please put this code in your theme child style.css file or in wp-admin, under Theme Options > General Settings > Quick Css

    COPY CODE
    
    #buddypress a.button.fav::before, #buddypress a.fav.bp-secondary-action::before {
        content: "\e848";
    }
    #buddypress a.button.unfav::before, #buddypress a.unfav.bp-secondary-action::before {
        content: "\e84a";
    }
    

    Cheers

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

    2. I dont see little tool icon at top to import. Do you mean download webfont?
    3. There is no font-icons.json file in Assets/Fontello/Font, there is a file called config.json. I cant open it properly, when I open it with wordpad its a bunch of text.

    Perhaps Im doing something wrong, but I followed your steps as outlined.

    I want to switch my media icon to (pictures) icon, to the one in the attachment, could you tell me what the identifier is for that circled icon please?

    Attachments:
    You must be logged in to view attached files.
    #60094
     Abracadabra
    Participant

    I was able to identify which icons I want, but these codes shown do not work.

    Attachments:
    You must be logged in to view attached files.
    #60124
     carolina marques
    Participant

    I was also looking through the web http://www.fontello.com, but not so.

    @Abracadabra look inside your download folder Kleo “themes-kleo-version \ 2.4.3 \ Assets \ Fontello \ demo.html” open and select the icon of your preference. With the mouse over you can see the code.

    #60125
     Abracadabra
    Participant

    Great thanks Carolina.

    #64360
     NEILBATCHELOR
    Participant

    hi sorry to resurrect this but I can’t follow the post

    I would like to:

    – change the fontello icons in the buddypress profile bar
    – change the colour in v3.01

    can you add this option to the theme options becauses its messy hunting around for css and json files

    can you give exact paths please so I know which files to edit,

    how can I retain the edits on theme update please?

    really appreciate it

    #64491
     Andrei
    Moderator

    Hi,

    We’ll add a profile menu configurator for sure in one of our future updates.
    This topic contains all the details needed in order to change the icons, you just have to read it carefully.
    For update compatibility you should have the child theme installed and activated and this css rules should be added into the style.css file of the child theme.

    Cheers

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

    Please take a look at this also https://archived.seventhqueen.com/kb/changing-section-icons-in-profiles-and-groups

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

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #65962
     NEILBATCHELOR
    Participant
    This reply has been set as private.
    #65966
     Andrei
    Moderator

    Hi,

    You’ll have to give me some screenshots to point out the exact elements for which you want to change their color.
    Regarding importing other icons, please give a look at this section from our docs:
    https://archived.seventhqueen.com/documentation/kleo#vector-icons

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #67204
     NEILBATCHELOR
    Participant
    This reply has been set as private.
    #67407
     pogang
    Participant
    This reply has been set as private.
    #67524
     Andrei
    Moderator

    Hi @pogang,

    Firstly please give a look at our install video tutorial over here: https://www.youtube.com/watch?v=e1fLpukxW5s
    Secondly, you can buy this service over here for the theme installation, and after that if you still need help we’ll talk separately about the costs. https://archived.seventhqueen.com/services/wordpress-theme-installation-service

    Cheers

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

    Hello,
    I would like to know if there is a way to add an icon for the member’s Yith Wishlist to the bp profile bar. I’ve looked into this, but my attempts at adding a #nav…. have been unsuccessful.
    Thank you!

Viewing 40 posts - 1 through 40 (of 56 total)

You must be logged in to reply to this topic.

Log in with your credentials

Forgot your details?