You can add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#PlacesToolbarItems > .bookmark-item:not([container]) .toolbarbutton-icon { display:none!important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

• http://kb.mozillazine.org/Editing_configuration

You can use this button to go to the current Firefox profile folder:

• Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
• http://kb.mozillazine.org/Profile_folder_-_Firefox

This code leaves the icon for folders. Leave out the ":not([container])" part to include folders as well.

Something you might like to think about if you are familiar with the icons. This is an earlier answer I've given for people looking for more space on a single toolbar. It is the reverse of what you are looking for - keeping the icons but cutting the name down to as far as nothing.

< Right click on the particular bookmark on the toolbar, then click on Properties. You can abbreviate the Name right down to nothing. You can also put similar bookmarks into Folders with appropriate names on the Bookmarks Toolbar. Again, right clicking on the Bar will offer New Folder.

Not everyone seems to know that overflow of bookmarks goes down the right side of the page, accessed via the chevrons(double arrowhead). >

cor-el said

You can add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css

---

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#PlacesToolbarItems > .bookmark-item:not([container]) .toolbarbutton-icon { display:none!important; }

---

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

• http://kb.mozillazine.org/Editing_configuration

You can use this button to go to the current Firefox profile folder:

• Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
• http://kb.mozillazine.org/Profile_folder_-_Firefox

This code leaves the icon for folders. Leave out the ":not([container])" part to include folders as well.

The favicons are still there

alan_r said

Something you might like to think about if you are familiar with the icons. This is an earlier answer I've given for people looking for more space on a single toolbar. It is the reverse of what you are looking for - keeping the icons but cutting the name down to as far as nothing. < Right click on the particular bookmark on the toolbar, then click on Properties. You can abbreviate the Name right down to nothing. You can also put similar bookmarks into Folders with appropriate names on the Bookmarks Toolbar. Again, right clicking on the Bar will offer New Folder. Not everyone seems to know that overflow of bookmarks goes down the right side of the page, accessed via the chevrons(double arrowhead). >

I don't want to remove the favicons to create more space - I want to remove them because they are ugly

Did you create the chrome folder?

• Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• Use a plain text editor to create a (new) userChrome.css file in the chrome folder (file and folder names are case sensitive)
• Paste the code in the userChrome.css file in the editor window
• Make sure that the userChrome.css file starts with the default @namespace line

Can you post the location of the userChrome.css file and its content?

The directory is ~/.mozilla/firefox/mwad0hks.default/storage/permanent/chrome

The contents of the file are:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appmenu-toolbar-button {
  list-style-image: url("chrome://branding/content/icon16.png");
}
toolbarbutton.bookmark-item > .toolbarbutton-icon {
  display: none!important;
}
menuitem.bookmark-item > .menu-iconic-left {
  display: none!important;
}
menuitem.bookmark-group > .menu-iconic-left {
  display: none!important;
}
#appmenu_bookmarksPopup menuseparator[builder="end"],
#appmenu_unsortedBookmarks,
#bookmarksMenuPopup menuseparator[builder="end"],
#menu_unsortedBookmarks,
#BMB_bookmarksPopup menuseparator[builder="end"],
#BMB_unsortedBookmarks {display:none!important;}
toolbar-menubar menuitem .menu-iconic-icon { display:none!important; }
/* kill icons for bookmark folders in Bookmarks menu */
menu.bookmark-item > .menu-iconic-left {
  display: none!important;
}

/* kill icons for bookmark groups in Bookmarks menu */
menuitem.bookmark-group > .menu-iconic-left {
  display: none!important;
}
menuitem > .menu-iconic-left {
  display: none!important;
}
ss-context-menu-item > .menu-iconic-left {
  display: none!important;
}
.button-box .button-icon {
    display: none;
}
#PlacesToolbarItems > .bookmark-item:not([container]) .toolbarbutton-icon { display:none; }

That is the wrong location. The chrome folder should be in the main profile folder and not in storage (IndexedDB).

• ~/.mozilla/firefox/mwad0hks.default/chrome/userChrome.css

Thank you, that worked, Firefox looks much better now!

You're welcome.