From a3d9232ea92cac69650e360f7cc86242d546c574 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Tue, 14 Jul 2020 18:38:58 +0100
Subject: [PATCH] Docs

* Fixed sidebar collapse (links now work)
* Changed fontawsome icons to bootstrap icones
---
 .../static/rest_framework/docs/css/base.css   | 21 ++-------
 .../rest_framework/docs/auth/basic.html       | 22 +++++----
 .../rest_framework/docs/auth/session.html     |  9 +++-
 .../rest_framework/docs/auth/token.html       | 23 ++++++----
 .../rest_framework/docs/document.html         |  8 +++-
 .../templates/rest_framework/docs/index.html  |  1 -
 .../rest_framework/docs/interact.html         |  8 +++-
 .../templates/rest_framework/docs/link.html   | 17 +++++--
 .../rest_framework/docs/sidebar.html          | 46 ++++++++++++++++---
 9 files changed, 105 insertions(+), 50 deletions(-)

diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index 0be2bafa9..7a5d8ca80 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -115,7 +115,7 @@ pre.highlight code {
   padding-top: 10px;
   padding-bottom: 10px;
   padding-right: 10px;
-  padding-left: 25px;
+  padding-left: 10px;
 }
 
 .sidebar .menu-list ul .sub-menu li:hover,
@@ -129,19 +129,6 @@ pre.highlight code {
   display: block;
 }
 
-.sidebar .menu-list ul .sub-menu li a:before,
-.sidebar .menu-list li .sub-menu li a:before {
-  font-family: FontAwesome;
-  font-size: 14px;
-  font-weight: bold;
-  content: "\f105";
-  display: inline;
-  vertical-align: middle;
-  padding-left: 0;
-  padding-right: 7px;
-  margin-left: -12px;
-}
-
 .sidebar .menu-list li {
   padding-left: 0px;
   border-left: 3px solid #2e353d;
@@ -153,10 +140,8 @@ pre.highlight code {
   color: white;
 }
 
-.sidebar .menu-list li a i {
-  padding-left: 10px;
-  width: 20px;
-  padding-right: 20px;
+.sidebar .menu-list li a svg {
+
 }
 
 .sidebar .menu-list li:hover {
diff --git a/rest_framework/templates/rest_framework/docs/auth/basic.html b/rest_framework/templates/rest_framework/docs/auth/basic.html
index 16fc67244..34704a667 100644
--- a/rest_framework/templates/rest_framework/docs/auth/basic.html
+++ b/rest_framework/templates/rest_framework/docs/auth/basic.html
@@ -5,22 +5,26 @@
 <div class="modal-dialog modal-md" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <h3 class="modal-title"><i class="fa fa-key"></i> Basic Authentication</h3>
+      <h3 class="modal-title">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+            <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        Basic Authentication
+      </h3>
     </div>
 
-    <form class="form-horizontal authentication-basic-form">
+    <form class="authentication-basic-form">
     <div class="modal-body">
-      <div class="form-group">
-        <label for="authorization" class="col-sm-2 control-label">Username:</label>
-
+      <div class="row mb-3">
+        <label for="authorization" class="col-sm-2 col-form-label">Username:</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="username" required>
         </div>
       </div>
 
-      <div class="form-group">
-        <label for="authorization" class="col-sm-2 control-label">Password:</label>
-
+      <div class="row mb-3">
+        <label for="authorization" class="col-sm-2 col-form-label">Password:</label>
         <div class="col-sm-10">
           <input type="password" class="form-control" id="password" required>
         </div>
@@ -28,7 +32,7 @@
     </div>
 
     <div class="modal-footer">
-      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Use Basic Authentication</button>
     </div>
     </form>
diff --git a/rest_framework/templates/rest_framework/docs/auth/session.html b/rest_framework/templates/rest_framework/docs/auth/session.html
index 59430d95e..23f52e684 100644
--- a/rest_framework/templates/rest_framework/docs/auth/session.html
+++ b/rest_framework/templates/rest_framework/docs/auth/session.html
@@ -5,7 +5,12 @@
 <div class="modal-dialog modal-md" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <h3 class="modal-title"><i class="fa fa-key"></i> Session Authentication</h3>
+      <h3 class="modal-title">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+          <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        Session Authentication</h3>
     </div>
 
     <form class="form-horizontal authentication-session-form">
@@ -23,7 +28,7 @@
     </div>
 
     <div class="modal-footer">
-      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       {% if user.is_authenticated %}
         <button type="submit" class="btn btn-primary">Use Session Authentication</button>
       {% endif %}
diff --git a/rest_framework/templates/rest_framework/docs/auth/token.html b/rest_framework/templates/rest_framework/docs/auth/token.html
index ce781b842..9d842d2fc 100644
--- a/rest_framework/templates/rest_framework/docs/auth/token.html
+++ b/rest_framework/templates/rest_framework/docs/auth/token.html
@@ -5,28 +5,33 @@
 <div class="modal-dialog modal-md" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <h3 class="modal-title"><i class="fa fa-key"></i> Token Authentication</h3>
+      <h3 class="modal-title">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+          <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        Token Authentication</h3>
     </div>
 
-    <form class="form-horizontal authentication-token-form">
+    <form class="authentication-token-form">
     <div class="modal-body">
-      <div class="form-group">
-        <label for="prefix" class="col-sm-2 control-label">Scheme:</label>
+      <div class="row mb-3">
+        <label for="prefix" class="col-sm-2 col-form-label">Scheme:</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="scheme" placeholder="Bearer" aria-describedby="schemeHelpBlock" required>
-          <span id="schemeHelpBlock" class="help-block">Either a registered authentication scheme such as <code>Bearer</code>, or a custom schema such as <code>Token</code> or <code>JWT</code>.</span>
+          <span id="schemeHelpBlock" class="form-text">Either a registered authentication scheme such as <code>Bearer</code>, or a custom schema such as <code>Token</code> or <code>JWT</code>.</span>
         </div>
       </div>
-      <div class="form-group">
-        <label for="token" class="col-sm-2 control-label">Token:</label>
+      <div class="row mb-3">
+        <label for="token" class="col-sm-2 col-form-label">Token:</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="token" placeholder="XXXX-XXXX-XXXX-XXXX" aria-describedby="helpBlock" required>
-          <span id="tokenHelpBlock" class="help-block">A valid API token.</span>
+          <span id="tokenHelpBlock" class="form-text">A valid API token.</span>
         </div>
       </div>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Use Token Authentication</button>
     </div>
     </form>
diff --git a/rest_framework/templates/rest_framework/docs/document.html b/rest_framework/templates/rest_framework/docs/document.html
index 9aecb40e0..4968173c8 100644
--- a/rest_framework/templates/rest_framework/docs/document.html
+++ b/rest_framework/templates/rest_framework/docs/document.html
@@ -16,7 +16,13 @@
 {% if document|data %}
 {% for section_key, section in document|data|items %}
 {% if section_key %}
-    <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+    <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-link-45deg" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+        <path d="M5.712 6.96l.167-.167a1.99 1.99 0 0 1 .896-.518 1.99 1.99 0 0 1 .518-.896l.167-.167A3.004 3.004 0 0 0 6 5.499c-.22.46-.316.963-.288 1.46z"/>
+        <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
+        <path d="M10 9.5a2.99 2.99 0 0 0 .288-1.46l-.167.167a1.99 1.99 0 0 1-.896.518 1.99 1.99 0 0 1-.518.896l-.167.167A3.004 3.004 0 0 0 10 9.501z"/>
+      </svg>
 </a></h2>
 {% endif %}
 
diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html
index dfd363772..aadd51647 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -9,7 +9,6 @@
 	    <title>{{ document.title }}</title>
 
         <link href="{% static 'rest_framework/css/bootstrap.min.css' %}" rel="stylesheet">
-        <link href="{% static 'rest_framework/css/bootstrap-theme.min.css' %}" rel="stylesheet">
         <link href="{% static 'rest_framework/css/font-awesome-4.0.3.css' %}" rel="stylesheet">
         <link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
         <link href="{% static 'rest_framework/docs/css/jquery.json-view.min.css' %}" rel="stylesheet">
diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
index 60771ba20..a61973dfa 100644
--- a/rest_framework/templates/rest_framework/docs/interact.html
+++ b/rest_framework/templates/rest_framework/docs/interact.html
@@ -12,7 +12,13 @@
         </div>
       </div>
 
-      <h3 class="modal-title"><i class="fa fa-exchange"></i> {{ link.title|default:link_key }}</h3>
+      <h3 class="modal-title">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="mb-1 bi bi-arrow-left-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z"/>
+          <path fill-rule="evenodd" d="M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"/>
+          <path fill-rule="evenodd" d="M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+        </svg>
+        {{ link.title|default:link_key }}</h3>
 
     </div>
 
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 0f92a8873..ecfba7ce4 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -7,14 +7,25 @@
         style="float: right; margin-top: 20px"
         data-toggle="modal"
         data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
-        <i class="fa fa-exchange"></i> Interact
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="mb-1 bi bi-arrow-left-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z"/>
+          <path fill-rule="evenodd" d="M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"/>
+          <path fill-rule="evenodd" d="M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+        </svg>
+        Interact
     </button>
 
-    <h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}"><i class="fa fa-link" aria-hidden="true"></i>
+    <h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-link-45deg" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+        <path d="M5.712 6.96l.167-.167a1.99 1.99 0 0 1 .896-.518 1.99 1.99 0 0 1 .518-.896l.167-.167A3.004 3.004 0 0 0 6 5.499c-.22.46-.316.963-.288 1.46z"/>
+        <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
+        <path d="M10 9.5a2.99 2.99 0 0 0 .288-1.46l-.167.167a1.99 1.99 0 0 1-.896.518 1.99 1.99 0 0 1-.518.896l-.167.167A3.004 3.004 0 0 0 10 9.501z"/>
+      </svg>
 </a></h3>
 
     <div class="meta">
-        <span class="label label-primary">{{ link.action|upper }}</span>
+        <span class="badge bg-secondary">{{ link.action|upper }}</span>
         <code>{{ link.url }}</code>
     </div>
 
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index c318789f6..59aa8e6e3 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -2,26 +2,54 @@
 <div class="sidebar">
     <h3 class="brand"><a href="#">{{ document.title }}</a></h3>
 
-    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+    <svg data-toggle="collapse" data-target="#menu-content" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="toggle-btn bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+    </svg>
     <div class="menu-list">
         <ul id="menu-content" class="menu-content collapse out">
             {% if document|data %}
             {% for section_key, section in document|data|items %}
             <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
-                <a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
+                <a class="d-flex align-items-center">
+                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mr-2 ml-2 bi bi-bullseye" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                    <path fill-rule="evenodd" d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/>
+                    <path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
+                    <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+                  </svg>
+                  {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %}
+                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-auto mr-3 bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+                  </svg>
+
+                </a>
+              </li>
                 <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
                 {% for link_key, link in section|schema_links|items %}
-                    <li><a href="#{{ section_key }}-{{ link_key|slugify }}">{{ link.title|default:link_key }}</a></li>
+                    <li>
+                      <a href="#{{ section_key }}-{{ link_key|slugify }}">
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                        </svg>
+                        {{ link.title|default:link_key }}
+                      </a>
+                    </li>
                 {% endfor %}
                 </ul>
-            </li>
+
             {% endfor %}
             {% endif %}
         </ul>
 
         <ul class="menu-list menu-list-bottom">
             <li data-toggle="collapse" data-target="#auth-control" class="collapsed">
-                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
+                <a>
+                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 mr-2 ml-3 bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" 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>
+                  Authentication
+                </a>
+              <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
             </li>
             <ul class="sub-menu collapse out" id="auth-control">
                 <li {% if not user.is_authenticated %}class="active"{% endif %}><a data-auth="none" href="#">none</a></li>
@@ -31,7 +59,13 @@
             </ul>
 
             <li data-toggle="collapse" data-target="#language-control" class="collapsed">
-                <a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">{{ langs | first }}</span>
+                <a>
+                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 ml-3 mr-2 bi bi-code-slash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0zm-.999-3.124a.5.5 0 0 1 .33.625l-4 13a.5.5 0 0 1-.955-.294l4-13a.5.5 0 0 1 .625-.33z"/>
+                  </svg>
+                  Source Code
+                </a>
+              <span id="selected-language">{{ langs | first }}</span>
             </li>
             <ul class="sub-menu collapse out" id="language-control">
             {% for lang in langs %}