Do you mind trying an add-on for this?

Roomy Bookmarks Toolbar https://addons.mozilla.org/firefox/addon/roomy-bookmarks-toolbar/

I haven't tested it recently, but it lets you modify text and icons separately.

See also:

• [/questions/1000213] Firefox just forced an update on my desktop computer, and now my bookmark icons are so small I can't see them

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

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

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

/* enlarge icons on the Bookmarks Toolbar */
#personal-bookmarks .bookmark-item > .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !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 currently used Firefox profile folder:

• Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

• Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is 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
• Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
  Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

jscher2000 said

Do you mind trying an add-on for this? Roomy Bookmarks Toolbar https://addons.mozilla.org/firefox/addon/roomy-bookmarks-toolbar/ I haven't tested it recently, but it lets you modify text and icons separately.

Thanks for the suggestion. I'm hesitant to install add-ons from unverified authors, but may try it as a last resort.

cor-el said

See also:

• [/questions/1000213] Firefox just forced an update on my desktop computer, and now my bookmark icons are so small I can't see them

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

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

---

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

/* enlarge icons on the Bookmarks Toolbar */
#personal-bookmarks .bookmark-item > .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !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 currently used Firefox profile folder:

• Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

• Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is 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
• Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
  Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

Thanks, but this one is too difficult for me to figure out.  :-(

You can use the Stylish extension to have easier access to the customization files.

• Stylish: https://addons.mozilla.org/firefox/addon/stylish/

• http://userstyles.org/help/stylish_firefox