How to set the QToolButton's icons using style sheet?

Question

I would like to set a QToolButton's icons using style sheets, like this :

#include <QToolButton>
#include <QApplication>

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle( "QToolButton:enabled { image: url(" + name + "_normal.png); }  "
                             "QToolButton:pressed { image: url(" + name + "_pressed.png); }  "
                             "QToolButton:disabled { image: url(" + name + "_disabled.png); }  "
                           );

  return thisItemStyle;
}

int main(int argc, char * argv[])
{
    QApplication qapp(argc,argv);

    QToolButton button;
    button.setStyleSheet( FormStyleSheetString( "button" ) );
    button.setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button.setIconSize(QSize(200,200));
    button.setText("some thing..." );
    button.show();

    return qapp.exec();
}

I compiled it like this :

g++ -O3 -std=c++0x -Wall -Wextra -pedantic test.cpp -lQtCore -lQtGui -I/usr/include/Qt/ -I/usr/include/QtCore/ -I/usr/include/QtGui/

Unfortunately, the above doesn't work (the icon is not shown).

If I use setIcon, then the icon is shown properly.

So, what am I doing wrong? How to set the button's icon using style sheet?

The images I used are :

PS Take a note that I asked similar question here, but the answer doesn't work once the text is set (the icon is all squished, and the text is not below the icon).

EDIT 1: I also tried this function (as Kamil Klimek suggested) :

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle( "QToolButton { qproperty-icon: url(" + name + "_normal.png); };  "
                               "QToolButton:pressed { qproperty-icon: url(" + name + "_pressed.png); };  "
                               "QToolButton:hover { qproperty-icon: url(" + name + "_disabled.png); };  "
                               );

  return thisItemStyle;
}

but it also didn't work. Pressing the button, or hovering, doesn't change the icon.

@KamilKlimek I tried that, but it didn't work. It would set the normal image, but not pressed and hover. I think it is because of this bug : https://bugreports.qt.nokia.com/browse/QTBUG-2982?page=com.atlassian.streams.streams-jira-plugin:activity-stream-issue-tab — BЈовић, Dec 05 '11 at 15:29
then you have to set it as image or background !BUT! you will have to adjust size with CSS. — Kamil Klimek, Dec 08 '11 at 08:39
@KamilKlimek If I set it as background, then the text is centred. Setting it as an image doesn't work (the image is not shown). — BЈовић, Dec 08 '11 at 08:45
@milyaaf I tried, but it didn't work. It looks like the style sheets implementation in QT is still not mature enough. A workaround is to set the sizes. — BЈовић, Feb 24 '12 at 12:45

score 8 · Accepted Answer · answered Feb 24 '12 at 07:39

Later that day I managed to somehow solve the problem, but forgot to post the solution :

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle(
  "QToolButton {\n"
                "   border: none;\n"
                "   background: url(" + name + "_normal.png) top center no-repeat;\n"
                "   padding-top: 200px;\n"
                "   width: 200px;\n"
                "   font: bold 14px;\n"
                "   color: red;\n"
                "}\n"
                "QToolButton:hover {\n"
                "   background: url("+name+"_hover.png) top center no-repeat;\n"
                "   color: blue;\n"
                "}\n"
                "QToolButton:pressed {\n"
                "   background: url("+name+"_pressed.png) top center no-repeat;\n"
                "   color: gray;\n}" );

  return thisItemStyle;
}

It wasn't enough just to set the background. It also needed the size fixed.

How to set the QToolButton's icons using style sheet?

1 Answers1

Linked