use different way for bootstrap icons

templates/card.html

@@ -8,7 +8,7 @@
         data-bs-placement="top"
         data-bs-title="Add a reaction"
       >
-        <i class="bi bi-heart-fill" style="font-size: 1rem; color: pink;"></i>
+        <i class="bi-heart-fill" style="font-size: 1rem; color: pink;"></i>
       </a>
     </div>
 
@@ -30,7 +30,7 @@
         {% for reaction in reactions %}
         {# TODO: limit total number of reactions shown #}
       <span class="badge rounded-pill">
-        <svg class="bi" width="1rem" height="1rem"><use xlink:href="#{{ reaction }}" /></svg>
+        <i class="bi-{{ reaction }}"></i>
       </span>
         {% endfor %}
       {% endif %}