Assigning custom icons to Firefox toolbar bookmarks
I'm running the latest version of Firefox on Xubuntu 20.04.
Thanks to some help from others long ago, I've been assigning custom icons to my toolbar bookmarks for quite some time. This is done in the appropriate profile directory (~/.mozilla/firefox/<profile>/chrome) by placing a 16x16 pixel PNG icon in an icons sub-directory, and then creating entries in the userChrome.css file. Here is an example:
.bookmark-item[label="Google"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/google_01.png") !important;
}
.bookmark-item > .toolbarbutton-text { display: none !important; }
The first entry assigns my custom icon "google_01.png" to a bookmark with the text label "Google". The second entry makes sure that the text labels are not displayed on the toolbar.
This works great for bookmarks on the toolbar. I decided to create various folders and consolidate groups of bookmarks. I created a google folder with the label "Google" and it gets the custom icon I have assigned. However, the various bookmarks placed within the folder (Maps, Gmail, Calendar, Contacts, Drive, Groups, Search), each with unique userChrome.css entries of their own, and which displayed as desired when on the toolbar, often lose their custom icon when placed in the folder, getting the icon assigned to the folder itself repeated for these entries -- but not always! For example, given:
.bookmark-item[label="Maps"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/maps_01.png") !important;
}
.bookmark-item[label="Gmail"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/gmail_01.png") !important;
}
.bookmark-item[label="Contacts"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/contacts_01.png") !important;
}
.bookmark-item[label="Drive"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/drive_01.png") !important;
}
.bookmark-item[label="Groups"] image {
margin: 0px !important;
padding: 0 0 16px 16px !important;
background:url("icons/groups_01.png") !important;
}
The Maps and Groups bookmarks get the desired icon displayed, but the remainder just get the google_01.png icon assigned to the folder. This kind of random working/not working repeats for every other folder I create.
So I'm wondering if anyone has a clue as to what's going on and how I might better rewrite the bookmark-item entries to get the icons to reliable display when located in toolbar folders.
Thanks.
All Replies (1)
WARNING from the moderator team: userChrome.css scripts are not provided by Mozilla and are not officially supported. Firefox is a work in progress and, to allow for continuous innovation, Mozilla cannot guarantee future updates won’t impact your customizations. For this reason, Mozilla does not officially support style rules customization.
Please read Firefox Advanced Customization and Configuration Options to learn more.