use svg icons for gpg popovers

app/assets/stylesheets/pages/commits.scss

@@ -304,16 +304,30 @@
 }
 
 .gpg-popover-icon {
-  font-size: 35px;
   // same margin as .s32.avatar
   margin-right: $btn-side-margin;
 
   &.valid {
-    color: $brand-success;
+    svg {
+      border: 1px solid $brand-success;
+
+      fill: $brand-success;
+    }
   }
 
   &.invalid {
-    color: $gray;
+    svg {
+      border: 1px solid $gray;
+
+      fill: $gray;
+    }
+  }
+
+  svg {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    vertical-align: middle;
   }
 }
 

app/views/projects/commit/_invalid_signature_badge.html.haml

 - title = capture do
-  %i{ class: 'fa fa-question-circle gpg-popover-icon invalid', 'aria-hidden' => 'true' }
+  .gpg-popover-icon.invalid
+    = render 'shared/icons/icon_status_notfound_borderless.svg'
   %div
     This commit was signed with an <strong>unverified</strong> signature.
 

app/views/projects/commit/_valid_signature_badge.html.haml

 - title = capture do
-  %i{ class: 'fa fa-check-circle gpg-popover-icon valid', 'aria-hidden' => 'true' }
+  .gpg-popover-icon.valid
+    = render 'shared/icons/icon_status_success_borderless.svg'
   %div
     This commit was signed with a <strong>verified</strong> signature.