Use FontAwesome icons

Author: wilzbach

css/style.css

@@ -1727,6 +1727,19 @@ input.editButton:active
 }
 input.resetButton{display: none}
 
+.editButton, .openInEditorButton, .runButton, .resetButton {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    color: #333;
+    background: white;
+    border: 1px solid #CCC;
+    border-radius: 4px;
+    padding: 0.3em 0.6em;
+    display: inline-block;
+    text-decoration: none;
+}
+
 /* Style for the example run buttons on the Phobos library documentation */
 .d_example_buttons {
     text-align: left;

js/run.js

@@ -229,10 +229,10 @@ function setupTextarea(el, opts)
         return (parseInt(par.css('height')) - diff) + 'px';
     };
 
-    var runBtn = parent.children("input.runButton");
-    var editBtn = parent.children("input.editButton");
-    var resetBtn = parent.children("input.resetButton");
-    var openInEditorBtn = parent.children("input.openInEditorButton");
+    var runBtn = parent.children(".runButton");
+    var editBtn = parent.children(".editButton");
+    var resetBtn = parent.children(".resetButton");
+    var openInEditorBtn = parent.children(".openInEditorButton");
 
     var code = $(editor.getWrapperElement());
     code.css('display', 'none');

js/run_examples.js

@@ -72,10 +72,10 @@ $(document).ready(function()
         currentExample.replaceWith(
                 '<div>'
                     + '<div class="d_example_buttons">'
-                        + '<input type="button" class="editButton" value="Edit">'
-                        + '<input type="button" class="openInEditorButton" value="Edit (external)" style="width: 90px">'
-                        + '<input type="button" class="runButton" value="Run">'
-                        + '<input type="button" class="resetButton" value="Reset">'
+          + '<div class="editButton"><i class="fa fa-edit" aria-hidden="true"></i> Edit</div>'
+          + '<div class="openInEditorButton"><i class="fa fa-external-link" aria-hidden="true"></i> Edit (external)</div>'
+          + '<div class="runButton"><i class="fa fa-play" aria-hidden="true"></i> Run</div>'
+          + '<div class="resetButton"><i class="fa fa-undo " aria-hidden="true"></i> Reset</div>'
                     + '</div>'
                     + '<div class="d_code">'
                         + '<pre class="d_code">'+orig+'</pre>'