Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to change QPushButton icon color
QtWS25 Last Chance

How to change QPushButton icon color

Scheduled Pinned Locked Moved Solved General and Desktop
qpushbuttonqiconqstylesheetcolor
13 Posts 2 Posters 39.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • OlivierDuguayO OlivierDuguay

    Hi everyone,

    I just wonder if there's a way to change the color of a QPushButton icon via it stylesheet...

    The only thing I found is the color: or the background-color: which change the color of the QPushButton (or the text) and not the icon. I think I might have missed an argument that can be set...

    Additionnal information:
    Qt Creator 4.2.1.
    I'm using Qt 5.7 with MSVC2015_64bits.
    Icons used come from the FontAwesome 'library'.

    Thanks for your help!
    Olivier

    mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by
    #2

    @OlivierDuguay
    Hi
    Nope a style sheet cannot change the binary icon.

    You can however use a transparent PNG and change the color of the button and have
    a similar effect.

    Alternatively, you can in code change the Icon and set the changed icon back to button.
    Using a transparent PNG and simply draw on top of a filled pixmap would also do.

    1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #3

      Wait
      Is the icon really a font ?
      http://fontawesome.io/icons/
      Or what format do you have them in ?

      1 Reply Last reply
      0
      • OlivierDuguayO Offline
        OlivierDuguayO Offline
        OlivierDuguay
        wrote on last edited by
        #4

        This is the way I set my icon :

        ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat));

        with getAwesome() as an instance of the library (QtAwesome*)

        so no, the icon isn't a font, it's really a QIcon since the ->icon(int) return this type...

        So I guess I'll have to use your method with a transparent PNG. But I find it weird that I downloaded a resources file (.qss) to change 'theme' of my app. with bunch of stylesheet set in it, and it seem to change the color of my icon but can't see which configuration make this change possible.

        Olivier Duguay

        mrjjM 1 Reply Last reply
        0
        • OlivierDuguayO OlivierDuguay

          This is the way I set my icon :

          ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat));

          with getAwesome() as an instance of the library (QtAwesome*)

          so no, the icon isn't a font, it's really a QIcon since the ->icon(int) return this type...

          So I guess I'll have to use your method with a transparent PNG. But I find it weird that I downloaded a resources file (.qss) to change 'theme' of my app. with bunch of stylesheet set in it, and it seem to change the color of my icon but can't see which configuration make this change possible.

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by mrjj
          #5

          @OlivierDuguay
          Maybe getAwesome()->icon(fa::repeat) does the magic.
          I think its a font but icon() creates an icon by painting it on an icon.
          In that process, its easy to change color under as its 100% the same
          as the transparent png concept.
          I would have a look on how it generate the icon to see :)

          Update:
          Seems you are using
          QIcon icon( int character, const QVariantMap& options = QVariantMap() );

          There is also
          QIcon icon(QtAwesomeIconPainter* painter, const QVariantMap& optionMap = QVariantMap() );

          So i wonder if you can change the options and it include bg color.

          1 Reply Last reply
          1
          • OlivierDuguayO Offline
            OlivierDuguayO Offline
            OlivierDuguay
            wrote on last edited by
            #6

            Cool, thanks @mrjj !

            If you want, here's a link to a GIF image where you can see what's happening with my QPushButton : http://imgur.com/a/H5P3P

            First, the icon is lightblue, then when I click on it, the icon change to black, and when it loose focus, it is lightblue again... So annoying...

            Olivier Duguay

            mrjjM 1 Reply Last reply
            0
            • OlivierDuguayO OlivierDuguay

              Cool, thanks @mrjj !

              If you want, here's a link to a GIF image where you can see what's happening with my QPushButton : http://imgur.com/a/H5P3P

              First, the icon is lightblue, then when I click on it, the icon change to black, and when it loose focus, it is lightblue again... So annoying...

              mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #7

              @OlivierDuguay

              • First, the icon is lightblue, then when I click on it, the icon change to black, and when it loose focus, it is lightblue again... So annoying...

              Is that the normal roles for icons. Active, Focus etc ?
              If you look at Icon properties, there are more than one to assign.

              mrjjM 1 Reply Last reply
              0
              • mrjjM mrjj

                @OlivierDuguay

                • First, the icon is lightblue, then when I click on it, the icon change to black, and when it loose focus, it is lightblue again... So annoying...

                Is that the normal roles for icons. Active, Focus etc ?
                If you look at Icon properties, there are more than one to assign.

                mrjjM Offline
                mrjjM Offline
                mrjj
                Lifetime Qt Champion
                wrote on last edited by mrjj
                #8

                Hi
                When you select the icon, u are using the default options

                
                  // initialize the default options
                    setDefaultOption( "color", QColor(50,50,50) );
                    setDefaultOption( "color-disabled", QColor(70,70,70,60));
                    setDefaultOption( "color-active", QColor(10,10,10));
                    setDefaultOption( "color-selected", QColor(10,10,10));
                    setDefaultOption( "scale-factor", 0.9 );
                
                    setDefaultOption( "text", QVariant() );
                    setDefaultOption( "text-disabled", QVariant() );
                    setDefaultOption( "text-active", QVariant() );
                    setDefaultOption( "text-selected", QVariant() );
                
                

                I think there is alot of tweaking possible with those options.
                Disclaimer. I never seen this before. Just digging in code :)

                1 Reply Last reply
                0
                • OlivierDuguayO Offline
                  OlivierDuguayO Offline
                  OlivierDuguay
                  wrote on last edited by OlivierDuguay
                  #9

                  Yes, but I would like to have it always black...

                  ANd this is the only thing that are set in the resource file :

                  QPushButton
                  {
                  color: silver;
                  background-color: #302F2F;
                  border-width: 1px;
                  border-color: #4A4949;
                  border-style: solid;
                  padding-top: 5px;
                  padding-bottom: 5px;
                  padding-left: 5px;
                  padding-right: 5px;
                  border-radius: 2px;
                  outline: none;
                  }

                  QPushButton:disabled
                  {
                  background-color: #302F2F;
                  border-width: 1px;
                  border-color: #3A3939;
                  border-style: solid;
                  padding-top: 5px;
                  padding-bottom: 5px;
                  padding-left: 10px;
                  padding-right: 10px;
                  /border-radius: 2px;/
                  color: #454545;
                  }

                  QPushButton:focus {
                  border-width: 1px;
                  border-color: #3d8ec9;
                  border-style: solid;
                  }

                  Nothing here specify that the icon need to change it color...

                  EDIT :
                  #3d8ec9; is the lightblue color, but it is only for the border...

                  EDIT #2:
                  There's also the stylesheet for the QWdiget (since QPushButton inherits from it) :

                  QWidget
                  {
                  color: silver;
                  background-color: #302F2F;
                  selection-background-color: #3d8ec9;
                  selection-color: black;
                  background-clip: border;
                  border-image: none;
                  outline: 0;
                  }

                  QWidget::item:hover
                  {
                  background-color: #78879b;
                  color: black;
                  }

                  QWidget::item:selected
                  {
                  background-color: #3d8ec9;
                  }

                  Olivier Duguay

                  mrjjM 1 Reply Last reply
                  0
                  • OlivierDuguayO OlivierDuguay

                    Yes, but I would like to have it always black...

                    ANd this is the only thing that are set in the resource file :

                    QPushButton
                    {
                    color: silver;
                    background-color: #302F2F;
                    border-width: 1px;
                    border-color: #4A4949;
                    border-style: solid;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    padding-left: 5px;
                    padding-right: 5px;
                    border-radius: 2px;
                    outline: none;
                    }

                    QPushButton:disabled
                    {
                    background-color: #302F2F;
                    border-width: 1px;
                    border-color: #3A3939;
                    border-style: solid;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    padding-left: 10px;
                    padding-right: 10px;
                    /border-radius: 2px;/
                    color: #454545;
                    }

                    QPushButton:focus {
                    border-width: 1px;
                    border-color: #3d8ec9;
                    border-style: solid;
                    }

                    Nothing here specify that the icon need to change it color...

                    EDIT :
                    #3d8ec9; is the lightblue color, but it is only for the border...

                    EDIT #2:
                    There's also the stylesheet for the QWdiget (since QPushButton inherits from it) :

                    QWidget
                    {
                    color: silver;
                    background-color: #302F2F;
                    selection-background-color: #3d8ec9;
                    selection-color: black;
                    background-clip: border;
                    border-image: none;
                    outline: 0;
                    }

                    QWidget::item:hover
                    {
                    background-color: #78879b;
                    color: black;
                    }

                    QWidget::item:selected
                    {
                    background-color: #3d8ec9;
                    }

                    mrjjM Offline
                    mrjjM Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on last edited by mrjj
                    #10

                    @OlivierDuguay
                    Ok, the call
                    ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat));
                    can also take these options.

                    I agree that the stylesheet seems not to anything with the icons.
                    In what state is it not black as you want?

                    Maybe its just how it auto generate the ison for the other roles.
                    alt text

                    alt text

                    mrjjM 1 Reply Last reply
                    2
                    • mrjjM mrjj

                      @OlivierDuguay
                      Ok, the call
                      ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat));
                      can also take these options.

                      I agree that the stylesheet seems not to anything with the icons.
                      In what state is it not black as you want?

                      Maybe its just how it auto generate the ison for the other roles.
                      alt text

                      alt text

                      mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by
                      #11

                      Hi
                      Did you see any docs on what the options can be ?

                      1 Reply Last reply
                      0
                      • OlivierDuguayO Offline
                        OlivierDuguayO Offline
                        OlivierDuguay
                        wrote on last edited by
                        #12

                        Thanks a lot @mrjj !!!

                        I found all the docs needed to change the color !
                        Like you said, it's impossible to change the color via the stylesheet, but there's a QVariantMap that can be set and gave to the function as an argument to change the color of the icon depending of the state of the button.

                        So here's what I did :

                        QVariantMap variantMap;
                        variantMap.insert("color",QColor(10,10,10));
                        ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat,variantMap));
                        

                        Thanks again ! Problem solved ! :P

                        Olivier Duguay

                        mrjjM 1 Reply Last reply
                        3
                        • OlivierDuguayO OlivierDuguay

                          Thanks a lot @mrjj !!!

                          I found all the docs needed to change the color !
                          Like you said, it's impossible to change the color via the stylesheet, but there's a QVariantMap that can be set and gave to the function as an argument to change the color of the icon depending of the state of the button.

                          So here's what I did :

                          QVariantMap variantMap;
                          variantMap.insert("color",QColor(10,10,10));
                          ui->pb_autoscroll->setIcon(getAwesome()->icon(fa::repeat,variantMap));
                          

                          Thanks again ! Problem solved ! :P

                          mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by
                          #13

                          @OlivierDuguay
                          Super !
                          So it was possible via the options. (variantmap)
                          Seems like pretty nice library.

                          1 Reply Last reply
                          0

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved