Custom Icon Set Tutorial for Menu Icons Plus
Menu Icons Plus is an add-on for Firefox which iconifies your menu items. Along with the built-in icon sets that come with it, it enables you to import your own icon set to use. Making the iconsTo create a menu icon set, you must come up with some 16x16 pixel images to represent common actions or commands in Firefox. If you are an artist, you can draw each icon yourself. If not, there are several free icon sets available on the Internet—just do a search and see what you find. Ideally, you will have icons that correspond to at least the following menu items in Firefox:
If you don't have images for a few of the commands, don't worry—your icon set will still work, there just won't be any icon showing for those particular menu items. Putting the icons togetherNow that you've got your menu icon images, there still another step we must take before they're ready to import into Menu Icons Plus. We need to take all of these separate image files and combine them into one single image file. Almost any image editing program can help you do this, such as PhotoShop, Gimp, etc. To begin, open your image editing program and create a new image with a transparent background, 160 pixels wide and 64 pixels tall. (If you're using Gimp, you can download and use this image as a template, instead of creating a new one.) Now, copy each of your 16x16 pixel images and place them adjacent to each other according to the following layout:
Leave a blank 16x16 space for any missing icons.
To show you what your image "grid" should look like, here is an example using the
Silk icon set by Mark James.
(Menu Icons Plus already comes with a complete Silk icon set; it is used here just as a sample.) When you're done arranging the icons in order, save the 160x64 pixel image as a PNG file. Importing the icon set
Finally, we get to import our new menu icon set into Menu Icons Plus.
Start Firefox, select the Tools menu, then Add-ons. In the add-ons list, find Menu Icons Plus and click the Options button.
In the Menu Icons Plus preferences window, click on the "Icon set" panel if it is not already selected.
Now click the Advanced button and choose Import... from the drop-down menu. If you want to create an icon set that includes other menu icons in addition to the general commands listed above, you can specify your own stylesheet to go with your PNG icon set image file on Step 2 of the import wizard. This is recommended only for advanced users who are familiar with CSS and how it is used inside Firefox. To get started learning about this, you'll need to know all about CSS, and especially the selectors. You'll also want to read this page and more importantly this one at MDN. I also recommend you export one of the built-in icon sets from Menu Icons Plus and examine the stylesheet it uses. That's it! If you have any questions about this tutorial or suggestions for improving it, please let me know. Thanks! |