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

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 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