Font Awesome plus-circle and minus-circle instead of image for controlling child rows?

Font Awesome plus-circle and minus-circle instead of image for controlling child rows?

countesscatcountesscat Posts: 21Questions: 7Answers: 0

As title says I am interested in replacing the default image styling for child rows controls. Any idea how to implement this? Anyone ever did this?

Regards!

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    Answer ✓

    Hi @countesscat ,

    This one is a bit convoluted, but it's using Font Awesome for the child row open/close,

    Cheers,

    Colin

  • countesscatcountesscat Posts: 21Questions: 7Answers: 0

    Thank you very much! I will try to implement on my instance now. :smile:

  • MartimmyMartimmy Posts: 6Questions: 1Answers: 0

    for the lazy ones: in addition to the official Example i just added this code for Font Awesome 5 Free

    CSS:

    table.dataTable td.details-control:before {
       content: '\f152';
       font-family: 'Font Awesome\ 5 Free'; 
       cursor: pointer;
       font-size: 22px;
       color: #55a4be;
    }
    table.dataTable tr.shown td.details-control:before {
      content: '\f150';
      color: black;
    }
    
This discussion has been closed.