Use Bootstrap icons instead of emoji

Author: StanFromIreland

codespeed/static/css/main.css

@@ -98,12 +98,15 @@ ul#links {
 }
 ul#links li { margin-left: 0.25em; }
 ul#links li a:link, ul#links li a:visited {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
     padding: 0.35em 0.75em;
     color: var(--text-muted);
     border-radius: var(--radius-sm);
     text-decoration: none;
 }
+ul#links li a svg { width: 1.05em; height: 1.05em; overflow: visible; stroke: currentColor; stroke-width: 0.6; stroke-linejoin: round; }
 ul#links li a:hover, ul#links li a:focus {
     color: var(--text);
     background-color: var(--surface-alt);
@@ -215,7 +218,14 @@ div#configbar span.options { padding-right: 1.8em; font-size: 0.9em; white-space
 div#configbar input { margin-right: 0; vertical-align: middle; }
 div#configbar select { margin: 0 0.3em; }
 
-div#contentnav a { font-size: 0.9em; padding-bottom: 0.25em; }
+div#contentnav a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+    font-size: 0.9em;
+    padding-bottom: 0.25em;
+}
+div#contentnav a svg { width: 1.1em; height: 1.1em; }
 div#contentnav #previous { float: left; }
 div#contentnav #next { float: right; }
 
@@ -263,15 +273,21 @@ div.about_content p, div.about_content li, div.about_content h2, div.about_conte
 a.togglefold { color: var(--text); font-weight: 500; }
 a.togglefold:hover { text-decoration: none; }
 a.togglefold::before {
-    content: '▶';
+    /* Bootstrap Icons chevron-right (MIT, twbs/icons), coloured via mask */
+    content: '';
     display: inline-block;
+    width: 0.8em;
+    height: 0.8em;
     margin-right: 0.35em;
-    font-size: 0.65em;
-    color: var(--text-faint);
+    vertical-align: -0.05em;
+    background-color: var(--text-muted);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' 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-.708'/%3E%3C/svg%3E") no-repeat center / contain;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' 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-.708'/%3E%3C/svg%3E") no-repeat center / contain;
     transition: transform 0.15s ease;
     transform: rotate(90deg);
 }
 a.togglefold.folded::before { transform: rotate(0deg); }
+a.togglefold:hover::before { background-color: var(--text); }
 .checklinks { font-size: 0.85em; color: var(--text-faint); }
 a.checkall, a.uncheckall { color: var(--text-faint); }
 a.checkall:hover, a.uncheckall:hover { color: var(--accent); }

codespeed/templates/codespeed/base.html

@@ -21,8 +21,9 @@
           </a>
           <h2>{% block page_title %}SPEED CENTER{% endblock page_title %}</h2>
           {% block top_nav %}
+            {# Icons: Bootstrap Icons house-door and info-circle (MIT, twbs/icons) #}
             <ul id="links" class="inline">
-                <li><a href="{% url 'home' %}">Home</a></li><li><a href="{% url 'about' %}">About</a></li>
+                <li><a href="{% url 'home' %}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4z"/></svg>Home</a></li><li><a href="{% url 'about' %}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>About</a></li>
             </ul>
           {% endblock top_nav %}
         {% endblock page_header %}

codespeed/templates/codespeed/changes_table.html

@@ -1,8 +1,9 @@
 {% load percentages %}
 
 <div id="contentnav">
-  {% if prev %}<a id="previous" href="#" data-revision="{{ prev.rev }}" data-desc="{{ prev.desc }}">← {{ prev.short_rev }}{% if prev.summary %} ({{ prev.summary }}){% endif %}</a>{% endif %}
-  {% if next %}<a id="next" href="#" data-revision="{{ next.rev }}" data-desc="{{ next.desc }}">{{ next.short_rev }}{% if next.summary %} ({{ next.summary }}){% endif %} →</a>{% endif %}
+  {% comment %}Arrows are Bootstrap Icons arrow-left / arrow-right (MIT, twbs/icons){% endcomment %}
+  {% if prev %}<a id="previous" href="#" data-revision="{{ prev.rev }}" data-desc="{{ prev.desc }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/></svg>{{ prev.short_rev }}{% if prev.summary %} ({{ prev.summary }}){% endif %}</a>{% endif %}
+  {% if next %}<a id="next" href="#" data-revision="{{ next.rev }}" data-desc="{{ next.desc }}">{{ next.short_rev }}{% if next.summary %} ({{ next.summary }}){% endif %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg></a>{% endif %}
 </div>
 
 {% for units in tablelist %}