Custom button, how to change text

[lingtalfi]

Hi, I am trying to the custom vertical buttons example with font-awesome icons, but I face multiple problems:

• first: since I want to replace the plus/minus text with icons, I need to remove the plus/minus text (because they get in the way, showing next to the icon: this is not what I want: I want just the icon, not the text). But I didn't find an option to do so.

• second: is is possible to tell bootstrap-touchspin to use an i tag instead of the button tag

• third: in the same order of idea, it would be nice if I could choose the bootstrap class applied to the vertical buttons (by default it's btn btn-primary, but what if I want to change this to btn btn-danger for instance...)

[andresayej]

@lingtalfi

About the custom plus/minus text to be replaced with icons: Here are some ideas from my project...you can use CSS to achieve that.

  .bootstrap-touchspin-down, .bootstrap-touchspin-up {
   visibility: hidden;
  }

  .bootstrap-touchspin-down:before {
   visibility: visible;
   content: "\f063";
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   text-decoration: inherit;
   /*--adjust as necessary--*/
   color: #000;
   font-size: 16px;
   padding-right: 5px;
   position: absolute;
   top: 10px;
   left: 0;
  }

  .bootstrap-touchspin-up:before {
   visibility: visible;
   content: "\f062";
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   text-decoration: inherit;
   /*--adjust as necessary--*/
   color: #000;
   font-size: 16px;
   padding-left: 5px;
   position: absolute;
   top: 10px;
   left: 0;

I hope you will find this useful.

[lingtalfi]

Thanks.

[diesl]

You can also use the option buttondown_txt and buttonup_txt to change the button text:

buttondown_txt: '<i class="fa fa-minus"></i>'
buttonup_txt:   '<i class="fa fa-plus"></i>'

[bharatribadiya]

@diesl in bootstrap 4 it is not working

[bharatribadiya]

buttondown_class: 'btn btn-outline-light', buttonup_class: 'btn btn-outline-light', verticalbuttons: true, verticalup: '<i class="mdi mdi-chevron-up m-0"></i>', verticaldown: '<i class="mdi mdi-chevron-down m-0"></i>'

for me its working

[istvan-ujjmeszaros]

This should work by tweaking the options. Feel free to reopen if there seems to be a bug, but please provide an example then.