How to set icon size displayed at the orange Firefox button?

Question

  #main-window #appmenu-button{
    background:transparent !important;  
    background-color:transparent !important;
    box-shadow: rgb(252,252,252) -0.5px -0.5px 0.5px !important;
            border: 1px solid rgba(245,245,245,0.899) !important;
            border-radius: 0.25em !important;
    outline: 1px solid rgba(222,225,225,0.799) !important;
            -moz-outline-radius: 0.3em !important;
            outline-offset: -1px !important;
    list-style-image:url("chrome://branding/content/icon16.png") !important;
    min-width:78px !important;
    padding-right:56px !important;
    margin-right:-56px !important;
    padding-left:0px !important;
    margin-left:0px !important;
 }

This is a part of a userstyle's code which use to display an icon(a little Firefox) and an add-on called FlipClock at the orange Firefox button.

I want to replace the chrome://branding/content/icon16.png (the little Firefox) with another image. But, the image I applied to is too large.

The full stylish code: tny.cz/44499fac
The original orange Firefox button:
After the userstyle is applied:
The image I want to use (Click for proper image):
This is what my attempts look like:

How do I set the size of it?
Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 12:17

There doesn't seem to be a way to scale a list-style-image with CSS.
Reference:

So, your only recourse is to resize the image -- which you can do with one of many image editors. For information on how to do that and retain the transparency, search and/or ask on superuser.com and/or webapps.

However, I took the liberty of shrinking that image for you. Here it is, sized 32x32 and 16x16, with the transparency preserved.
Note that reducing large images down, does not always make a good icon. ;)

16x16:

32x32:

(Shown with gray background to demonstrate that transparency is preserved.)

score 0 · Answer 2 · answered Sep 08 '12 at 16:01

0

Use photoshop or some other software to re-size your image, and make a alpha layered 16x16 PNG image

answered Sep 08 '12 at 16:01

Alfred

21,058
61
167
249

I had tried this method.But after I resized it,it's background changed to no transparent. – wenLiangcan Sep 08 '12 at 16:43
attach both images to your images to your question. The original ff logo and the logo u created – Alfred Sep 08 '12 at 16:45
sorry,I have not enough reputation to post images :-( – wenLiangcan Sep 08 '12 at 16:51
you may either upload image when asking question (check toolbar) or upload image to ingur.com and post the link – Alfred Sep 08 '12 at 17:11

How to set icon size displayed at the orange Firefox button?

2 Answers2