Use debian font-awesome

Rather than going online, use fonts-font-awesome debian package. Also
icons were updated to font-awesome 4.7.0 (in debian 9).

apt_requirements.txt

@@ -14,4 +14,5 @@ libjs-jquery
 libjs-jquery-ui
 libjs-jquery-timepicker
 libjs-bootstrap
+fonts-font-awesome
 graphviz

logs/templates/logs/sidebar.html

@@ -29,15 +29,15 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 {% block sidebar %}
     {% can_view_app logs %}
     <a class="list-group-item list-group-item-info" href="{% url "logs:index" %}">
-        <i class="fa fa-clipboard-list"></i>
+        <i class="fa fa-clipboard"></i>
         {% trans "Summary" %}
     </a>
     <a class="list-group-item list-group-item-info" href="{% url "logs:stats-logs" %}">
-        <i class="fa fa-calendar-alt"></i>
+        <i class="fa fa-calendar"></i>
         {% trans "Events" %}
     </a>
     <a class="list-group-item list-group-item-info" href="{% url "logs:stats-general" %}">
-        <i class="fa fa-chart-area"></i>
+        <i class="fa fa-area-chart"></i>
         {% trans "General" %}
     </a>
     <a class="list-group-item list-group-item-info" href="{% url "logs:stats-models" %}">

re2o/settings.py

@@ -174,6 +174,7 @@ BOOTSTRAP_BASE_URL = '/javascript/bootstrap/'
 # Use only absolute paths with '/' delimiters even on Windows
 STATICFILES_DIRS = (
     os.path.join(BASE_DIR, 'static').replace('\\', '/'),
+    "/usr/share/fonts-font-awesome/",
 )
 # Directory where the static files served by the server are stored
 STATIC_ROOT = os.path.join(BASE_DIR, 'static_files')

re2o/templatetags/design.py

@@ -31,9 +31,9 @@ def tick(valeur, autoescape=False):
 
     if isinstance(valeur,bool):
         if valeur == True:
-            result = '<i style="color: #1ECA18;" class="fas fa-check"></i>'
+            result = '<i style="color: #1ECA18;" class="fa fa-check"></i>'
         else:
-            result = '<i style="color: #D10115;" class="fas fa-times"></i>'
+            result = '<i style="color: #D10115;" class="fa fa-times"></i>'
         return mark_safe(result)
 
     else: #  if the value is not a boolean, display it as if tick was not called 

static/css/base.css

@@ -13,6 +13,13 @@ footer p {
     margin-bottom: 0;
 }
 
+/* Reserv space for icons and align */
+a > i.fa {
+    display: inline-block;
+    width: 26px;
+    text-align: center;
+}
+
 /* Reduce the padding for the logo in the navbar-brand so the 32px-high logo
  * is centered in the navbar */
 .navbar-brand {

templates/base.html

@@ -40,21 +40,14 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         <meta property="og:image:type" content="image/svg"/>
         <meta property="og:image:alt" content="The Re2o logo"/>
         <meta property="og:description" content="{% trans "Networking managing website endorsed by FedeRez." %}" />
-    	<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
 
-        {# Load CSS and JavaScript #}
+        {# Load CSS #}
         {% bootstrap_css %}
-        <link href="/static/css/typeaheadjs.css" rel="stylesheet">
+        <link href="{% static 'css/typeaheadjs.css' %}" rel="stylesheet">
-        <link href="/static/css/bootstrap-tokenfield.css" rel="stylesheet">
+        <link href="{% static 'css/bootstrap-tokenfield.css' %}" rel="stylesheet">
+        <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet">
+        <link href="{% static 'css/base.css' %}" rel="stylesheet">
 
-        {% bootstrap_javascript %}
-        <script src="/static/js/typeahead/typeahead.js"></script>
-        <script src="/static/js/handlebars/handlebars.js"></script>
-        <script src="/static/js/konami/konami.js"></script>
-        <script src="/static/js/sapphire.js"> var s=Sapphire(); Konami(s.activate); </script>
-        <script src="/static/js/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>
-        <script src="/static/js/shortcuts.js"></script>
-        <link rel="stylesheet" href="{% static 'css/base.css' %}">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="shortcut icon" type="image/svg" href="{% static 'images/logo_re2o.svg' %}">
         <title>{{ name_website }} : {% block title %}{% trans "Home" %}{% endblock %}</title>
@@ -88,7 +81,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                                 <li><a href="{% url 'machines:index' %}"><i class="fa fa-desktop"></i> {% trans "Manage the machines" %}</a></li>
                                 {% acl_end %}
                                 {% can_view_app cotisations %}
-			    <li><a href="{% url 'cotisations:index' %}"><i class="fa fa-dollar-sign"></i> {% trans "Manage the subscriptions" %}</a></li>
+                                <li><a href="{% url 'cotisations:index' %}"><i class="fa fa-usd"></i> {% trans "Manage the subscriptions" %}</a></li>
                                 {% acl_end %}
                             </ul>
                         </li>
@@ -104,7 +97,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                         </li>
                         {% acl_end %}
                         {% can_view_app logs %}
-                        <li><a href="{% url "logs:index" %}"><i class="fa fa-chart-area"></i> {% trans "Statistics" %}</a></li>
+                        <li><a href="{% url "logs:index" %}"><i class="fa fa-area-chart"></i> {% trans "Statistics" %}</a></li>
                         {% acl_end %}
                         {% can_view_app preferences %}
                         <li>
@@ -116,10 +109,10 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
                         <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-info"></i> {% trans "More information" %}<span class="caret"></span></a>
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-info"></i> {% trans "More information" %}<span class="caret"></span></a>
                             <ul class="dropdown-menu">
                                 <li><a href="{% url 'about' %}"><i class="fa fa-info-circle"></i> {% trans "About" %}</a></li>
-                                <li><a href="{% url 'contact' %}"><i class="fas fa-at"></i> {% trans "Contact" %}</a></li>
+                                <li><a href="{% url 'contact' %}"><i class="fa fa-at"></i> {% trans "Contact" %}</a></li>
                             </ul>
                         </li>
                         {% if not request.user.is_authenticated %}
@@ -132,7 +125,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                             {% endif %}
                             <li>
                                 <a id="toggle_login" href="{% url 'login' %}">
-                                    <i class="fa fa-sign-in-alt"></i> {% trans "Log in" %}
+                                    <i class="fa fa-sign-in"></i> {% trans "Log in" %}
                                 </a>
                             </li>
                         {% else %}
@@ -155,7 +148,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user-circle"></i> {{ request.user.pseudo|slice:":15" }} <span class="caret"></span></a>
                             <ul class="dropdown-menu">
                                 <li><a href="{% url "users:mon-profil" %}"><i class="fa fa-user"></i> {% trans "My profile" %}</a></li>
-                                <li><a id="toggle_login" href="{% url 'logout' %}"><i class="fa fa-sign-out-alt"></i> {% trans "Log out" %}</a></li>
+                                <li><a id="toggle_login" href="{% url 'logout' %}"><i class="fa fa-sign-out"></i> {% trans "Log out" %}</a></li>
                             </ul>
                         </li>
                         {% endif %}
@@ -272,6 +265,15 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             </div>
         </footer>
 
+        {# Load JavaScript #}
+        {% bootstrap_javascript %}
+        <script src="/static/js/typeahead/typeahead.js"></script>
+        <script src="/static/js/handlebars/handlebars.js"></script>
+        <script src="/static/js/konami/konami.js"></script>
+        <script src="/static/js/sapphire.js"> var s=Sapphire(); Konami(s.activate); </script>
+        <script src="/static/js/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>
+        <script src="/static/js/shortcuts.js"></script>
+
         {# Read the documentation for more information #}
     </body>
 </html>

users/templates/users/profil.html

@@ -55,7 +55,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                 <div class="panel-body dashboard">
                     {% can_create Facture %}
                     <a class="btn btn-danger btn-sm" role="button" href="{% url 'cotisations:new-facture' users.id %}">
-                        <i class="fas fa-sign-in-alt"></i> {% trans "Pay for a connection" %}
+                        <i class="fa fa-sign-in"></i> {% trans "Pay for a connection" %}
                     </a>
                     {% acl_else %}
                     {% trans "Ask for someone with the appropriate rights to pay for a connection." %}
@@ -68,7 +68,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                 <div class="panel-body dashboard">
                     {% can_create Facture %}
                     <a class="btn btn-success btn-sm" role="button" href="{% url 'cotisations:new-facture' users.id %}">
-                        <i class="fas fa-sign-in-alt"></i> {% trans "Extend the connection period" %}
+                        <i class="fa fa-sign-in"></i> {% trans "Extend the connection period" %}
                     </a>
                     {% acl_end %}
                 </div>
@@ -79,7 +79,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         <div class="col-sm-6 col-md-4">
             <div class="panel panel-info">
                 <div class="panel-heading dashboard" data-parent="#accordion" data-toggle="collapse" data-target="#collapse4">
-                    {{ users.solde }} <i class="fas fa-euro-sign"></i>
+                    {{ users.solde }} <i class="fa fa-euro-sign"></i>
                 </div>
                 <div class="panel-body dashboard">
                     <a class="btn btn-primary btn-sm" role="button" href="{% url 'cotisations:credit-solde' users.id %}">