Затем заменим символы стрелок сортировки на иконки из библиотеки Bootstrap Icons.
Подключим их в заголовке шаблона templates\base.html:
<head>
<meta charset="utf-8">
<title>{% block title %}Books{% endblock title %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="{% static 'base.css' %}">
</head>Затем в этом же шаблоне заменим символы стрелок:
Символ ⇓ заменим на тег <i class="table-icon bi bi-arrow-down-square ms-1"></i>.
А символ ⇑ заменим на тег <i class="table-icon bi bi-arrow-up-square"></i>.
Проверяем результат, символы стрелок заменились на их значки:
