Documentation on changing responsive icon

c-myers1

Please point me to where I can read up how to change the + expand and - collapse icons. Is there some config or do we have to hack icons

tangerine

If you follow the example thoroughly, you will see that it applies the class name "details-control" to the relevant table cell. The CSS for that class is also shown.
Apply your own icon files to the class.
https://datatables.net/examples/api/row_details.html

c-myers1

So I created a folder called resources and dumped the icons I want to use. Then I have a <style></style> tag at the top of my page referring to these icons. Result? It overlays my new +expand icon over the contents of the 3rd column of my table on each row. The green default + is still showing on the first column. Clicking the new icon on 3rd column does nothing, old green + open up the row but collapse icon never shows.

DT documentation is so cryptic, sort of expects everyone to be an expert.

This example you reference is not clear to me. I use the responsive extension and nowhere in the page source is this "additional CSS" evident. As a result users are left to stumble about to figure out how to implement things, generating a lot of avoidable enquiries in my view.

allan

@tangerine assumed that you meant the +/- icons for the open close API example that he linked to, rather than Responsive's icon.

This is the source SCSS for the responsive control icon. If you'd like to change it, you need to override that CSS.

The documentation assumes that you are familiar with Javascript and CSS - it would be impossible to maintain otherwise. Having said that, I agree that there should be an example that demonstrates at least how to modify the background colour of those icons.

Allan

c-myers1

Fairpoint, thank you. Successfully changed using CSS character codes but don't have enough skills to switch this to an png image.

allan

You could use the background property in CSS to display an image instead.

Allan