Upgrade to fontawesome 6

* Adapt fontawesome usage when needed
* Fix uv guide not importing css
* Remove utf8 usage for fontawesome

core/static/core/style.scss

@@ -228,6 +228,15 @@ a:not(.button) {
   }
 }
 
+.edit-action {
+  color: orange;
+}
+
+.delete-action {
+  color: red;
+}
+
+
 #page {
   width: 90%;
   margin: 20px auto 0;

core/static/webpack/fontawesome-index.js

@@ -0,0 +1 @@
+require("@fortawesome/fontawesome-free/css/all.css");

core/templates/core/base.jinja

@@ -18,9 +18,8 @@
                 {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
         <link rel="stylesheet" href="{{ static('webpack/jquery-index.css') }}">
       {% endblock %}
-      <link rel="preload" as="style" href="{{ static('vendored/font-awesome/css/font-awesome.min.css') }}" onload="this.onload=null;this.rel='stylesheet'">
-      <noscript><link rel="stylesheet" href="{{ static('vendored/font-awesome/css/font-awesome.min.css') }}"></noscript>
-      <script defer href="{{ static('vendored/font-awesome/js/fontawesome.min.js') }}"></script>
+      <link rel="preload" as="style" href="{{ static('webpack/fontawesome-index.css') }}" onload="this.onload=null;this.rel='stylesheet'">
+      <noscript><link rel="stylesheet" href="{{ static('webpack/fontawesome-index.css') }}"></noscript>
 
       <script src="{{ static('webpack/alpine-index.js') }}" defer></script>
             <!-- Jquery declared here to be accessible in every django widgets -->
@@ -114,7 +113,7 @@
                 </div>
                 <div class="notification">
                   <a href="#" onclick="display_notif()">
-                    <i class="fa fa-bell-o"></i>
+                    <i class="fa-regular fa-bell"></i>
                     {% set notification_count = user.notifications.filter(viewed=False).count() %}
 
                     {% if notification_count > 0 %}

core/templates/core/macros.jinja

@@ -40,11 +40,11 @@
 {%- endmacro %}
 
 {% macro fb_quick(news) -%}
-  <a rel="nofollow" target="#" href="https://www.facebook.com/sharer/sharer.php?u={{ news.get_full_url() }}" class="fb fa fa-facebook-square fa-2x"></a>
+  <a rel="nofollow" target="#" href="https://www.facebook.com/sharer/sharer.php?u={{ news.get_full_url() }}" class="fb fa-brands fa-facebook fa-2x"></a>
 {%- endmacro %}
 
 {% macro tweet_quick(news) -%}
-  <a rel="nofollow" target="#" href="https://twitter.com/intent/tweet?text={{ news.get_full_url() }}" class="twitter fa fa-twitter-square fa-2x"></a>
+  <a rel="nofollow" target="#" href="https://twitter.com/intent/tweet?text={{ news.get_full_url() }}" class="twitter fa-brands fa-twitter-square fa-2x"></a>
 {%- endmacro %}
 
 {% macro user_mini_profile(user) %}

core/templates/core/user_detail.jinja

@@ -225,7 +225,7 @@
             {% for gift in gifts %}
               <li>{{ gift }}
                 <a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}">
-                  <i class="fa fa-trash"></i>
+                  <i class="fa-solid fa-trash-can delete-action"></i>
                 </a>
               </li>
             {% endfor %}

core/templates/core/user_godfathers_tree.jinja

@@ -32,7 +32,7 @@
             <button
               @click="godfathers_depth--"
               :disabled="godfathers_depth <= {{ depth_min }}"
-            ><i class="fa fa-minus fa-xs"></i></button>
+            ><i class="fa fa-minus"></i></button>
             <input
               x-model="godfathers_depth"
               x-ref="godfather_depth_input"
@@ -59,7 +59,7 @@
               @click="godchildren_depth--"
               :disabled="godchildren_depth <= {{ depth_min }}"
             ><i
-              class="fa fa-minus fa-xs"
+              class="fa fa-minus"
             ></i></button>
             <input
               x-model="godchildren_depth"

core/templates/core/widgets/markdown_textarea.jinja

@@ -118,7 +118,7 @@
           {
             name: "image",
             action: EasyMDE.drawImage,
-            className: "fa fa-picture-o",
+            className: "fa-regular fa-image",
             title: "{{ translations.image }}"
           },
           {

core/templates/core/widgets/nfc.jinja

@@ -1,7 +1,7 @@
 <span>
   <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
 	<!-- NFC icon not available in fontawesome 4.7 --> 
-  <button type="button" id="{{ widget.attrs.id }}_button"><i class="fa fa-tag"></i></button>
+  <button type="button" id="{{ widget.attrs.id }}_button"><i class="fa-brands fa-nfc-symbol"></i></button>
 </span>
 <script>
   document.addEventListener("DOMContentLoaded", function(event) {

eboutic/templates/eboutic/eboutic_main.jinja

@@ -112,7 +112,7 @@
                       <img class="product-image" src="{{ p.icon.url }}"
                            alt="image de {{ p.name }}">
                     {% else %}
-                      <i class="fa fa-2x fa-picture-o product-image"></i>
+                      <i class="fa-regular fa-image fa-2x product-image"></i>
                     {% endif %}
                     <div class="product-description">
                       <h4>{{ p.name }}</h4>

election/templates/election/election_detail.jinja

@@ -51,7 +51,7 @@
               <th class="column" style="width: {{ 100 / (election_lists.count() + 1) }}%">
                 <span>{{ election_list.title }}</span>
                 {% if user.can_edit(election_list) and election.is_vote_editable -%}
-                  <a href="{{ url('election:delete_list', list_id=election_list.id) }}">❌</a>
+                  <a href="{{ url('election:delete_list', list_id=election_list.id) }}"><i class="fa-regular fa-trash-can delete-action"></i></a>
                 {% endif %}
               </th>
             {%- endfor %}
@@ -79,8 +79,8 @@
                 </div>
                 {% if user.can_edit(role) and election.is_vote_editable -%}
                   <div class="role_buttons">
-                    <a href="{{url('election:update_role', role_id=role.id)}}">✏️</a>
-                    <a href="{{url('election:delete_role', role_id=role.id)}}">❌</a>
+                    <a href="{{url('election:update_role', role_id=role.id)}}">️<i class="fa-regular fa-pen-to-square edit-action"></i></a>
+                    <a href="{{url('election:delete_role', role_id=role.id)}}"><i class="fa-regular fa-trash-can delete-action"></i></a>
                     {%- if role == role_list.last() %}
                       <button disabled><i class="fa fa-arrow-down"></i></button>
                       <button disabled><i class="fa fa-caret-down"></i></button>
@@ -143,8 +143,8 @@
                           {%- if user.can_edit(candidature) -%}
                             {%- if election.is_vote_editable -%}
                               <div class="edit_btns">
-                                <a href="{{url('election:update_candidate', candidature_id=candidature.id)}}">{% trans %}✏️{% endtrans %}</a>
-                                <a href="{{url('election:delete_candidate', candidature_id=candidature.id)}}">{% trans %}❌{% endtrans %}</a>
+                                <a href="{{url('election:update_candidate', candidature_id=candidature.id)}}"><i class="fa-regular fa-pen-to-square edit-action"></i>️</a>
+                                <a href="{{url('election:delete_candidate', candidature_id=candidature.id)}}"><i class="fa-regular fa-trash-can delete-action"></i></a>
                               </div>
                             {%- endif -%}
                           {%- endif -%}

forum/templates/forum/macros.jinja

@@ -123,7 +123,7 @@
           </a>
           {% if user.can_edit(m) %}
             <a href="{{ url('forum:edit_message', message_id=m.id) }}">
-              <i class="fa fa-pencil"></i>
+              <i class="fa fa-pencil edit-action"></i>
             </a>
           {% endif %}
 
@@ -137,7 +137,7 @@
           {% if not m._deleted and (user_is_admin or user.id == m.author_id) %}
             <span>
               <a href="{{ url('forum:delete_message', message_id=m.id) }}">
-                <i class="fa fa-trash"></i>
+                <i class="fa fa-trash-can delete-action"></i>
               </a>
             </span>
           {% endif %}

package-lock.json

@@ -9,6 +9,7 @@
             "version": "3",
             "license": "GPL-3.0-only",
             "dependencies": {
+                "@fortawesome/fontawesome-free": "^6.6.0",
                 "alpinejs": "^3.14.1",
                 "easymde": "^2.18.0",
                 "glob": "^11.0.0",
@@ -1825,6 +1826,14 @@
                 "node": ">=10.0.0"
             }
         },
+        "node_modules/@fortawesome/fontawesome-free": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+            "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@isaacs/cliui": {
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
         "css-minimizer-webpack-plugin": "^7.0.0"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.6.0",
         "alpinejs": "^3.14.1",
         "easymde": "^2.18.0",
         "glob": "^11.0.0",

pedagogy/templates/pedagogy/guide.jinja

@@ -76,7 +76,7 @@
             <input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN" x-model="semester"/>
             <label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
             <input type="checkbox" name="semester" id="radioSPRING" value="SPRING" x-model="semester"/>
-            <label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
+            <label for="radioSPRING"><i class="fa-regular fa-sun"></i></label>
           </div>
         </div>
       </div>
@@ -89,7 +89,7 @@
           <td>{% trans %}Department{% endtrans %}</td>
           <td>{% trans %}Credit type{% endtrans %}</td>
           <td><i class="fa fa-leaf"></i></td>
-          <td><i class="fa fa-sun-o"></i></td>
+          <td><i class="fa-regular fa-sun"></i></td>
           {% if can_create_uv %}
             <td>{% trans %}Edit{% endtrans %}</td>
             <td>{% trans %}Delete{% endtrans %}</td>
@@ -104,7 +104,7 @@
             <td x-text="uv.department"></td>
             <td x-text="uv.credit_type"></td>
             <td><i :class="uv.semester.includes('AUTUMN') && 'fa fa-leaf'"></i></td>
-            <td><i :class="uv.semester.includes('SPRING') && 'fa fa-sun-o'"></i></td>
+            <td><i :class="uv.semester.includes('SPRING') && 'fa-regular fa-sun'"></i></td>
             {% if can_create_uv -%}
               <td><a :href="`/pedagogy/uv/${uv.id}/edit`">{% trans %}Edit{% endtrans %}</a></td>
               <td><a :href="`/pedagogy/uv/${uv.id}/delete`">{% trans %}Delete{% endtrans %}</a></td>

pedagogy/templates/pedagogy/macros.jinja

@@ -3,9 +3,9 @@
   {% if grade >= 0 %}
     {% for i in range(5) %}
       {% if i <= grade %}
-        <span class="fa fa-star pedagogy star-checked grade-with-star"></span>
+        <span class="fa-solid fa-star pedagogy star-checked grade-with-star"></span>
       {% else %}
-        <span class="fa fa-star pedagogy star-not-checked grade-with-star"></span>
+        <span class="fa-solid fa-star pedagogy star-not-checked grade-with-star"></span>
       {% endif %}
     {% endfor %}
     <span class="pedagogy grade-without-star">{{ grade }}/5</span>

pedagogy/templates/pedagogy/uv_detail.jinja

@@ -2,6 +2,10 @@
 {% from "core/macros.jinja" import user_profile_link %}
 {% from "pedagogy/macros.jinja" import display_star %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
+{% endblock %}
+
 {% block title %}
   {% trans %}UV Details{% endtrans %}
 {% endblock %}

sas/templates/sas/picture.jinja

@@ -98,9 +98,9 @@
                 <a class="text danger" href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a>
               </div>
               <div class="buttons">
-                <a class="button" :href="`/sas/picture/${current_picture.id}/edit/`">✏️</a>
-                <a class="button" href="?rotate_left">↺</a>
-                <a class="button" href="?rotate_right">↻</a>
+                <a class="button" :href="`/sas/picture/${current_picture.id}/edit/`"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
+                <a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
+                <a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
               </div>
             </div>
           </div>
@@ -152,7 +152,7 @@
                   <span x-text="identification.user.display_name"></span>
                 </a>
                 <template x-if="can_be_removed(identification)">
-                  <a class="delete clickable" @click="remove_identification(identification)">❌</a>
+                  <a class="delete clickable" @click="remove_identification(identification)"><i class="fa fa-times fa-xl delete-action"></i></a>
                 </template>
               </li>
             </template>

sith/settings.py

@@ -741,7 +741,6 @@ SITH_FRONT_DEP_VERSIONS = {
     "https://github.com/gildas-lormeau/zip.js": "2.7.47",
     "https://github.com/jimmywarting/native-file-system-adapter": "3.0.1",
     "https://github.com/chartjs/Chart.js/": "2.6.0",
-    "https://github.com/FortAwesome/Font-Awesome/": "4.7.0",
     "https://github.com/getsentry/sentry-javascript/": "8.26.0",
     "https://github.com/cytoscape/cytoscape.js": "3.30.2 ",
     "https://github.com/cytoscape/cytoscape.js-cxtmenu": "3.5.0",

webpack.config.js

@@ -46,7 +46,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource'
       },
       {