adds button icons

src/main/resources/templates/pub/index.html

@@ -102,6 +102,7 @@
             width: 5px;
             height: 5px;
             font-size: large;
+            color: #000
         }
 
         .tooltip {
@@ -143,13 +144,13 @@
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
                 <label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label>
                 <input type="text" readonly id="overlayId" style="flex-grow: 1"/>
-                <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button>
+                <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">?</button>
+                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">?</button>
+                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
         </div>
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice  <a>🞃</a></button>
@@ -172,7 +173,7 @@
 
             <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
             <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
-            <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
+            <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>