Is it possible to include html inside addText or deleteText?

[jpm92]

Hello, I'd like to use fontawesome icons inside the add-row and delete-row links (instead of the plain text), how could I achieve that?
I've tried to modify the code, but my JS knowledge is very limited. Any tips would be appreciated, thanks!

[andyp05]

You can assign classes to add/delete and then do what you need in the css style:

      $('#form tbody tr').formset({
        addText: 'Add New Row',
        deleteText: '',
        addCssClass: 'custom-add-row',
        deleteCssClass: 'custom-delete-row',

In this example I created my own add icon.

<style>
        .custom-add-row {
            padding-left: 20px;
            padding-top: 5px;
            background: url('{% static "main/images/add.png" %}') no-repeat left center;
        }
</style>

Hope this helps.

[jpm92]

Thanks @andyp05! I already thought of that, but I was hoping I could add a fontawesome icon with some option to add a css snippet like this one: <i class="fas fa-plus-square"></i>
I guess I'll have to work with css then, thanks again!

[wolkiewiczk]

Thanks @andyp05! I already thought of that, but I was hoping I could add a fontawesome icon with some option to add a css snippet like this one: <i class="fas fa-plus-square"></i>
I guess I'll have to work with css then, thanks again!

I have added <i class="fas fa-trash"></i> as a delete text and it works fine for me.

[jpm92]

Thanks @andyp05! I already thought of that, but I was hoping I could add a fontawesome icon with some option to add a css snippet like this one: <i class="fas fa-plus-square"></i>
I guess I'll have to work with css then, thanks again!

I have added <i class="fas fa-trash"></i> as a delete text and it works fine for me.

That's cool! I actually never tried, I'll do it soon.
Thanks!