How to create a QPushButton with the text displayed over the icon?

Question

I am trying to create a QPushButton in my project such that the text shows on top of the custom button image or icon. I tried the below methods:

imagePath = path;
QPixmap pixmap(imagePath);
QIcon ButtonIcon(pixmap);
button->setIcon(ButtonIcon);
button->setIconSize(pixmap.rect().size());
button->setGeometry(0,0,height,width);
button->setStyleSheet(
    "background-color: gray;"
    "border: 1px solid black;"
    "border-radius: "+QString::number(radius)+"px;"
    "color: lightGray; "
    "font-size: 25px;"
    );

When I try to use the setText here, it shows the icon first and text on its right. I want the text to appear on top of the icon.

I also tried the below method I found online:

imagePath = path;
button->setGeometry(0,0,height,width);
button->setStyleSheet("background-image: url(:/images/images/2adjacentTracksButton.png));"
                      "background-position: center center");

This one is not accepting my url path, hence is not displaying the image I need on the button.

How can I solve this?

You have extra ')' after '2adjacentTracksButton.png' in your QSS expression. — hank, Apr 22 '16 at 07:08

IAmInPLS · Answer 1 · 2016-10-31T15:12:29.937

When it comes to manipulate button, you may want to do your own class, which will implement QAbstractButton. Something like this:

class MyButton : public QAbstractButton
{
    Q_OBJECT

public:
    static MyButton* createButton(QIcon icon, QWidget *parent);
    ~MyButton();

    void setText(QString);
    void setIcon(eIcon);
    void setOrientation(Qt::Orientation);

protected : 
    MyButton(QWidget *parent);

    // here, you can reimplement event like mousePressEvent or paintEvent

private :
    QBoxLayout*  m_ButtonLayout;
    QLabel*      m_IconLabel;
    QIcon        m_Icon;
    QLabel*      m_TextLabel;
}

In the .cpp :

MyButton::MyButton(QWidget *parent)
    : QAbstractButton(parent)
{    
    m_ButtonLayout = new QBoxLayout(QBoxLayout::LeftToRight, this);
    m_ButtonLayout->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->setContentsMargins(0, 0, 0, 0);
    m_ButtonLayout->setSpacing(1);

    m_IconLabel = new QLabel(this);
    m_IconLabel->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->addWidget(m_IconLabel);

    m_TextLabel = new QLabel(this);
    m_TextLabel->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->addWidget(m_TextLabel);
    //m_TextLabel->hide();
}

MyButton* MyButton::createButton(QIcon icon, QWidget *parent)
{
    MyButton* pButton = new MyButton(parent);
    pButton->setIcon(icon);

    return pButton;
}

void MyButton::setText(QString text)
{
    m_TextLabel->setVisible(!text.isEmpty());
    m_TextLabel->setText(text);
    QAbstractButton::setText(text);
}

void MyButton::setIcon(QIcon icon)
{
    m_Icon = icon;
    m_IconLabel->setVisible(true);
}

void MyButton::setOrientation(Qt::Orientation orientation)
{
    if (orientation == Qt::Horizontal)
        m_ButtonLayout->setDirection(QBoxLayout::LeftToRight);
    else
        m_ButtonLayout->setDirection(QBoxLayout::TopToBottom);
}

And now you can create your button with your icon by calling the static method:

MyButton* button = MyButton::createButton(myButtonIcon, this);

It is just a basic example I gave you, and I am not sure it will work (this is a thing I did some time ago) but you can give it a shot. Hope that helps !

How to create a QPushButton with the text displayed over the icon?

1 Answers1