styling for hint icon

themes/grav/css-compiled/preset.css

@@ -1514,4 +1514,7 @@ span.range-append {
 .jqCron-container.disable .jqCron-selector-title {
   background: #ffffff !important; }
 
+.hint-icon {
+  color: #06A599; }
+
 /*# sourceMappingURL=preset.css.map */

themes/grav/css-compiled/template.css

@@ -1004,6 +1004,10 @@ form label {
     margin: 0; }
   form label [data-hint] {
     display: inline; }
+  form label .hint-icon {
+    opacity: 0.7; }
+  form label:hover .hint-icon {
+    opacity: 1.0; }
   form label.inline {
     display: inline;
     vertical-align: middle;

themes/grav/scss/preset.scss

@@ -2366,3 +2366,7 @@ body .bootstrap-datetimepicker-widget {
 .jqCron-container.disable .jqCron-selector-title {
     background: $content-bg !important;
 }
+
+.hint-icon {
+  color: $notice_bg;
+}

themes/grav/scss/template/_forms.scss

@@ -164,6 +164,13 @@ form {
             display: inline;
         }
 
+        .hint-icon {
+          opacity: 0.7;
+        }
+        &:hover .hint-icon {
+          opacity: 1.0;
+        }
+
         &.inline {
             display: inline;
             vertical-align: middle;
@@ -484,7 +491,6 @@ form {
             position: relative;
             padding: 0 0 0 2rem;
             margin-right: 15px;
-
         }
         label:before {
             content:"";

themes/grav/templates/forms/field.html.twig

@@ -48,7 +48,7 @@
                         {% if field.markdown %}
                             <span class="hint--bottom" data-hint="{{ field.help|t|markdown(false) }}">{{ field.label|t|markdown(false)|raw }}</span>
                         {% else %}
-                            <span class="hint--bottom" data-hint="{{ field.help|t }}">{{ field.label|t|raw }} <i class="fa fa-info-circle" aria-hidden="true"></i></span>
+                            <span class="hint--bottom" data-hint="{{ field.help|t }}">{{ field.label|t|raw }} <i class="hint-icon fa fa-question-circle" aria-hidden="true"></i></span>
                         {% endif %}
                     {% else %}
                         {% if field.markdown %}