Adding comment form info icons

Author: SteveWilkes

_includes/comments/new.html

@@ -23,13 +23,17 @@
 
             <input type="text" id="identity" name="identity" class="form-input"
                    placeholder="email/@twitter/github" value="" />
-            <span class="info-circle" title="Identity is only used to generate an avatar. It is not submitted with the form."></span>
+            <span class="icon-wrapper" title="Identity is only used to generate an avatar. It is not submitted with the form.">
+                {% include icons/info.html %}
+            </span>
 
             <input id="comment-submit" type="submit" value="Add comment" />
 
             <div id="remember-me">
                 <input type="checkbox" id="remember" name="remember"><label for="remember">Remember me</label>
-                <span class="info-circle" title="Stores your name and email in the browser so you don't have to fill out the form again. This does not set a cookie."></span>
+                <span title="Stores your name and email in the browser so you don't have to fill out the form again. This does not set a cookie.">
+                    {% include icons/info.html %}
+                </span>
             </div>
         </div>
 

_includes/icons/info.html

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" class="info-icon svg-inline--fa fa-info-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>
+<!--
+Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

_sass/_comments.scss

@@ -80,3 +80,20 @@
 #comment-count {
     padding: 8px;
 }
+
+.info-icon {
+    color: $gray;
+    display: inline-block;
+    height: 18px;
+
+    &:hover {
+        color: $color-accent;
+    }
+}
+
+input + span.icon-wrapper {
+    left: -30px;
+    margin-right: -22px;
+    position: relative;
+    top: -48px;
+}