how to prepend an icon to error messages on form validation jquery

Question

I used the following code to prepend an icon to the form validation error messages but when the user clicks on the form field and clicks away without fixing the field the icon disappears:

errorPlacement: 
    function(label, element) {
        label.prepend('<i class="fa-solid fa-triangle-exclamation fa-lg" style="color: #c0392b;"></i> ');
        label.insertAfter(element);
    },

what do I need to do to keep the icon on the error message?

Answer 1

I was able to solve the issue by using just CSS:

    label.error::before{
        font-family: "Font Awesome 5 Free";
        content: "\f071 ";
        display: inline-block;
        padding-right: 5px;
        vertical-align: middle;
        font-weight: 900;
    }

This added an icon to the error message and the icon stays if the user click outside of the field without fixing it.