如何设置橙色 Firefox 按钮上显示的图标大小？

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;
 }

这是用户样式代码的一部分，用于在橙色 Firefox 按钮上显示一个图标（一个小 Firefox）和一个名为 FlipClock 的插件。

我想用另一个图像替换chrome://branding/content/icon16.png（小火狐）。但是，我申请的图像太大了。

• 完整时尚代码：tny.cz/44499fac

• 原来的橙色 Firefox 按钮：
  

• 应用用户样式后：
  

• The image I want to use (Click for proper image):
  

• 这是我的尝试的样子：
  

如何设置它的大小？
谢谢！

Answer 1

似乎没有办法使用 CSS 缩放 list-style-image。
参考：

• CSS spec for list-style-image
• "CSS list-style-image size"

因此，您唯一的办法是调整图像大小 - 您可以使用许多图像编辑器之一来完成。有关如何做到这一点并保持透明度的信息，请在 superuser.com 和/或 webapps 上搜索和/或询问。

但是，我冒昧地为您缩小了该图像。在这里，大小为 32x32 和 16x16，保留了透明度。
请注意，缩小大图像并不总是一个好的图标。 ;)

16x16:

32x32:

（以灰色背景显示以表明保留了透明度。）

Answer 2

使用 Photoshop 或其他软件重新调整图像大小，并制作 alpha 分层的 16x16 PNG 图像