GroupBox icon change

-1
Is it possible to change groupbox default icon ( Replace + and - with up arrow and down arrow) ?
asked
2 answers
4

Hi Preetha,

Yes that's possible.

If you inspect the element you can see it's using the following default glyphicons:

.glyphicon-minus:before {
    content: "\2212";
}

and

.glyphicon-plus:before {
    content: "\2b";
}

You can replace these with the code's of the glypicons you want to use in the custom.css in your theme folder.

EDIT:

In addition, that would however replace all items, so assign a class(in my example "CustomGroupBox") to your groupbox widget and you can use the css to specifically replace it for this groupbox only:

.CustomGroupBox .glyphicon-minus:before {
    content: "<the code you want to use>";
}

Regards

answered
2

As Corné already mentioned you can replace them in your custom.css. 

But please do this in your custom.scss file to avoid compile issues. 

Also add the following in the custom scss, so only the plus and minus of the groupbox header is changed and not every plus and minus:

.mx-groupbox-header {
  .glyphicon-minus:before {
    content: "\e113";
  }
  .glyphicon-plus:before {
    content: "\e114";
  }
}

Good luck

answered