Custom Styles

You can customize the Interface of Autofill Forms with User CSS.
This includes using another icon set instead of the default Autofill Forms Artwork.

You need to edit a file called userChrome.css. Follow the explanations on the linked article on how to do this.

According to which icons you want to replace you need the following set:

Put these icons in the same folder as the file userChrome.css.

Now inside the file userChrome.css add the following CSS code to override the default Autofill Forms icon Artwork:


/*The toolbar button icon*/
#autofillFormsButton,
.autofillFormsButton {
list-style-image: url('pencil.png') !important;
}
/*The small toolbar button icon*/
toolbariconsize="small" #autofillFormsButton,
toolbariconsize="small" .autofillFormsButton,
.autofillFormsIcon {
list-style-image: url('pencil-small.png') !important;
}
/*The profile switcher menuitem icon*/
.autofillFormsProfileIcon {
list-style-image: url("profile-small.png") !important;
}
/*The settings menuitem icon*/
.autofillFormsSettingsIcon {
list-style-image: url("settings-small.png") !important;
}
/*The help menuitem icon*/
.autofillFormsHelpIcon {
list-style-image: url("help-small.png") !important;
}


/*The disabled toolbar button icon for the default Mac theme*/
toolbariconsize="small" #autofillFormsButton,
toolbariconsize="small" .autofillFormsButton,
#autofillFormsButton,
.autofillFormsButton {
list-style-image: url('pencil-mac.png') !important;
}

/*The disabled active toolbar button icon for the default Mac theme*/
toolbariconsize="small" #autofillFormsButton:hover:active,
toolbariconsize="small" .autofillFormsButton:hover:active,
#autofillFormsButton:hover:active,
.autofillFormsButton:hover:active {
list-style-image: url('pencil-active-mac.png') !important;
}

Remove the CSS declarations for the icons you don't want to replace.