Advertisement

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.

Advertisement


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.

Support us

Winaero greatly relies on your support. You can help the site keep bringing you interesting and useful content and software by using these options:

If you like this article, please share it using the buttons below. It won't take a lot from you, but it will help us grow. Thanks for your support!

Advertisment

Author: Sergey Tkachenko

Sergey Tkachenko is a software developer who started Winaero back in 2011. On this blog, Sergey is writing about everything connected to Microsoft, Windows and popular software. Follow him on Telegram, Twitter, and YouTube.

One thought on “Disable icons in the Mozilla Firefox context menu”

  1. 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);

Leave a Reply

Your email address will not be published.

css.php
Using Telegram? Subscribe to the blog channel!
Hello. Add your message here.