From 466cbd9878538a058a7fe4d59545bcda284f42ef Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Tue, 5 Oct 2021 17:24:06 +0200
Subject: [PATCH] Replace Font Awesome with inline SVG icons

Font Awesome 4 adds 106kB of dependencies on each page and require to
query multiple assets. It also sometimes causes icons to appear after
page loading. Font Awesome 4 is deprecated and replaced by version 5
which is not packaged in every GNU/Linux distributions.

This commit replaces icons with inline SVG which does not require
external assets, does not require an additionnal dependency and is
widely supported by modern browsers. It makes the page loading faster
and enables us to no longer require fonts-font-awesome Debian package.
---
 Dockerfile                                    |  2 +-
 README.md                                     |  4 +-
 ansible/roles/1-apt-basic/tasks/main.yml      |  1 -
 .../templates/activity/activity_list.html     |  4 +-
 apps/member/templates/member/base.html        | 10 +-
 apps/member/templates/member/club_detail.html | 17 +++-
 .../templates/member/includes/club_info.html  |  4 +-
 .../member/includes/profile_info.html         | 13 ++-
 .../templates/member/profile_detail.html      | 10 +-
 apps/member/templates/member/user_list.html   |  6 +-
 apps/note/templates/note/conso_form.html      |  5 +-
 apps/wei/templates/wei/bus_detail.html        | 18 +++-
 apps/wei/templates/wei/busteam_detail.html    | 13 ++-
 apps/wei/templates/wei/weiclub_detail.html    | 23 ++++-
 .../wei/templates/wei/weimembership_list.html |  8 +-
 docs/install-dev.rst                          |  2 +-
 docs/install.rst                              |  2 +-
 note_kfet/templates/base.html                 | 95 +++++++++++++++----
 18 files changed, 191 insertions(+), 46 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 95a62437..c099f655 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -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
diff --git a/README.md b/README.md
index 26ced30c..0cba71c0 100644
--- 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
     ```
 
diff --git a/ansible/roles/1-apt-basic/tasks/main.yml b/ansible/roles/1-apt-basic/tasks/main.yml
index 7c57646f..e4f2037d 100644
--- a/ansible/roles/1-apt-basic/tasks/main.yml
+++ b/ansible/roles/1-apt-basic/tasks/main.yml
@@ -17,7 +17,6 @@
       - ipython3
 
       # Front-end dependencies
-      - fonts-font-awesome
       - libjs-bootstrap4
 
       # Python dependencies
diff --git a/apps/activity/templates/activity/activity_list.html b/apps/activity/templates/activity/activity_list.html
index 3316d698..b4008c4e 100644
--- 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>
diff --git a/apps/member/templates/member/base.html b/apps/member/templates/member/base.html
index e1e9335b..7182d0cc 100644
--- 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 %}
diff --git a/apps/member/templates/member/club_detail.html b/apps/member/templates/member/club_detail.html
index a0b927e1..c7d74a5d 100644
--- 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">
diff --git a/apps/member/templates/member/includes/club_info.html b/apps/member/templates/member/includes/club_info.html
index 0efc71d0..758db7ea 100644
--- 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>
diff --git a/apps/member/templates/member/includes/profile_info.html b/apps/member/templates/member/includes/profile_info.html
index 378d54e2..25b3aaff 100644
--- 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>
@@ -52,7 +56,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 %}
diff --git a/apps/member/templates/member/profile_detail.html b/apps/member/templates/member/profile_detail.html
index 591fa879..15cb98ad 100644
--- 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">
diff --git a/apps/member/templates/member/user_list.html b/apps/member/templates/member/user_list.html
index 023aca16..1f8fb110 100644
--- 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 %}
 
diff --git a/apps/note/templates/note/conso_form.html b/apps/note/templates/note/conso_form.html
index d6044b87..b9ec92c8 100644
--- a/apps/note/templates/note/conso_form.html
+++ b/apps/note/templates/note/conso_form.html
@@ -129,7 +129,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">
diff --git a/apps/wei/templates/wei/bus_detail.html b/apps/wei/templates/wei/bus_detail.html
index c8f3ce20..215be704 100644
--- 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 %}
\ No newline at end of file
diff --git a/apps/wei/templates/wei/busteam_detail.html b/apps/wei/templates/wei/busteam_detail.html
index 27348d03..610a26fb 100644
--- 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 %}
\ No newline at end of file
diff --git a/apps/wei/templates/wei/weiclub_detail.html b/apps/wei/templates/wei/weiclub_detail.html
index cd4b5efb..dfee3a93 100644
--- 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">
diff --git a/apps/wei/templates/wei/weimembership_list.html b/apps/wei/templates/wei/weimembership_list.html
index fe9506b2..59dc515b 100644
--- 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>
diff --git a/docs/install-dev.rst b/docs/install-dev.rst
index d3e616b2..19ff5a14 100644
--- 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 :
 
diff --git a/docs/install.rst b/docs/install.rst
index 09d1e539..ed3b450f 100644
--- 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 \
diff --git a/note_kfet/templates/base.html b/note_kfet/templates/base.html
index 3adcef2c..a48683ea 100644
--- 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 #}
@@ -64,54 +63,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>
@@ -119,16 +165,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>
@@ -136,14 +191,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 %}