主页 / computer / 问题 / 1850492
Accepted
doej1367
Asked: 2024-07-28 17:47:11 +0800 CST

如何向 Firefox 上下文菜单添加图标？

  • 772

“书签上下文菜单”左侧有足够的空间放置符号。我希望有一个剪刀图标用于剪切功能，一个双页图标用于复制功能，一个垃圾图标用于删除功能等等。是否有插件或 CSS 代码片段可以将这些图标放在那里？

右击书签工具栏中的文件夹时出现的 Firefox 上下文菜单图片。每个选项左侧都有一个空间，可以容纳一个图标，但这里没有

感谢@MC10，以下是我现在使用下载的图片，以便它在离线环境中也能工作。


    #placesContext_sortBy\:name::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/sort.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_show_folder\:info::before,
    #placesContext_show_bookmark\:info::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/edit.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_deleteFolder::before,
    #placesContext_deleteBookmark::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/delete.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_deleteFolder,
    #placesContext_deleteBookmark {
        font-weight:700 !important;
        color:#d70022 !important; 
    }

    #placesContext_cut::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/cut.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_copy::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/copy.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_paste_group::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/paste.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_new\:bookmark::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/plus.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    #placesContext_new\:folder::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/folder-add.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
    
    #placesContext_new\:separator::before {
        content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/subtract.svg');
        width: 16px;
        padding-right: 1em;
        filter: invert(1);
    }
firefox

1 个回答

  1. Best Answer

    您可以通过其 ID 来定位特定的书签上下文菜单条目。将其添加到您的userChrome.css中。

    #placesContext_show_bookmark\:info::before {
    content: url('https://studio-assets.supernova.io/design-systems/18795/1d87c42a-ed73-4853-a63f-66790a98092c.svg');
    width: 16px;
    filter: invert(1);
}

#placesContext_deleteBookmark::before {
    content: url('https://studio-assets.supernova.io/design-systems/18795/55b7a498-6916-4cd2-933e-c65358fb25f9.svg');
    width: 16px;
    filter: invert(1);
}

#placesContext_cut::before {
    content: url('https://raw.githubusercontent.com/Aris-t2/CustomCSSforFx/master/current/image/icons_fx88/edit_cut.svg');
    width: 16px;
    filter: invert(1);
}

#placesContext_copy::before {
    content: url('https://studio-assets.supernova.io/design-systems/18795/5606b820-8564-4f25-b496-232b38c2a518.svg');
    width: 16px;
    filter: invert(1);
}

#placesContext_paste_group::before {
    content: url('https://studio-assets.supernova.io/design-systems/18795/8bf13abb-e206-4717-bf33-5169f7e388d0.svg');
    width: 16px;
    filter: invert(1);
}

    由于图标是黑色的，难以看清，所以我反转了颜色。如果您不使用暗色模式或喜欢黑色图标，只需删除该filter属性即可。

    不幸的是，它们没有cut图标，所以我找到了替代方案。

    • 2

相关问题