icon change for the profile menu

[krishipathsala]

This reply has been marked as private.

[krishipathsala]

https://ibb.co/hYvDWVJ this svg icon

[Veronica]

checking on your site

[Veronica]

i think you have removed the code from the customizer file

[Veronica]

add_filter('vibebp_component_icon',function($icon,$compoent){

if($id == 'post_type__page__28'){ // Check component id , set $icon as svg
$icon = '<svg width=”24″ height=”24″ viewBox=”0 0 24 24″ style=”fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;”>
<path d=”M15.473,19.593C14.365,20.679 13.198,21.812 12,23C5.57,16.619 0,11.853 0,7.192C0,0.423 8.852,-1.154 12,4.248C15.125,-1.114 24,0.4 24,7.192C24,7.938 23.844,8.688 23.577,9.445C22.461,8.543 21.043,8 19.5,8C15.916,8 13,10.916 13,14.5C13,16.563 13.97,18.401 15.473,19.593Z” style=”fill-opacity:0.6;fill-rule:nonzero;”/>
<path d=”M19.5,10C17.017,10 15,12.015 15,14.5C15,16.985 17.017,19 19.5,19C21.983,19 24,16.985 24,14.5C24,12.015 21.983,10 19.5,10ZM22,15L20,15L20,17L19,17L19,15L17,15L17,14L19,14L19,12L20,12L20,14L22,14L22,15Z” style=”fill-rule:nonzero;”/></svg>';
}
return $icon;

},10,2);

this is the correct code try to add your SVG in this code

[krishipathsala]

I have the code there: https://ibb.co/m4fM3j4 but the icon did not change.

[Veronica]

This reply has been marked as private.

[krishipathsala]

I have cleared the cache and also check in the incognito mood. But the icon did not change.

[Veronica]

add_filter('vibebp_component_icon',function($icon,$compoent){
if($compoent == 'course'){ // Check component id , set $icon as svg
$icon = '<svg version="1.1" id="lni_lni-user" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64" height="64" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"><g><path d="M32,36.4c8.2,0,14.9-6.7,14.9-14.9S40.2,6.5,32,6.5s-14.9,6.7-14.9,14.9S23.8,36.4,32,36.4z M32,10c6.3,0,11.4,5.1,11.4,11.4c0,6.3-5.1,11.4-11.4,11.4c-6.3,0-11.4-5.1-11.4-11.4C20.6,15.2,25.7,10,32,10z"/><path d="M62.1,54.4c-8.3-7.1-19-11-30.1-11s-21.8,3.9-30.1,11C1.1,55,1,56.1,1.7,56.9c0.6,0.7,1.7,0.8,2.5,0.2c7.7-6.5,17.6-10.1,27.9-10.1s20.2,3.6,27.9,10.1c0.3,0.3,0.7,0.4,1.1,0.4c0.5,0,1-0.2,1.3-0.6C63,56.1,62.9,55,62.1,54.4z"/></g></svg>';
}
return $icon;

},99,2);

add this code and change SVG accordingly tested on local and working

[krishipathsala]

This code only works for components like the "dashboard", "my course", "settings". but it did not work for the all courses tab. this is an external page. as per my understanding, the component here is : post_type__page__28. But when ever I add this in the code like this : if($compoent == 'post_type__page__28') the icon did not change. https://ibb.co/bmS8VGJ

[Veronica]

hi use this for external links: div span.menu_item_undefined span span.icon.undefined:before { content: "\1F4D6"; } refer: http://prntscr.com/22r7xh3 you need to check for the Unicode of the icon and add it in content in above code

[krishipathsala]

Please understand one thing that we don't know much about coding. 1. Can you tell me how to check the Unicode of an SVG icon? 2. where to put the above code?

[Veronica]

hi you can search that one of them here: https://www.utf8icons.com/character/128214/open-book http://prntscr.com/22sukfx and add the code in custom CSS section in wp-admin>>Appearance>>customize>>custom CSS

[krishipathsala]

As the new update make it easy for changing the icon from the menu. but it still did not give the option for non bp pages. https://ibb.co/4dJ23bC

[Anshuman Sahu]

Yes that does not gives option to set icon for pages .Its not added in our code yet .We have to add provision first to change other menu items .

[Author]

Posts