render fontawesome icon inside of a datatable
render fontawesome icon inside of a datatable
i've tried to render a font awesome icon inside a datatable by sending a string as a parameter, the thing is that if isend a <button> it renders without any problem; but when i try to render an icon, it doesn't. When i open the console it shows the icon is there (by example, <font-awesome-icon icon="fas, heart-pulse" class="me-1"> ) but it doesn't render it at all. I've used methods of rendering like this one:
datosTabla.value = cdv.map(
({
departamento_desc
}) =>
({
departamento_desc,
html_buttons:
<button type="button" class="btn btn-sm btn-primary">
<font-awesome-icon :icon="['fas', 'eye']" class="me-1" />
Ver
</button>
<button type="button" class="btn btn-sm btn-primary">
<font-awesome-icon :icon="['fas', 'file-pdf']" class="me-1" />
PDF
</button>
<button type="button" class="btn btn-sm btn-primary">
<font-awesome-icon :icon="['fas', 'file-excel']" class="me-1" />
Excel
</button>
})
);
this is from onMounted() in the js (defined as async), but there is also this one in the column definitions:
{
data: 'html_buttons',
title: 'Actions',
render: (data, type, row) => {
return <button type="button" class="btn btn-sm btn-primary">
<font-awesome-icon icon="fas, heart-pulse" class="me-1" />
Ver Documento
</button>
;
},
},
both of them only render the button but not the <font-awesome-icon>, even if i put only the icon there or use an <i> tag
Answers
I'm not familiar with this method of using Font Awesome. I've only seen the
i
tag usage. Something like this:https://live.datatables.net/bozosaqu/1/edit
This isn't technically a Datatables issue. Try copying the
button
you are rendering to a place in your document outside of Datatables. Does it render properly?Maybe you aren't loading the Font Awesome library or the library you are loading doesn't have the heart-pulse icon. If you still need help please provide a link to a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin