How to Add an Image Icon to a Menu Item in a Qt Widget Application in C++


C++


In this article, we show how to add an image icon to a menu item in a Qt widget application in C++.

So when we are dealing with menus in the Qt software, we are dealing with main windows.

The QMainWindow class creates a program that features a main window. In this main window, you can put things that are typical of programs. For example, when you click on NotePad or Wordpad or Microsoft Word, what comes up after you click is a window. It's a window that features a main such as File, Edit, View, Help, etc. as well as a text area to be able to type in things.

So when we're working with a QMainWindow class, we're working with a main window similar to what you find in programs such as NotePad, WordPad, Microsoft Word, etc.

Notice that sometimes when you use these programs, you may find icons next to certain actions or functions, such as a clipboard next to Paste, or a scissors next to Cut, or two papers next to Copy.

These is what we can add to a menu in a Qt widget application in C++ to give a program more visual feel.

The outcome of this program produces the following shown below.

Menu items with icons in a Qt widget in C++

You can see the menu items with icons next to them.

So how can we place these icons into menu items in a window?

There's a number of steps that must be done.

So the first thing you must do is create a QMainWindow base class. This is shown below.

QMainWindow qt widget in c++

Once this is created, we have a main window application.

Within this program, you now want to go to the Design tab and add a Text Edit element to the window and then click on the menu bar, where you can then add different tabs where you can add menu items to each tab.

Add a File tab and then add an Edit tab. Within the Edit tab, add the menu items, Copy, Paste, and Cut.

When you add these element, near the bottom of the page, you will see the menu items.

This is shown below.

Menu items in a Qt widget in C++

We will return back to this in a moment.

Next what we need to do is create a Qt Resource file (.qrc).

This file allows us to access resources such as images that represent icons, which we can use in menu items.

You can call this file resource.qrc

When you create this file, you can add your own custom prefix. This is I left as simple /. No prefix is needed. For images selected, the path will be /images/.

Now go to the folder in which this .qrc file exists. You can do this by right clicking any file within the project folder and in Windows, selecting 'Show in Explorer'.

Within this folder, the same folder which contains 'resource.qrc', create a new folder named images.

Within this folder, place in all the icon images.

If you want to use the same icons which I do, you can download them at the following links: copy icon, paste icon, and the cut icon.

Now that you place all of these image files within the images folder of the project directory, we now need to add these files to the list of resource files.

You can do this by right-clicking the resource.qrc file and clicking 'Add Existing Files...'

Go then to the images directory and select all the images within the directory and click 'Open'

These files are now part of the Resource files of our application.

The last thing we need to do now to add these image icon files to a menu item is to go back to the Design tab and click on each of the menu items at the bottom of the page.

This is shown below.

Adding an image icon to a menu item in a Qt widget in C++

You click the menu item and Click on 'Choose a Resource' for the menu item. You then click on the image for the icon you want shown for the menu item. This is done for each of the items.

When you run the program, you should now see all the icons for each menu item.

And this is how to add an image icon to a menu item in a Qt widget in C++.


Related Resources

How to Write to a File in C++

HTML Comment Box is loading comments...