Qt QPushbutton Icon above Text

Question

When I create a QPushButton with an Icon it by default displays the text to the right of the icon. Is there a way to have the text display underneath the icon?

Answer 1

QPushButton {
    padding: -25px 0 10px 0;
    border: 1px solid black;
    border-radius: 2px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-origin: content;
    background-image: url(":/new/resource/accept.png");
 }
QPushButton:disabled {
    background-image: url(":/new/resource/accept_b.png");
 }

Answer 2

If you're able to, the easiest thing to do is use a QToolButton instead:

QToolButton* button = new QToolButton(this);
button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
button->setIcon(myIcon);
button->setText("Sample text");

---

If that's not an option you could consider creating your own button widget, possibly derived from QPushButton or QAbstractButton. In this case you'll probably (I haven't tried it myself) want to focus most of your efforts on reimplementing paintEvent().

[Edit: read the comments for alternatives which are probably way simpler than this]

Answer 3

This is not possible with QPushButton. In QPushButton, the only placement options (LayoutDirection) are LeftToRight, RightToLeft and Auto. But you can use QToolButton instead.

Use Qt Creator, switch to Design pane, add a QToolButton and in the right side bottom pane, you will see an option 'textFormat', in that select ToolButtonTextUnderIcon.

Update: The textFormat option has been changed to toolButtonStyle in recent versions of Qt Creator (4.7.0).