Merge branch 'svg_icons' into 'main'

Draft: Replace Font Awesome with inline SVG icons See merge request bde/nk20!188
Replace Font Awesome with inline SVG icons
2024-11-26 18:37:12 +00:00 · 2024-06-05 01:10:24 +02:00 · 2021-10-06 17:15:33 +02:00
18 changed files with 191 additions and 46 deletions
--- a/2
+++ b/2
@ -12,7 +12,7 @@ RUN apt-get update && \
    python3-babel python3-lockfile python3-pip python3-phonenumbers python3-memcache ipython3 \
    python3-bs4 python3-setuptools \
    uwsgi uwsgi-plugin-python3 \
-    texlive-xetex gettext libjs-bootstrap4 fonts-font-awesome && \
+    texlive-xetex gettext libjs-bootstrap4 && \
    rm -rf /var/lib/apt/lists/*

 # Instal PyPI requirements
--- a/README.md
+++ b/README.md
@ -23,7 +23,7 @@ Bien que cela permette de créer une instance sur toutes les distributions,
    $ sudo apt update
    $ sudo apt install --no-install-recommends -y \
        ipython3 python3-setuptools python3-venv python3-dev \
-        texlive-xetex gettext libjs-bootstrap4 fonts-font-awesome git
+        texlive-xetex gettext libjs-bootstrap4 git
    ```

 2.  **Clonage du dépot** là où vous voulez :
@ -115,7 +115,7 @@ Sinon vous pouvez suivre les étapes décrites ci-dessous.
        python3-babel python3-lockfile python3-pip python3-phonenumbers python3-memcache ipython3 \
        python3-bs4 python3-setuptools python3-docutils \
        memcached uwsgi uwsgi-plugin-python3 \
-        texlive-xetex gettext libjs-bootstrap4 fonts-font-awesome \
+        texlive-xetex gettext libjs-bootstrap4 \
        nginx python3-venv git acl
    ```

--- a/ansible/roles/1-apt-basic/tasks/main.yml
+++ b/ansible/roles/1-apt-basic/tasks/main.yml
@ -18,7 +18,6 @@
      - ipython3

      # Front-end dependencies
-      - fonts-font-awesome
      - libjs-bootstrap4

      # Python dependencies
--- a/apps/activity/templates/activity/activity_list.html
+++ b/apps/activity/templates/activity/activity_list.html
@ -34,7 +34,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
    {% endif %}
    <div class="card-footer">
        <a class="btn btn-sm btn-success" href="{% url 'activity:activity_create' %}" data-turbolinks="false">
-            <i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
+            <svg class="bi bi-calendar-plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zM8.5 8.5V10H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V11H6a.5.5 0 0 1 0-1h1.5V8.5a.5.5 0 0 1 1 0z"/>
+            </svg>
            {% trans 'New activity' %}
        </a>
    </div>
--- a/apps/member/templates/member/base.html
+++ b/apps/member/templates/member/base.html
@ -45,7 +45,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
            <div class="card-footer">
                {% if user_object %}
                <a class="btn btn-sm btn-secondary" href="{% url 'member:user_update_profile' user_object.pk %}">
-                    <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
+                    <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                    </svg>
+                    {% trans 'Update Profile' %}
                </a>
                {% url 'member:user_detail' user_object.pk as user_profile_url %}
                {% if request.path_info != user_profile_url %}
@ -59,7 +62,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
                {% if ".change_"|has_perm:club %}
                <a class="btn btn-sm btn-secondary" href="{% url 'member:club_update' pk=club.pk %}"
                   data-turbolinks="false">
-                    <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
+                    <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                    </svg>
+                    {% trans 'Update Profile' %}
                </a>
                {% endif %}
                {% url 'member:club_detail' club.pk as club_detail_url %}
--- a/apps/member/templates/member/club_detail.html
+++ b/apps/member/templates/member/club_detail.html
@ -10,7 +10,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="font-weight-bold">
-            <i class="fa fa-users"></i> {% trans "Club managers" %}
+            <svg class="bi bi-users" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+            </svg>
+            {% trans "Club managers" %}
        </a>
    </div>
    {% render_table managers %}
@ -23,7 +26,12 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="stretched-link font-weight-bold" href="{% url 'member:club_members' pk=club.pk %}">
-            <i class="fa fa-users"></i> {% trans "Club members" %}
+            <svg class="bi bi-users" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
+                <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+            </svg>
+            {% trans "Club members" %}
        </a>
    </div>
    {% render_table member_list %}
@ -37,7 +45,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
    <div class="card-header position-relative" id="historyListHeading">
        <a class="stretched-link font-weight-bold" {% if "note.view_note"|has_perm:club.note %}
            href="{% url 'note:transactions' pk=club.note.pk %}" {% endif %}>
-            <i class="fa fa-euro"></i> {% trans "Transaction history" %}
+            <svg class="bi bi-euro" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.198-3.775-3.264h4.017v-.928H6.497v-.936c0-.11 0-.219.008-.329h4.078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.05 1.659.177V2.194A6.617 6.617 0 0 0 10.341 2c-2.928 0-4.82 1.569-5.244 4.3H4v.928h1.01v1.265H4v.928z"/>
+            </svg>
+            {% trans "Transaction history" %}
        </a>
    </div>
    <div id="history_list">
--- a/apps/member/templates/member/includes/club_info.html
+++ b/apps/member/templates/member/includes/club_info.html
@ -47,7 +47,9 @@
    <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
    <dd class="col-xl-6">
        <a class="badge badge-secondary" href="{% url 'member:club_alias' club.pk %}">
-            <i class="fa fa-edit"></i>
+            <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+            </svg>
            {% trans 'Manage aliases' %} ({{ club.note.alias.all|length }})
        </a>
    </dd>
--- a/apps/member/templates/member/includes/profile_info.html
+++ b/apps/member/templates/member/includes/profile_info.html
@ -11,7 +11,9 @@
    <dt class="col-xl-6">{% trans 'password'|capfirst %}</dt>
    <dd class="col-xl-6">
        <a class="badge badge-secondary" href="{% url 'password_change' %}">
-            <i class="fa fa-lock"></i>
+            <svg class="bi bi-lock" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+            </svg>
            {% trans 'Change password' %}
        </a>
    </dd>
@ -20,7 +22,9 @@
    <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
    <dd class="col-xl-6">
        <a class="badge badge-secondary" href="{% url 'member:user_alias' user_object.pk %}">
-            <i class="fa fa-edit"></i>
+            <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+            </svg>
            {% trans 'Manage aliases' %} ({{ user_object.note.alias.all|length }})
        </a>
    </dd>
@ -60,7 +64,10 @@
 {% if user_object.pk == user.pk %}
    <div class="text-center">
        <a class="small badge badge-secondary" href="{% url 'member:auth_token' %}">
-            <i class="fa fa-cogs"></i>{% trans 'API token' %}
+            <svg class="bi bi-cogs" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+            </svg>
+            {% trans 'API token' %}
        </a>
    </div>
 {% endif %}
--- a/apps/member/templates/member/profile_detail.html
+++ b/apps/member/templates/member/profile_detail.html
@ -18,7 +18,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card bg-light mb-3">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="font-weight-bold">
-            <i class="fa fa-users"></i> {% trans "View my memberships" %}
+            <svg class="bi bi-users" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+            </svg>
+            {% trans "View my memberships" %}
        </a>
    </div>
    {% render_table club_list %}
@ -29,7 +32,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
        <a class="stretched-link font-weight-bold text-decoration-none"
            {% if "note.view_note"|has_perm:user_object.note %}
            href="{% url 'note:transactions' pk=user_object.note.pk %}" {% endif %}>
-            <i class="fa fa-euro"></i> {% trans "Transaction history" %}
+            <svg class="bi bi-euro" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.198-3.775-3.264h4.017v-.928H6.497v-.936c0-.11 0-.219.008-.329h4.078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.05 1.659.177V2.194A6.617 6.617 0 0 0 10.341 2c-2.928 0-4.82 1.569-5.244 4.3H4v.928h1.01v1.265H4v.928z"/>
+            </svg>
+            {% trans "Transaction history" %}
        </a>
    </div>
    <div id="history_list">
--- a/apps/member/templates/member/user_list.html
+++ b/apps/member/templates/member/user_list.html
@ -7,7 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% block content %}
 {% if can_manage_registrations %}
 <a class="btn btn-block btn-secondary mb-3" href="{% url 'registration:future_user_list' %}">
-    <i class="fa fa-user-plus"></i> {% trans "Registrations" %}
+    <svg class="bi bi-user-plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+        <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
+    </svg>
+    {% trans "Registrations" %}
 </a>
 {% endif %}

--- a/apps/note/templates/note/conso_form.html
+++ b/apps/note/templates/note/conso_form.html
@ -148,7 +148,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
                {# Mode switch #}
                <div class="card-footer border-primary">
                    <a class="btn btn-sm btn-secondary float-left" href="{% url 'note:template_list' %}">
-                        <i class="fa fa-edit"></i> {% trans "Edit" %}
+                        <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                        </svg>
+                        {% trans "Edit" %}
                    </a>
                    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                        <label for="single_conso" class="btn btn-sm btn-outline-primary active">
--- a/apps/wei/templates/wei/bus_detail.html
+++ b/apps/wei/templates/wei/bus_detail.html
@ -29,7 +29,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="font-weight-bold">
-            <i class="fa fa-bus"></i> {% trans "Teams" %}
+            <svg class="bi bi-signpost" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7.293.707A1 1 0 0 0 7 1.414V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.532a1 1 0 0 0 .768-.36l1.933-2.32a.5.5 0 0 0 0-.64L13.3 4.36a1 1 0 0 0-.768-.36H9V1.414A1 1 0 0 0 7.293.707z"/>
+            </svg>
+            {% trans "Teams" %}
        </a>
    </div>
    {% render_table teams %}
@ -42,7 +45,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="font-weight-bold">
-            <i class="fa fa-bus"></i> {% trans "Members" %}
+            <svg class="bi bi-signpost" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7.293.707A1 1 0 0 0 7 1.414V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.532a1 1 0 0 0 .768-.36l1.933-2.32a.5.5 0 0 0 0-.64L13.3 4.36a1 1 0 0 0-.768-.36H9V1.414A1 1 0 0 0 7.293.707z"/>
+            </svg>
+            {% trans "Members" %}
        </a>
    </div>
    {% render_table memberships %}
@ -51,7 +57,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <hr>

 <a href="{% url 'wei:wei_memberships_bus_pdf' wei_pk=club.pk bus_pk=object.pk %}" data-turbolinks="false">
-    <button class="btn btn-block btn-danger"><i class="fa fa-file-pdf-o"></i> {% trans "View as PDF" %}</button>
+    <button class="btn btn-block btn-danger">
+        <svg class="bi bi-file-pdf" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M5.523 12.424c.14-.082.293-.162.459-.238a7.878 7.878 0 0 1-.45.606c-.28.337-.498.516-.635.572a.266.266 0 0 1-.035.012.282.282 0 0 1-.026-.044c-.056-.11-.054-.216.04-.36.106-.165.319-.354.647-.548zm2.455-1.647c-.119.025-.237.05-.356.078a21.148 21.148 0 0 0 .5-1.05 12.045 12.045 0 0 0 .51.858c-.217.032-.436.07-.654.114zm2.525.939a3.881 3.881 0 0 1-.435-.41c.228.005.434.022.612.054.317.057.466.147.518.209a.095.095 0 0 1 .026.064.436.436 0 0 1-.06.2.307.307 0 0 1-.094.124.107.107 0 0 1-.069.015c-.09-.003-.258-.066-.498-.256zM8.278 6.97c-.04.244-.108.524-.2.829a4.86 4.86 0 0 1-.089-.346c-.076-.353-.087-.63-.046-.822.038-.177.11-.248.196-.283a.517.517 0 0 1 .145-.04c.013.03.028.092.032.198.005.122-.007.277-.038.465z"/>
+            <path fill-rule="evenodd" d="M4 0h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.5 1.5v2a1 1 0 0 0 1 1h2l-3-3zM4.165 13.668c.09.18.23.343.438.419.207.075.412.04.58-.03.318-.13.635-.436.926-.786.333-.401.683-.927 1.021-1.51a11.651 11.651 0 0 1 1.997-.406c.3.383.61.713.91.95.28.22.603.403.934.417a.856.856 0 0 0 .51-.138c.155-.101.27-.247.354-.416.09-.181.145-.37.138-.563a.844.844 0 0 0-.2-.518c-.226-.27-.596-.4-.96-.465a5.76 5.76 0 0 0-1.335-.05 10.954 10.954 0 0 1-.98-1.686c.25-.66.437-1.284.52-1.794.036-.218.055-.426.048-.614a1.238 1.238 0 0 0-.127-.538.7.7 0 0 0-.477-.365c-.202-.043-.41 0-.601.077-.377.15-.576.47-.651.823-.073.34-.04.736.046 1.136.088.406.238.848.43 1.295a19.697 19.697 0 0 1-1.062 2.227 7.662 7.662 0 0 0-1.482.645c-.37.22-.699.48-.897.787-.21.326-.275.714-.08 1.103z"/>
+        </svg>
+        {% trans "View as PDF" %}
+    </button>
 </a>
 {% endif %}
 {% endblock %}
--- a/apps/wei/templates/wei/busteam_detail.html
+++ b/apps/wei/templates/wei/busteam_detail.html
@ -47,7 +47,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card">
    <div class="card-header position-relative" id="clubListHeading">
        <a class="font-weight-bold">
-            <i class="fa fa-bus"></i> {% trans "Teams" %}
+            <svg class="bi bi-signpost" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7.293.707A1 1 0 0 0 7 1.414V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.532a1 1 0 0 0 .768-.36l1.933-2.32a.5.5 0 0 0 0-.64L13.3 4.36a1 1 0 0 0-.768-.36H9V1.414A1 1 0 0 0 7.293.707z"/>
+            </svg>
+            {% trans "Teams" %}
        </a>
    </div>
    {% render_table memberships %}
@ -57,7 +60,13 @@ SPDX-License-Identifier: GPL-3.0-or-later

 <a href="{% url 'wei:wei_memberships_team_pdf' wei_pk=club.pk bus_pk=object.bus.pk team_pk=object.pk %}"
    data-turbolinks="false">
-    <button class="btn btn-block btn-danger"><i class="fa fa-file-pdf-o"></i> {% trans "View as PDF" %}</button>
+    <button class="btn btn-block btn-danger">
+        <svg class="bi bi-file-pdf" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M5.523 12.424c.14-.082.293-.162.459-.238a7.878 7.878 0 0 1-.45.606c-.28.337-.498.516-.635.572a.266.266 0 0 1-.035.012.282.282 0 0 1-.026-.044c-.056-.11-.054-.216.04-.36.106-.165.319-.354.647-.548zm2.455-1.647c-.119.025-.237.05-.356.078a21.148 21.148 0 0 0 .5-1.05 12.045 12.045 0 0 0 .51.858c-.217.032-.436.07-.654.114zm2.525.939a3.881 3.881 0 0 1-.435-.41c.228.005.434.022.612.054.317.057.466.147.518.209a.095.095 0 0 1 .026.064.436.436 0 0 1-.06.2.307.307 0 0 1-.094.124.107.107 0 0 1-.069.015c-.09-.003-.258-.066-.498-.256zM8.278 6.97c-.04.244-.108.524-.2.829a4.86 4.86 0 0 1-.089-.346c-.076-.353-.087-.63-.046-.822.038-.177.11-.248.196-.283a.517.517 0 0 1 .145-.04c.013.03.028.092.032.198.005.122-.007.277-.038.465z"/>
+            <path fill-rule="evenodd" d="M4 0h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.5 1.5v2a1 1 0 0 0 1 1h2l-3-3zM4.165 13.668c.09.18.23.343.438.419.207.075.412.04.58-.03.318-.13.635-.436.926-.786.333-.401.683-.927 1.021-1.51a11.651 11.651 0 0 1 1.997-.406c.3.383.61.713.91.95.28.22.603.403.934.417a.856.856 0 0 0 .51-.138c.155-.101.27-.247.354-.416.09-.181.145-.37.138-.563a.844.844 0 0 0-.2-.518c-.226-.27-.596-.4-.96-.465a5.76 5.76 0 0 0-1.335-.05 10.954 10.954 0 0 1-.98-1.686c.25-.66.437-1.284.52-1.794.036-.218.055-.426.048-.614a1.238 1.238 0 0 0-.127-.538.7.7 0 0 0-.477-.365c-.202-.043-.41 0-.601.077-.377.15-.576.47-.651.823-.073.34-.04.736.046 1.136.088.406.238.848.43 1.295a19.697 19.697 0 0 1-1.062 2.227 7.662 7.662 0 0 0-1.482.645c-.37.22-.699.48-.897.787-.21.326-.275.714-.08 1.103z"/>
+        </svg>
+        {% trans "View as PDF" %}
+    </button>
 </a>
 {% endif %}
 {% endblock %}
--- a/apps/wei/templates/wei/weiclub_detail.html
+++ b/apps/wei/templates/wei/weiclub_detail.html
@ -48,7 +48,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="card bg-white mb-3">
    <div class="card-header position-relative" id="clubListHeading">
        <span class="font-weight-bold">
-            <i class="fa fa-bus"></i> {% trans "Buses" %}
+            <svg class="bi bi-signpost" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7.293.707A1 1 0 0 0 7 1.414V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.532a1 1 0 0 0 .768-.36l1.933-2.32a.5.5 0 0 0 0-.64L13.3 4.36a1 1 0 0 0-.768-.36H9V1.414A1 1 0 0 0 7.293.707z"/>
+            </svg>
+            {% trans "Buses" %}
        </span>
    </div>
    {% render_table buses %}
@ -60,7 +63,12 @@ SPDX-License-Identifier: GPL-3.0-or-later
    <div class="card-header position-relative" id="clubListHeading">
        <a class="stretched-link font-weight-bold text-decoration-none"
            href="{% url "wei:wei_memberships" pk=club.pk %}">
-            <i class="fa fa-users"></i> {% trans "Members of the WEI" %}
+            <svg class="bi bi-users" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
+                <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+            </svg>
+            {% trans "Members of the WEI" %}
        </a>
    </div>
    {% render_table member_list %}
@ -72,7 +80,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
    <div class="card-header position-relative" id="historyListHeading">
        <a class="stretched-link font-weight-bold text-decoration-none" {% if "note.view_note"|has_perm:club.note %}
            href="{% url 'note:transactions' pk=club.note.pk %}" {% endif %}>
-            <i class="fa fa-euro"></i> {% trans "Transaction history" %}
+            <svg class="bi bi-euro" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.198-3.775-3.264h4.017v-.928H6.497v-.936c0-.11 0-.219.008-.329h4.078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.05 1.659.177V2.194A6.617 6.617 0 0 0 10.341 2c-2.928 0-4.82 1.569-5.244 4.3H4v.928h1.01v1.265H4v.928z"/>
+            </svg>
+            {% trans "Transaction history" %}
        </a>
    </div>
    <div id="history_list">
@ -86,7 +97,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
    <div class="card-header position-relative" id="historyListHeading">
        <a class="stretched-link font-weight-bold text-decoration-none"
            href="{% url 'wei:wei_registrations' pk=club.pk %}">
-            <i class="fa fa-user-plus"></i> {% trans "Unvalidated registrations" %}
+            <svg class="bi bi-user-plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
+            </svg>
+            {% trans "Unvalidated registrations" %}
        </a>
    </div>
    <div id="history_list">
--- a/apps/wei/templates/wei/weimembership_list.html
+++ b/apps/wei/templates/wei/weimembership_list.html
@ -28,7 +28,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
        </a>
        <hr>
        <a href="{% url 'wei:wei_memberships_pdf' wei_pk=club.pk %}" data-turbolinks="false">
-            <button class="btn btn-block btn-danger"><i class="fa fa-file-pdf-o"></i> {% trans "View as PDF" %}</button>
+            <button class="btn btn-block btn-danger">
+                <svg class="bi bi-file-pdf" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M5.523 12.424c.14-.082.293-.162.459-.238a7.878 7.878 0 0 1-.45.606c-.28.337-.498.516-.635.572a.266.266 0 0 1-.035.012.282.282 0 0 1-.026-.044c-.056-.11-.054-.216.04-.36.106-.165.319-.354.647-.548zm2.455-1.647c-.119.025-.237.05-.356.078a21.148 21.148 0 0 0 .5-1.05 12.045 12.045 0 0 0 .51.858c-.217.032-.436.07-.654.114zm2.525.939a3.881 3.881 0 0 1-.435-.41c.228.005.434.022.612.054.317.057.466.147.518.209a.095.095 0 0 1 .026.064.436.436 0 0 1-.06.2.307.307 0 0 1-.094.124.107.107 0 0 1-.069.015c-.09-.003-.258-.066-.498-.256zM8.278 6.97c-.04.244-.108.524-.2.829a4.86 4.86 0 0 1-.089-.346c-.076-.353-.087-.63-.046-.822.038-.177.11-.248.196-.283a.517.517 0 0 1 .145-.04c.013.03.028.092.032.198.005.122-.007.277-.038.465z"/>
+                    <path fill-rule="evenodd" d="M4 0h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.5 1.5v2a1 1 0 0 0 1 1h2l-3-3zM4.165 13.668c.09.18.23.343.438.419.207.075.412.04.58-.03.318-.13.635-.436.926-.786.333-.401.683-.927 1.021-1.51a11.651 11.651 0 0 1 1.997-.406c.3.383.61.713.91.95.28.22.603.403.934.417a.856.856 0 0 0 .51-.138c.155-.101.27-.247.354-.416.09-.181.145-.37.138-.563a.844.844 0 0 0-.2-.518c-.226-.27-.596-.4-.96-.465a5.76 5.76 0 0 0-1.335-.05 10.954 10.954 0 0 1-.98-1.686c.25-.66.437-1.284.52-1.794.036-.218.055-.426.048-.614a1.238 1.238 0 0 0-.127-.538.7.7 0 0 0-.477-.365c-.202-.043-.41 0-.601.077-.377.15-.576.47-.651.823-.073.34-.04.736.046 1.136.088.406.238.848.43 1.295a19.697 19.697 0 0 1-1.062 2.227 7.662 7.662 0 0 0-1.482.645c-.37.22-.699.48-.897.787-.21.326-.275.714-.08 1.103z"/>
+                </svg>
+                {% trans "View as PDF" %}
+            </button>
        </a>
    </div>
    </div>
--- a/docs/install-dev.rst
+++ b/docs/install-dev.rst
@ -23,7 +23,7 @@ Sur un Ubuntu/Debian :
   $ sudo apt update
   $ sudo apt install --no-install-recommends -y \
       python3-setuptools python3-venv python3-dev \
-       texlive-xetex gettext libjs-bootstrap4 fonts-font-awesome git
+       texlive-xetex gettext libjs-bootstrap4 git

 Pour Arch Linux :

--- a/docs/install.rst
+++ b/docs/install.rst
@ -62,7 +62,7 @@ plus propre. On peut donc installer tout ce dont on a besoin, depuis buster-back
   $ sudo apt update
   $ sudo apt install -t buster-backports --no-install-recommends \
       gettext git ipython3 \  # Dépendances basiques
-       fonts-font-awesome libjs-bootstrap4 \  # Pour l'affichage web
+       libjs-bootstrap4 \  # Pour l'affichage web
       python3-bs4 python3-django python3-django-crispy-forms python3-django-extensions \
       python3-django-filters python3-django-oauth-toolkit python3-django-polymorphic \
       python3-djangorestframework python3-memcache python3-phonenumbers \
--- a/note_kfet/templates/base.html
+++ b/note_kfet/templates/base.html
@ -24,9 +24,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
    <meta name="msapplication-config" content="{% static "favicon/browserconfig.xml" %}">
    <meta name="theme-color" content="#ffffff">

-    {# Bootstrap, Font Awesome and custom CSS #}
+    {# Load CSS #}
    <link rel="stylesheet" href="{% static "bootstrap4/css/bootstrap.min.css" %}">
-    <link rel="stylesheet" href="{% static "font-awesome/css/font-awesome.min.css" %}">
    <link rel="stylesheet" href="{% static "css/custom.css" %}">

    {# JQuery, Bootstrap and Turbolinks JavaScript #}
@ -63,54 +62,101 @@ SPDX-License-Identifier: GPL-3.0-or-later
                    {% if "note.transactiontemplate"|not_empty_model_list %}
                        <li class="nav-item">
                            {% url 'note:consos' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-coffee"></i> {% trans 'Consumptions' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-mug" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M1 2a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1h.5A1.5 1.5 0 0 1 16 4.5v7a1.5 1.5 0 0 1-1.5 1.5h-.55a2.5 2.5 0 0 1-2.45 2h-8A2.5 2.5 0 0 1 1 12.5V2zm13 10h.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5H14v8z"/>
+                                </svg>
+                                {% trans 'Consumptions' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if user.is_authenticated and user|is_member:"Kfet" %}
                        <li class="nav-item">
                            {% url 'note:transfer' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-exchange"></i> {% trans 'Transfer' %} </a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-exchange" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+                                </svg>
+                                {% trans 'Transfer' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if "auth.user"|model_list_length >= 2 %}
                        <li class="nav-item">
                            {% url 'member:user_list' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-user"></i> {% trans 'Users' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-user" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                                </svg>
+                                {% trans 'Users' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if "member.club"|not_empty_model_list %}
                        <li class="nav-item">
                            {% url 'member:club_list' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-users"></i> {% trans 'Clubs' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-users" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                                    <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
+                                    <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+                                </svg>
+                                {% trans 'Clubs' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if "activity.activity"|not_empty_model_list %}
                        <li class="nav-item">
                            {% url 'activity:activity_list' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-calendar"></i> {% trans 'Activities' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-calendar" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z"/>
+                                </svg>
+                                {% trans 'Activities' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if "treasury.invoice"|not_empty_model_list %}
                        <li class="nav-item">
                            {% url 'treasury:invoice_list' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-credit-card"></i> {% trans 'Treasury' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-credit-card" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H0V4zm0 3v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7H0zm3 2h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1z"/>
+                                </svg>
+                                {% trans 'Treasury' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if "wei.weiclub"|not_empty_model_list %}
                        <li class="nav-item">
                            {% url 'wei:current_wei_detail' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-bus"></i> {% trans 'WEI' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-signpost" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M7.293.707A1 1 0 0 0 7 1.414V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.532a1 1 0 0 0 .768-.36l1.933-2.32a.5.5 0 0 0 0-.64L13.3 4.36a1 1 0 0 0-.768-.36H9V1.414A1 1 0 0 0 7.293.707z"/>
+                                </svg>
+                                {% trans 'WEI' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if request.user.is_authenticated %}
                        <li class="nav-item">
                            {% url 'permission:rights' as url %}
-                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}"><i class="fa fa-balance-scale"></i> {% trans 'Rights' %}</a>
+                            <a class="nav-link {% if request.path_info == url %}active{% endif %}" href="{{ url }}">
+                                <svg class="bi bi-shield" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z"/>
+                                </svg>
+                                {% trans 'Rights' %}
+                            </a>
                        </li>
                    {% endif %}
                    {% if request.user.is_staff and ""|has_perm:user %}
                        <li class="nav-item">
-                            <a data-turbolinks="false" class="nav-link" href="{% url 'admin:index' %}"><i class="fa fa-cogs"></i> {% trans 'Admin' %}</a>
+                            <a data-turbolinks="false" class="nav-link" href="{% url 'admin:index' %}">
+                                <svg class="bi bi-cog" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+                                </svg>
+                                {% trans 'Admin' %}
+                            </a>
                        </li>
                    {% endif %}
                </ul>
@ -118,16 +164,25 @@ SPDX-License-Identifier: GPL-3.0-or-later
                    {% if request.user.is_authenticated %}
                        <li class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <i class="fa fa-user"></i>
+                                <svg class="bi bi-user" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                                </svg>
                                <span id="user_balance">{{ request.user.username }} ({{ request.user.note.balance | pretty_money }})</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right"
                                 aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="{% url 'member:user_detail' pk=request.user.pk %}">
-                                    <i class="fa fa-user"></i> {% trans "My account" %}
+                                    <svg class="bi bi-user" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                                    </svg>
+                                    {% trans "My account" %}
                                </a>
                                <a class="dropdown-item" href="{% url 'logout' %}">
-                                    <i class="fa fa-sign-out"></i> {% trans "Log out" %}
+                                    <svg class="bi bi-signout" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+                                        <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+                                    </svg>
+                                    {% trans "Log out" %}
                                </a>
                            </div>
                        </li>
@ -135,14 +190,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
                {% if request.path != "/registration/signup/" %}
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'registration:signup' %}">
-                                    <i class="fa fa-user-plus"></i> {% trans "Sign up" %}
+                                    <svg class="bi bi-user-plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                                        <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
+                                    </svg>
+                                    {% trans "Sign up" %}
                                </a>
                            </li>
                        {% endif %}
                {% if request.path != "/accounts/login/" %}
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'login' %}">
-                                    <i class="fa fa-sign-in"></i> {% trans "Log in" %}
+                                    <svg class="bi bi-login" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
+                                        <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+                                    </svg>
+                                    {% trans "Log in" %}
                                </a>
                            </li>
                        {% endif %}