render fontawesome icon inside of a datatable

render fontawesome icon inside of a datatable

Eu_GrutoEu_Gruto Posts: 1Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,328Questions: 26Answers: 4,949

    <font-awesome-icon icon="fas, heart-pulse" class="me-1" />

    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

Sign In or Register to comment.