Switch from icon font to background-image

Context:

- The circle around the question mark in `icons/question.svg` is not rendered
  properly by the `node` backend in `icons/Gruntfile`.

- Switching to FontForge does allow the circle to show up, but it has the downside
  that other icons are rendered differently.

- We wanted to use an icon font for all icons going forward, but even after
  @neynah and I tried a few variations of her SVG file, the `node` renderer could
  not draw the circle around the question mark.

- Asheesh will be away for about 2.5 weeks starting very soon, so does not have
  time right now to root-cause the issue with the nodejs-backed svg2ttf package
  that our conversion pipeline depends on.

Therefore, this partially reverts:

- commit 561c2f4bce
- commit 3fef0cd034

Refs #2102

.gitignore

@@ -26,6 +26,7 @@ shell/public/menu.svg
 shell/public/notification.svg
 shell/public/open-grain.svg
 shell/public/plus-*.svg
+shell/public/question-*.svg
 shell/public/restart.svg
 shell/public/restore.svg
 shell/public/restore-*.svg

Makefile

@@ -61,6 +61,8 @@ IMAGES= \
     shell/public/notification.svg \
     shell/public/open-grain.svg \
     shell/public/people.svg \
+    shell/public/question-727272.svg \
+    shell/public/question-a9a9a9.svg \
     shell/public/restart.svg \
     shell/public/restore.svg \
     shell/public/settings.svg \
@@ -316,6 +318,14 @@ shell/public/email-494949.svg: icons/email.svg
 	@$(call color,custom color $<)
 	@sed -e 's/#111111/#494949/g' < $< > $@
 
+shell/public/question-a9a9a9.svg: icons/question.svg
+	@$(call color,custom color $<)
+	@sed -e 's/#111111/#A9A9A9/g' < $< > $@
+
+shell/public/question-727272.svg: icons/question.svg
+	@$(call color,custom color $<)
+	@sed -e 's/#111111/#727272/g' < $< > $@
+
 shell/public/%-m.svg: icons/%.svg
 	@$(call color,color for light background $<)
 	@# Make completely black.

icons/question.svg

@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><defs><style>.cls-1{fill:#111;}</style></defs><title>question</title><path class="cls-1" d="M12.5,2.38a9.86,9.86,0,1,0,9.86,9.86A9.86,9.86,0,0,0,12.5,2.38Zm6.44,16.3a9.1,9.1,0,1,1,2.67-6.44A9.07,9.07,0,0,1,18.94,18.68Z"/><path class="cls-1" d="M11.35,15.43a4.92,4.92,0,0,1,.29-1.85,4.86,4.86,0,0,1,1.14-1.52,8.72,8.72,0,0,0,1.08-1.18,2.06,2.06,0,0,0,.35-1.15,1.76,1.76,0,0,0-.41-1.25A1.56,1.56,0,0,0,12.61,8a1.72,1.72,0,0,0-1.21.42,1.48,1.48,0,0,0-.46,1.14H8.82A3.13,3.13,0,0,1,9.87,7.16a4,4,0,0,1,2.74-.9,3.93,3.93,0,0,1,2.74.89,3.19,3.19,0,0,1,1,2.49A4.08,4.08,0,0,1,15,12.45l-1.08,1.06a2.89,2.89,0,0,0-.59,1.92h-2ZM11.2,18.14a1.12,1.12,0,0,1,.32-0.83A1.19,1.19,0,0,1,12.4,17a1.18,1.18,0,0,1,.88.33,1.12,1.12,0,0,1,.32.82,1.1,1.1,0,0,1-.31.8,1.19,1.19,0,0,1-.89.32,1.17,1.17,0,0,1-.89-0.32A1.11,1.11,0,0,1,11.2,18.14Z"/></svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><defs><style>.cls-1{fill:#111111;}</style></defs><title>question</title><path class="cls-1" d="M12.5,2.38a9.86,9.86,0,1,0,9.86,9.86A9.86,9.86,0,0,0,12.5,2.38Zm6.44,16.3a9.1,9.1,0,1,1,2.67-6.44A9.07,9.07,0,0,1,18.94,18.68Z"/><path class="cls-1" d="M11.35,15.43a4.92,4.92,0,0,1,.29-1.85,4.86,4.86,0,0,1,1.14-1.52,8.72,8.72,0,0,0,1.08-1.18,2.06,2.06,0,0,0,.35-1.15,1.76,1.76,0,0,0-.41-1.25A1.56,1.56,0,0,0,12.61,8a1.72,1.72,0,0,0-1.21.42,1.48,1.48,0,0,0-.46,1.14H8.82A3.13,3.13,0,0,1,9.87,7.16a4,4,0,0,1,2.74-.9,3.93,3.93,0,0,1,2.74.89,3.19,3.19,0,0,1,1,2.49A4.08,4.08,0,0,1,15,12.45l-1.08,1.06a2.89,2.89,0,0,0-.59,1.92h-2ZM11.2,18.14a1.12,1.12,0,0,1,.32-0.83A1.19,1.19,0,0,1,12.4,17a1.18,1.18,0,0,1,.88.33,1.12,1.12,0,0,1,.32.82,1.1,1.1,0,0,1-.31.8,1.19,1.19,0,0,1-.89.32,1.17,1.17,0,0,1-.89-0.32A1.11,1.11,0,0,1,11.2,18.14Z"/></svg>

shell/client/styles/_grainlist.scss

@@ -8,26 +8,21 @@
   color: $grainlist-foreground-color;
 
   .question-mark {
-    /* Disable default button coloring. */
-    background-color: inherit;
-    border-radius: 0;
+    @extend %button-base;
+    @extend %button-secondary;
     border: none;
+    background-color: inherit;
+    background-image: url("/question-a9a9a9.svg");
+    background-size: 24px 24px;
+    background-position: center;
+    display: inline-block;
+    width: 24px;
+    height: 24px;
     vertical-align: top;
-    padding: 0;
-
-    /* Borrow the ::before styles from this class. */
-    @extend .icon-question;
-
-    /* And color them accordingly. */
-    &:hover::before {
-      color: #727272;
-    }
-
-    &::before {
-      @extend .icon;
-      font-size: 24px;
-      color: #A9A9A9;
-    }
+  }
+  .question-mark:hover {
+    background-image: url("/question-727272.svg");
+    background-color: inherit;
   }
 
   >.top-row>.non-usage-info {