Edit icon from font awesome version 5.15.2 does not diplay in thymeleaf table for sping mvc project

I am using Spring mvc and thymeleaf as my template engine. I have tested the fontawesome icon outside the table data tag and it works but when I put in inside the anchor tag for the table it does not display. it only displays a blue dash. I have tried different suggestions from other stack overflow questions but none have returned a working result. Here is my code:

  <html>
  <head>
  <link> rel="stylesheet"  th:href="@{webjars/font-awesome/5.15.2/css/all.css}" type="text/css"</link>
 </head>
 <body>
<table class="table table-bordered table-striped">
    <thead class="thead-dark">
    <tr>
        <th>Province</th>
        <th>District</th>
        <th>Surname</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Nat ID</th>
        <th>Phone Number</th>
        <th>Category</th>
        <th>Date of Birth</th>
        <th>Address</th>
        <th>Edit</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="ben : ${bensList}">
        <td th:text="${ben.province}"></td>
        <td th:text="${ben.district}"></td>
        <td th:text="${ben.surname}"></td>
        <td th:text="${ben.name}"></td>
        <td th:text="${ben.gender}"></td>
        <td th:text="${ben.natId}"></td>
        <td th:text="${ben.phoneNumber}"></td>
        <td th:text="${ben.Category}"></td>
        <td th:text="${ben.dateOfBirth}"></td>
        <td th:text="${ben.address}"></td>
        <td><a th:href="@{/district/edit/{id}(id=${ben.id})} " class="btn btn-primary" ><i                
      class="fas user-edit"></i></a> </td>
    </tr>
    </tbody>
</table>
</div>

`