Replacing easily the responsive control +/- with fontawesome icons

yericus

So i was bothered a lot by the responsive plugin controller doodle that appears to expands a row's child when needed.

It turns out, replacing the + and - by fontawesome icons is really easy.

In the responsive.bootstrap4.css (for example) the doodle is defined in the classes .dtr-control:before and .control:before both for the inline and column responsive types (so in 2 places)

font-family: 'Courier New', Courier, monospace;
content: '+';

Link the fontawesome 5 css in yyour page (https://fontawesome.com)
Replace with :

font-family: 'Font Awesome 5 Free';
content: '\f055';
vertical-align: middle;
font-weight: 900;

Change the background-color definition to a simple color: and remove all border definitions, change display to display: inline-block.
Finally change the activated state in the next class from

  content: '-';
  background-color: #d33333;

to

  content: '\f056';
  color: #d33333;

And voila, no more ugly misaligned capricious doodle but a nice +/- fontawesome icon.
After a full day having trouble with my datatables, sharing this small victory was just feeling too good to resist.

colin

Nice, thanks for sharing,

Colin