Comment on page
User Menu - Custom Icons
Site administration -> Appearance -> BAZ - Advanced -> Raw SCSS
LabelXYZ|https://apple.pl
.usermenu .dropdown-item[data-identifier="LabelXYZ"] {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}
Important: data-identifier needs to be unique.
If Label is eg. Apple then the data-identifier is "Apple"
If contains more words (e.g "First letter of the sentence") then the proper code might look like this:
.usermenu .dropdown-item[data-identifier*="First"] {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}
1. Insert SVG code
2. Copy CSS code from "Ready for CSS"
You can use icons from e.g:
Last modified 8mo ago