Home > Software design >  Setting an icon's size on a QPushButton through Stylesheets
Setting an icon's size on a QPushButton through Stylesheets

Time:09-27

I'm trying to set an icon's size on a QPushButton through Stylesheets. I am unable to locate the proper syntax from the Qt documentation that would allow me to modify the icon's size when I implement the icon image from the stylesheet. This application is for use on the icon of a QPushButton on multiple uis and the Stylesheet settings will be set on a parent ui.

This is my code, based on this suggestion. Adjusting the size to 64 or 256 did not change the size of the object.

"QPushButton#pushButton_Calibration {image: url(:/images/toolkit.png); qproperty-iconSize: 128px;}"

This is my other code, based on this other suggestion. Adjusting the width/height to 64 or 256 did not change the size of the object.

"QPushButton#pushButton_Calibration {image: url(:/images/toolkit.png); width: 128px; height: 128px;}"

I am aware that something like this is an option:

ui->pushButton_Calibration->setIconSize(QSize(128, 128));

But I am unsure on how to implement this to something with the format QPushButton#pushButton_Calibration or how to use this to implement it globally to the children of my ui element since this syntax directly points to only the element on the particular ui file (at least, this is my understanding).

Please let me know if more information is required to solve this issue. I am unfamiliar with the syntax needed to change the size of the icon and haven't been able to locate it from the documentation.

CodePudding user response:

If you want to set an icon, you should use the icon property, instead of the image property, like this.

QPushButton#pushButton_Calibration {
    icon: url(:/images/toolkit.png);
    qproperty-iconSize: 128px;
}

And the official documentaion is here.

Also be careful on the scaling of the image. It will not scale up for both 'image' and 'icon' properties.

CodePudding user response:

I would recommend to use QPushButton::setIcon() and QPushButton::setIconSize() member functions instead of working with stylesheets.

One rationale behind this is that once you deal with stylesheets, the system style for the given widget may be completely messed up and you may need to restyle the whole widget even if you only wanted to change a specific part or behaviour.

Per the Qt documentation, you can read the following note regarding the icon property:

"Note: It's the application's responsibility to assign an icon to a button (using the QAbstractButton API), and not the style's. So be careful setting it unless your stylesheet is targeting a specific application."

If you want the change to be applied for all buttons of your application, you can create your own button class that inherits QPushButton and sets the properties you want in the constructor.


Example:

.hpp

class MyButton : public QPushButton
{
    Q_OBJECT

    public:
        MyButton(const QIcon &icon, const QString &text, QWidget *parent = nullptr);
        MyButton(const QString &text, QWidget *parent = nullptr);
        MyButton(QWidget *parent = nullptr);
};

.cpp

MyButton::MyButton(const QIcon &icon, const QString &text, QWidget *parent) : QPushButton(icon, text, parent)
{
    setIconSize({128, 128});
}
MyButton::MyButton(const QString &text, QWidget *parent) : QPushButton(text, parent)
{
    setIconSize({128, 128});
}
MyButton::MyButton(QWidget *parent) : QPushButton(parent)
{
    setIconSize({128, 128});
}

Of course, you can adapt it to your use case (maybe you want to set the icon inside the constructor as well, etc...)

  • Related