Replace fa-certificate with first-contribution SVG

- Replace fontawesome icon for
first contribution with Gitlab SVGG

app/assets/stylesheets/fontawesome_custom.scss

@@ -80,31 +80,6 @@
   }
 }
 
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-1x {
-  line-height: inherit;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
 .fa-inverse {
   color: $white;
 }
@@ -256,10 +231,6 @@
   content: '\f111';
 }
 
-.fa-certificate::before {
-  content: '\f0a3';
-}
-
 .fa-bitbucket::before {
   content: '\f171';
 }

app/helpers/issuables_helper.rb

@@ -205,7 +205,7 @@ module IssuablesHelper
       author_output
     end
 
-    output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip gl-ml-2', title: _('1st contribution!'))
+    output << content_tag(:span, (sprite_icon('first-contribution', size: 16, css_class: 'gl-icon gl-vertical-align-middle') if issuable.first_contribution?), class: 'has-tooltip gl-ml-2', title: _('1st contribution!'))
 
     output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block gl-ml-3")
     output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "d-md-none")
@@ -247,13 +247,6 @@ module IssuablesHelper
     html.html_safe
   end
 
-  def issuable_first_contribution_icon
-    content_tag(:span, class: 'fa-stack') do
-      concat(icon('certificate', class: "fa-stack-2x"))
-      concat(content_tag(:strong, '1', class: 'fa-inverse fa-stack-1x'))
-    end
-  end
-
   def assigned_issuables_count(issuable_type)
     case issuable_type
     when :issues

app/views/projects/notes/_actions.html.haml

 - access = note_max_access_for_user(note)
 - if note.has_special_role?(Note::SpecialRole::FIRST_TIME_CONTRIBUTOR)
   %span.note-role.note-role-special.has-tooltip{ title: _("This is the author's first Merge Request to this project.") }
-    = issuable_first_contribution_icon
+    = sprite_icon('first-contribution', size: 16, css_class: 'gl-icon gl-vertical-align-top')
 - if access.nonzero?
   %span.note-role.user-access-role= Gitlab::Access.human_access(access)
 

changelogs/unreleased/225921-replace-fa-certificate-icons-with-gitlab-svg-first-contribution-ic.yml

+---
+title: Replace fa-certificate icon with first-contribution svg
+merge_request: 38154
+author:
+type: changed