Using FontAwesome for row-details expandable button

coolboyjules

Hi everyone,

I'm trying to use a FontAwesome icon like 'fa fa-plus-circle" for my row-details instead of the default green/red one given in the example:

datatables.net/examples/server_side/row_details.html

I know i'm supposed to put the icon in an <i> tag, but can't figure out how to do this with just the "class" option exposed on the column. When I try to just do like

"class": "fa fa-plus-circle"

It'll show something like what I've attached, which is messed up, as opposed to just using a .png, which works fine.

Here's my debug code: opaviv

Thanks for your help!

coolboyjules

Bump! Would really appreciate the help.

allan

I know i'm supposed to put the icon in an <i> tag

You could use a renderer.

However, I would probably suggest in this case that you use CSS with FontAwesome providing the content. That way it is easy to update the icon based on the row's state (open / closed) - it gets messy if you put the <i> into the HTML since you need to update it when the state changes.

Allan