Disable icons in the Mozilla Firefox context menu

Modern versions of the Firefox browser have icons in the context menu for back and forward navigation commands, reload/stop command and for the "bookmark" item. Many users do not like the fact that the context menu has icons, not text labels. Besides the design, they break the user interface flow, as they are aligned horizonally while the rest of the menu items are ordered vertically. In this article, we will see how you can revert to the fully textual context menu of the Firefox browser and remove the icons.


This can be done using a trick with a special userContent.css file which Firefox supports for customization of its user interface. We already used it to remove the search box from the new tab page in Firefox. Here are the step-by-step instructions to disable context menu icons.

  • Open Firefox and press the ALT key on the keyboard.
  • The main menu will show. Go to Help ->Troubleshooting Information:
    troubleshooting info
  • Under the "Application Basics" section, click the "Show Folder" button to open your profile folder:
    show folder button
  • Create a new folder here called "Chrome" as shown below:
    the chrome folder
  • Open the folder you just created and create a file here called userChrome.css. You can create it with Notepad. Open Notepad and paste the following text:
    #context-back image,
    #context-forward image,
    #context-reload image,
    #context-stop image,
    #context-bookmarkpage image{
       display:none !important;
    }
    
    #context-back:before,
    #context-forward:before,
    #context-reload:before,
    #context-stop:before,
    #context-bookmarkpage:before{
       content: attr(aria-label) !important;
      -moz-margin-start:32px !important;
    }
    #context-navigation{
       -moz-box-orient: vertical !important;
    }
    #context-navigation > .menuitem-iconic {
      -moz-box-pack: start !important;
    }

    Now select File -> Save menu item and type "userChrome.css" with quotes in the file name box and save it in the folder you created above. userChrome_css

  • Now restart your Firefox browser and open the new tab page. Check out the context menu.

Before:

firefox context menu icons enabled

After:

firefox context menu icons disabled

That's it. You just got rid of the icons in the Firefox context menu. To restore them, delete the userChrome.css file and restart the browser.

1 thought on “Disable icons in the Mozilla Firefox context menu

  1. Quisperny G’Dunzoid Sr.

    I found this on mozillazine few months ago. I been using it through Stylish though.
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *