Qt – How to change QPushButton icon/text spacing with stylesheets

qtqtstylesheetsuser interface

I'm fairly new to Qt's method of stylesheets and I am looking to adjust the spacing between the icon and text on a QPushButton.

This is the gap I'm referring to: http://imageshack.us/scaled/thumb/593/4kem.png (stackoverflow won't let me post pics yet)

QPushButton {
   qproperty-icon: theme_url("/button_action/add");
   qproperty-iconSize: 14px; 
}

Is there a parameter I can use to adjust this space? I've tried margin, padding, spacing? Perhaps there is a different selector that I can use to just grab the icon?

Best Answer

Actually with QPushButton you are out of luck. You can find a complete list of working options for styling push buttons in the qt documentation ( I am assuming you use qt5, but it is available for other versions as well).

What is often recommended if you want more control over the icon is to exchange your QPushButtons with QToolButtons wich are exactly the same except that they have extra features to make them compatible with toolbars -and- they have more options for icon placement. But this might not work for you because as you can see they are styled the exact same way as QPushButtons. But do look into the "toolButtonStyle" parameter which allows you to move the icon around.

Next on the list comes changing the artwork. If all you want is more space then just add the extra empty pixels to the artwork. This really hurts the perfectionist's mind but is effective.

Next on the list comes subclassing QPushButton and overriding the paint yourself. Sounds more daunting than it is. Subclassing in Qt has become a habit already and it works great. Here is a tutorial i googled in a jiffie (for 4.8 but should be about the same for 5) on the matter of subclassing. It even covers overriding the paint event.

Hope this was helpful.

Related Solutions

Qt QPushbutton Icon above Text

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]

C++ – How to change QPushButton icon using stylesheets in Qt app

A little late for a reply, but in case anyone else pops on this via google;

You can add the icon by changing the QAbstractButton-property. Simply use:

QAbstractButton {
     qproperty-icon: theme_url("/button_action/add");
}

The type-selector (QAbstractButton), enables you to set the style for the selected object and all its subclasses. Since QProcessButton extends the QAbstractButton, this will do the trick. (Of course you could also use the QPushButton type-selector here).

For more information on how to use selectors, I found this quite helpful.

If you want to learn more about the button-properties, refer to the QT-Documentation here.

PS. In case you want to change the icon, once the button is clicked, use

qproperty-icon: url(":/Icons/before_click.png") off,
                url(":/Icons/after_click.png") on ;

Best Answer

Related Solutions

Qt QPushbutton Icon above Text

C++ – How to change QPushButton icon using stylesheets in Qt app

Related Topic