Yes, the code works. Perhaps your original code needs more specificity, like so:

#main-window:not(#f) #personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-text {
  display: none !important;
}

ooh ok progress, i am doing the opposite though. Removing the icon to only show text (figured that out easy enough). Thank you!!

How would I have the same behavior for folders in the bookmark bar?

I like to name folders with an emoji and nix the folder icon so only the emoji is showing, thus folder icons!

What works best for me is to create a new empty folder in your root C: directory (I name that folder "Firefox Images") and put all the images you want to use for the browser in there. For the bookmarks bar folder icon:

#main-window:not(#f) #personal-bookmarks .bookmark-item[container][label="xxx"] .toolbarbutton-icon {
  list-style-image: url("file:///C:/Firefox Images/bookmarks.png") !important;
}

Put the folders exact label name in place of xxx and point to the path where the image is, url("file:///C:/Firefox Images/image name and extension.here") I use the root directory C: because it keeps the path length short. You can even put a css file in there to put all your css related to bookmarks and name it, for example, bookmarks.css and in your user profile folder > chrome > userChrome.css file, add to the very top as first entry: @import url("file:///C:/Firefox Images/bookmarks.css"); This will keep you from switching back and forth between the two folders when you want to add/delete/edit images. So everything related to your bookmarks will be in one area/file.

In what way are you using images? I want to display text or emoji only.

To remove icons for files and folders you need to use:

• #personal-bookmarks .bookmark-item .toolbarbutton-icon {display:none!important;}

You need to use Unicode replacements for the emoticons to use them as text. For SVG images you will have to use icons.

• https://en.wikibooks.org/wiki/Unicode/Character_reference/1F000-1FFFF

• #personal-bookmarks .bookmark-item .toolbarbutton-icon {display:none!important;}"

That was exactly what i needed. Now only the emoji's display and look like the folders were replaced with custom icons. sweeeet. tyvm!!