How do I add Imaged on the Tab ?

  • This is what i have now
    alt text

    This is what i want it to be
    alt text

    Instead of those Text i want to add those Images on the Tab

    Please ignore the Borders since i want a cleaner look .

  • Moderators


    Did you see already this version of addTab?

  • i am unable to understand that if there is any video explaining this it would be helpful. since i am not a Coder i only do Designing and a little bit of Copy paste work

  • Moderators


    How and with what did you create the tabs shown above?

    Probably best is to post a code section.

  • @Smaranil
    if you are designer You do not need to know this.
    And if you want to know how to do this, then you should learn how to do it.

  • @koahnig I used QTabWidegt and used Stylesheet to make it look that way . Still since u asked for the whole code i will give it

    Header Files


    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    #include <QMainWindow>
    #include <QMouseEvent>
    namespace Ui {
    class MainWindow;
    class MainWindow : public QMainWindow
        explicit MainWindow(QWidget *parent = 0);
        Ui::MainWindow *ui;
        void mousePressEvent(QMouseEvent *event);
        void mouseMoveEvent(QMouseEvent *event);
        int m_nMouseClick_X_Coordinate;
        int m_nMouseClick_Y_Coordinate;
    #endif // MAINWINDOW_H


    #include "mainwindow.h"
    #include <QApplication>
    int main(int argc, char *argv[])
        QApplication a(argc, argv);
        MainWindow w;
        return a.exec();


    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    MainWindow::MainWindow(QWidget *parent) :
        ui(new Ui::MainWindow)
        delete ui;
    void MainWindow::mousePressEvent(QMouseEvent *event) {
        m_nMouseClick_X_Coordinate = event->x();
        m_nMouseClick_Y_Coordinate = event->y();
    void MainWindow::mouseMoveEvent(QMouseEvent *event) {

    stylesheet of Qtabwidget

    QTabBar::tab:selected { 
    color: rgb(0, 0, 0);
    background-color:rgb(255, 255, 255);
    QTabBar::tab:!selected {
    color:rgb(0, 0, 0);
    background-color:rgb(223, 223, 223);
    border-bottom-color: #4FA600;
    QTabWidget:pane { /*replace icon text as pane ok....*/
    margin: 1px,1px,1px,1px;
    background-color: rgb(255,255,255);
    QTabBar::tab { 
    height: 130px;
    width: 130px;
    background-color: rgb(255,255,255);
    background-color: rgb(255,255,255);
    font: 75 14pt "Arial Rounded MT Bold";
    QTabWidget::tab-bar { 
    left: 5px; /* move to the right by 5px */
    bottom: -1px;
    background-color: rgb(255,255,255); } 
    QTabWidget::pane { border: 0; }

    [edit:koahnig revised the code tagged sections for easier reading]

  • Moderators


    if you got to this page, there are apparently examples of including icons.

    However, I would not know how you can select and modify a specific tab there using the style-sheet.

    However, you can also source code to set an icon

    you would need something like

    QIcon myIcon ("c:/icons/myIconFile");
    ui->%here is the name of the tab widget%->setTabIcon ( 0, myIcon );

    QIcon contructor tells you about the read options.

  • Qt Champions 2017

    You can assign icons directly in Designer
    alt text

    Note, that if the app should be anything more that a demo, you should use
    a QResource file to hold the images and not be tempted to use "Choose file" and point to image
    on random paths.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.