Warning: breaking changes with icons

FontAwesome moved to icon prefixes "fas"/"far"/"fal" instead of single "fa".
Most old icons still work with "fa", but not all and none of the newer icons.
This commit changes old prefix to new prefixes in most places.
You might need to update your code and reference icons as
"fas something" or "far something" instead of "something" or "fa something".

hshassets/forms/utils.py

@@ -71,7 +71,7 @@ class BulmaFieldMarkup(object):
         Input field with icon in the left. Usage:
         my_field = forms.CharField(widget=forms.TextInput(attrs={"icon": "fa-barcode"}))
         """
-        icon_html = '<span class="icon is-small {side}"><i class="fa {icon}"></i></span>'
+        icon_html = '<span class="icon is-small {side}"><i class="{icon}"></i></span>'
         control_classes = ['control']
         icon_left, icon_right = None, None
         # left icon is user customizable
@@ -81,7 +81,7 @@ class BulmaFieldMarkup(object):
         # right icon appears on field errors
         if field.errors and (get_input_type(field) in INPUT_TYPES_CAN_HAVE_ICON_ON_THE_RIGHT):
             control_classes.append("has-icons-right")
-            icon_right = 'fa-warning'
+            icon_right = 'fas fa-exclamation-triangle'
         content = format_html(
             '{content}{i1}{i2}',
             content=content,
@@ -167,7 +167,7 @@ def render_form_errors(errors):
 def render_submit_button(text, css_class, icon=None):
     if icon:
         icon_html = format_html(
-            """<span class="icon is-small"><i class="fa {icon}"></i></span>""",
+            """<span class="icon is-small"><i class="{icon}"></i></span>""",
             **locals(),
         )
         text_html = format_html(

hshassets/templates/hshassets/includes/breadcrumbs.html

@@ -26,7 +26,7 @@
         <nav class="breadcrumb" aria-label="breadcrumbs">
             <ul>
 
-                <li><a href="{{ service_it_uri }}"><span class="icon"><i class="fa fa-home"></i></span> IT Services</a></li>
+                <li><a href="{{ service_it_uri }}"><span class="icon"><i class="fas fa-home"></i></span> IT Services</a></li>
 
                 {% for breadcrumb in breadcrumb_path %}
                     <li {% if forloop.last %}class="is-active"{% endif %}>

hshassets/templates/hshassets/includes/default_footer.html

@@ -11,11 +11,11 @@
     <div class="column is-narrow has-text-centered-touch">
         {% block footer-left %}
         <p>
-            <span class="icon is-small"><i class="fa fa-book"></i></span>
+            <span class="icon is-small"><i class="fas fa-book"></i></span>
             <a href="https://service.it.hs-hannover.de/impressum/">{% trans "Imprint" %}</a>
         </p>
         <p>
-            <span class="icon is-small"><i class="fa fa-eye-slash"></i></span>
+            <span class="icon is-small"><i class="fas fa-eye-slash"></i></span>
             <a href="https://service.it.hs-hannover.de/privacy/">{% trans "Privacy" %}</a>
         </p>
         {% endblock %}
@@ -29,15 +29,15 @@
         {% block footer-right %}
         <p><b>Hochschule Hannover</b></p>
         <p>
-            <abbr title="{% trans "Phone" %}"><span class="icon is-small"><i class="fa fa-phone"></i></span></abbr>
+            <abbr title="{% trans "Phone" %}"><span class="icon is-small"><i class="fas fa-phone"></i></span></abbr>
             <a href="tel:+4951192961441">+49 511 9296 1441</a>
         </p>
         <p>
-            <abbr title="{% trans "Email" %}"><span class="icon is-small"><i class="fa fa-envelope"></i></span></abbr>
+            <abbr title="{% trans "Email" %}"><span class="icon is-small"><i class="fas fa-envelope"></i></span></abbr>
             <a href="mailto:it-Support@hs-hannover.de">IT-Support@hs-hannover.de</a>
         </p>
         <p>
-            <abbr title="{% trans "Web" %}"><span class="icon is-small"><i class="fa fa-globe"></i></span></abbr>
+            <abbr title="{% trans "Web" %}"><span class="icon is-small"><i class="fas fa-globe"></i></span></abbr>
             <a href="https://www.hs-hannover.de/it">https://www.hs-hannover.de/it</a>
         </p>
         {% endblock %}

hshassets/templates/hshassets/includes/nav_auth_buttons.html

@@ -11,7 +11,7 @@
     <span class="navbar-item">
         <span class="has-text-light">{% trans "Logged in as" %} <strong>{{ user.username }}</strong></span>&nbsp;
         <a class="button is-white is-outlined" href="{% url 'sso-logout' %}">
-            <span class="icon"><i class="fa fa-sign-out-alt"></i></span>
+            <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
             <span>{% trans "Log Out" %}</span>
         </a>
     </span>

hshassets/templates/hshassets/includes/session_timer.html

@@ -14,7 +14,7 @@ To use the template as is simply include it in your "base.html":
 
 You can also specify "end_session_icon" and "end_session_text" when including:
 
-{% include "hshassets/includes/session_timer.html" with end_session_icon="fa-lock" end_session_text="Lock" %}
+{% include "hshassets/includes/session_timer.html" with end_session_icon="fas fa-lock" end_session_text="Lock" %}
 
 Chances are that you need even more fine grained control over the template so you can also extend
 it in your app and include your extended template instead or write your own from the getgo.
@@ -35,11 +35,11 @@ Also make sure to include the corresponding javascript in your "base.html":
         {% block session-nav-left %}{% endblock session-nav-left %}
         <div class="navbar-item has-text-grey">
             <span>{% trans "Your session will automatically expire in:" %}</span>
-            <span class="icon is-small has-text-left has-text-right"><i class="fa fa-clock-o"></i></span>
+            <span class="icon is-small has-text-left has-text-right"><i class="far fa-clock"></i></span>
             <span id="session-timer" data-initial-seconds-left="{{ initial_seconds_left|unlocalize }}">00:00</span>
         </div>
         <a href="{% url "flush-session" %}" class="navbar-item">
-            <span class="icon is-small has-text-right"><i class="fa {% if end_session_icon %}{{ end_session_icon }}{% else %}fa-sign-out{% endif %}"></i></span>
+            <span class="icon is-small has-text-right"><i class="{% if end_session_icon %}{{ end_session_icon }}{% else %}fas fa-sign-out-alt{% endif %}"></i></span>
             {% if end_session_text %}
             <span>{{ end_session_text }}</span>
             {% else %}

hshassets/templates/hshassets/layout/hero.html

@@ -59,11 +59,11 @@
                                 {% elif message.tags == 'warning'%}is-warning
                                 {% elif message.tags == 'error'%}is-danger{% endif %}">
                                 <span class="icon">
-                                    {% if message.tags == 'debug' %}<i class="fa fa-bug"></i>
-                                    {% elif message.tags == 'info'%}<i class="fa fa-info"></i>
-                                    {% elif message.tags == 'success'%}<i class="fa fa-check"></i>
-                                    {% elif message.tags == 'warning'%}<i class="fa fa-exclamation-triangle"></i>
-                                    {% elif message.tags == 'error'%}<i class="fa fa-exclamation-triangle"></i>{% endif %}
+                                    {% if message.tags == 'debug' %}<i class="fas fa-bug fa-spin"></i>
+                                    {% elif message.tags == 'info'%}<i class="fas fa-info-circle"></i>
+                                    {% elif message.tags == 'success'%}<i class="fas fa-check-circle"></i>
+                                    {% elif message.tags == 'warning'%}<i class="fas fa-exclamation-triangle"></i>
+                                    {% elif message.tags == 'error'%}<i class="fas fa-exclamation-triangle"></i>{% endif %}
                                 </span>
                                 {{ message }}
                             </div>