Merge branch '225958-replace-fa-question-circle-icons-with-gitlab-svg-question-icon' into 'master'

Replace fa-question-circle icons with GitLab SVG question-o icon

Closes #225958

See merge request gitlab-org/gitlab!41970

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { __ } from '../../locale';
 import { deprecatedCreateFlash as createFlash } from '../../flash';
 import Api from '../../api';
@@ -8,6 +8,7 @@ import Dropdown from './dropdown.vue';
 
 export default {
   components: {
+    GlIcon,
     GlLink,
     GlSprintf,
     Dropdown,
@@ -136,7 +137,7 @@ export default {
           target="_blank"
         >
           <span class="sr-only">{{ __('Read more') }}</span>
-          <i class="fa fa-question-circle" aria-hidden="true"></i>
+          <gl-icon name="question-o" />
         </gl-link>
       </p>
     </div>

app/assets/javascripts/jobs/components/sidebar_detail_row.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   name: 'SidebarDetailRow',
   components: {
+    GlIcon,
     GlLink,
   },
   props: {
@@ -37,7 +38,7 @@ export default {
     <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
     <span v-if="hasHelpURL" class="help-button float-right">
       <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
-        <i class="fa fa-question-circle" aria-hidden="true"></i>
+        <gl-icon name="question-o" />
       </gl-link>
     </span>
   </p>

app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     label: {
       type: String,
@@ -25,7 +30,7 @@ export default {
     <label v-if="label" class="label-bold">
       {{ label }}
       <a v-if="helpPath" :href="helpPath" target="_blank">
-        <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i>
+        <gl-icon name="question-o" />
       </a>
     </label>
     <span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -106,7 +106,7 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true)">
-        <i class="fa fa-question-circle" aria-hidden="true"> </i>
+        <gl-icon name="question-o" />
       </div>
       <div
         v-if="showHelpState"

app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue

 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { __ } from '../../locale';
 
@@ -9,6 +9,7 @@ export default {
     tooltipTitle: __('A user with write access to the source branch selected this option'),
   },
   components: {
+    GlIcon,
     GlSprintf,
   },
   directives: {
@@ -26,12 +27,11 @@ export default {
         </template>
       </gl-sprintf>
     </span>
-    <i
+    <gl-icon
       v-tooltip
       :title="$options.i18n.tooltipTitle"
       :aria-label="$options.i18n.tooltipTitle"
-      class="fa fa-question-circle"
-    >
-    </i>
+      name="question-o"
+    />
   </p>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -9,6 +10,7 @@ export default {
     tooltip,
   },
   components: {
+    GlIcon,
     statusIcon,
   },
   props: {
@@ -50,7 +52,7 @@ export default {
       <span class="bold js-branch-text">
         <span class="capitalize"> {{ missingBranchName }} </span>
         {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
-        <i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i>
+        <gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" />
       </span>
     </div>
   </div>

app/assets/stylesheets/fontawesome_custom.scss

@@ -84,10 +84,6 @@
   color: $white;
 }
 
-.fa-question-circle::before {
-  content: '\f059';
-}
-
 .fa-chevron-down::before {
   content: '\f078';
 }

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -41,15 +41,6 @@
       width: 20%;
     }
 
-    .fa,
-    svg {
-      color: $cycle-analytics-light-gray;
-
-      &:hover {
-        color: $gl-text-color;
-      }
-    }
-
     .stage-header {
       width: 20.5%;
     }

app/assets/stylesheets/pages/dev_ops_report.scss

@@ -25,6 +25,10 @@ $space-between-cards: 8px;
     margin-left: 8px;
     font-weight: $gl-font-weight-normal;
 
+    .devops-header-icon {
+      vertical-align: px-to-rem(-$gl-spacing-scale-1);
+    }
+
     a {
       font-size: 18px;
       color: $gl-text-color-secondary;

app/views/admin/application_settings/_ci_cd.html.haml

@@ -34,13 +34,13 @@
       = f.number_field :max_artifacts_size, class: 'form-control'
       .form-text.text-muted
         = _("Set the maximum file size for each job's artifacts")
-        = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
+        = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
     .form-group
       = f.label :default_artifacts_expire_in, _('Default artifacts expiration'), class: 'label-bold'
       = f.text_field :default_artifacts_expire_in, class: 'form-control'
       .form-text.text-muted
         = html_escape(_("Set the default expiration time for each job's artifacts. 0 for unlimited. The default unit is in seconds, but you can define an alternative. For example: %{code_open}4 mins 2 sec%{code_close}, %{code_open}2h42min%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-        = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
+        = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
     .form-group
       = f.label :archive_builds_in_human_readable, _('Archive jobs'), class: 'label-bold'
       = f.text_field :archive_builds_in_human_readable, class: 'form-control', placeholder: 'never'
@@ -58,6 +58,6 @@
       = f.text_field :default_ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
       %p.form-text.text-muted
         = _("The default CI configuration path for new projects.").html_safe
-        = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
+        = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
 
   = f.submit _('Save changes'), class: "btn btn-success"

app/views/admin/application_settings/_diff_limits.html.haml

@@ -9,7 +9,7 @@
         Diff files surpassing this limit will be presented as 'too large'
         and won't be expandable.
 
-        = link_to icon('question-circle'),
+        = link_to sprite_icon('question-o'),
           help_page_path('user/admin_area/diff_limits',
           anchor: 'maximum-diff-patch-size')
   .gl-display-flex.gl-justify-content-end

app/views/admin/application_settings/_external_authorization_service_form.html.haml

@@ -19,7 +19,7 @@
               = _('Enable classification control using an external service')
           %span.form-text.text-muted
             = external_authorization_description
-            = link_to icon('question-circle'), help_page_path('user/admin_area/settings/external_authorization')
+            = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/external_authorization')
         .form-group
           = f.label :external_authorization_service_url, _('Service URL'), class: 'label-bold'
           = f.text_field :external_authorization_service_url, class: 'form-control'

app/views/admin/application_settings/_grafana.html.haml

@@ -4,7 +4,7 @@
   %fieldset
     %p
       = _("Add a Grafana button in the admin sidebar, monitoring section, to access a variety of statistics on the health and performance of GitLab.")
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/grafana_configuration.md')
+      = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/performance/grafana_configuration.md')
     .form-group
       .form-check
         = f.check_box :grafana_enabled, class: 'form-check-input'

app/views/admin/application_settings/_pages.html.haml

@@ -14,7 +14,7 @@
           = _("Require users to prove ownership of custom domains")
       .form-text.text-muted
         = _("Domain verification is an essential security measure for public GitLab sites. Users are required to demonstrate they control a domain before it is enabled")
-        = link_to icon('question-circle'), help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index.md', anchor: '4-verify-the-domains-ownership')
+        = link_to sprite_icon('question-o'), help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index.md', anchor: '4-verify-the-domains-ownership')
     - if Gitlab.config.pages.access_control
       .form-group
         .form-check
@@ -23,7 +23,7 @@
             = _("Disable public access to Pages sites")
         .form-text.text-muted
           = _("Access to Pages websites are controlled based on the user's membership to a given project. By checking this box, users will be required to be logged in to have access to all Pages websites in your instance.")
-          = link_to icon('question-circle'), help_page_path('administration/pages/index.md', anchor: 'disabling-public-access-to-all-pages-websites')
+          = link_to sprite_icon('question-o'), help_page_path('administration/pages/index.md', anchor: 'disabling-public-access-to-all-pages-websites')
     %h5
       = _("Configure Let's Encrypt")
     %p

app/views/admin/application_settings/_performance.html.haml

@@ -13,7 +13,7 @@
           to authenticate SSH keys via the database file. Only uncheck this
           if you have configured your OpenSSH server to use the
           AuthorizedKeysCommand. Click on the help icon for more details.
-          = link_to icon('question-circle'), help_page_path('administration/operations/fast_ssh_key_lookup')
+          = link_to sprite_icon('question-o'), help_page_path('administration/operations/fast_ssh_key_lookup')
 
     .form-group
       = f.label :raw_blob_request_limit, _('Raw blob request rate limit per minute'), class: 'label-bold'

app/views/admin/application_settings/_prometheus.html.haml

@@ -10,7 +10,7 @@
       \. This setting requires a
       = link_to 'restart', help_page_path('administration/restart_gitlab')
       to take effect.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index')
+      = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/prometheus/index')
     .form-group
       .form-check
         = f.check_box :prometheus_metrics_enabled, class: 'form-check-input'
@@ -22,7 +22,7 @@
             Environment variable
             %code prometheus_multiproc_dir
             does not exist or is not pointing to a valid directory.
-            = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
+            = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
     .form-group
       = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'label-bold'
       = f.number_field :metrics_method_call_threshold, class: 'form-control'

app/views/admin/application_settings/_realtime.html.haml

@@ -12,7 +12,6 @@
         The multiplier can also have a decimal value.
         The default value (1) is a reasonable choice for the majority of GitLab
         installations. Set to 0 to completely disable polling.
-        = link_to icon('question-circle'), help_page_path('administration/polling')
+        = link_to sprite_icon('question-o'), help_page_path('administration/polling')
 
   = f.submit 'Save changes', class: "btn btn-success"
-

app/views/admin/application_settings/_registry.html.haml

@@ -10,10 +10,10 @@
         = f.check_box :container_expiration_policies_enable_historic_entries, class: 'form-check-input'
         = f.label :container_expiration_policies_enable_historic_entries, class: 'form-check-label' do
           = _("Enable container expiration and retention policies for projects created earlier than GitLab 12.7.")
-          = link_to icon('question-circle'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy')
+          = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy')
         .form-text.text-muted
           = _("Existing projects will be able to use expiration policies. Avoid enabling this if an external Container Registry is being used, as there is a performance risk if many images exist on one project.")
-          = link_to icon('question-circle'), help_page_path('user/packages/container_registry/index', anchor: 'use-with-external-container-registries')
+          = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/index', anchor: 'use-with-external-container-registries')
     - if limit_delete_tags_service?
       .form-group
         = f.label :container_registry_delete_tags_service_timeout, _('Cleanup policy maximum processing time (seconds)'), class: 'label-bold'

app/views/admin/application_settings/_repository_mirrors_form.html.haml

@@ -10,7 +10,7 @@
           = _('Allow repository mirroring to be configured by project maintainers')
       %span.form-text.text-muted
         = _('If disabled, only admins will be able to configure repository mirroring.')
-        = link_to icon('question-circle'), help_page_path('user/project/repository/repository_mirroring.md')
+        = link_to sprite_icon('question-o'), help_page_path('user/project/repository/repository_mirroring.md')
 
     = render_if_exists 'admin/application_settings/mirror_settings', form: f
 

app/views/admin/application_settings/_repository_storage.html.haml

@@ -16,7 +16,7 @@
         .form-text
           %p.text-secondary
             = _('Enter weights for storages for new repositories.')
-            = link_to icon('question-circle'), help_page_path('administration/repository_storage_paths')
+            = link_to sprite_icon('question-o'), help_page_path('administration/repository_storage_paths')
         .form-check
           - storage_weights.each do |attribute|
             = f.text_field attribute[:name], class: 'form-text-input', value: attribute[:value]

app/views/admin/application_settings/_signin.html.haml

@@ -38,7 +38,7 @@
         = f.check_box :notify_on_unknown_sign_in, class: 'form-check-input'
         = f.label :notify_on_unknown_sign_in, class: 'form-check-label' do
           = _('Notify users by email when sign-in location is not recognized')
-          = link_to icon('question-circle'),
+          = link_to sprite_icon('question-o'),
           'https://docs.gitlab.com/ee/user/profile/unknown_sign_in_notification.html',
           target: '_blank'
     .form-group

app/views/admin/application_settings/ci/_header.html.haml

@@ -2,7 +2,7 @@
 
 %h4
   = _('Variables')
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables'), target: '_blank', rel: 'noopener noreferrer'
+  = link_to sprite_icon('question-o', css_class: 'gl-vertical-align-baseline!'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables'), target: '_blank', rel: 'noopener noreferrer'
 
 %button.btn.btn-default.js-settings-toggle{ type: 'button' }
   = expanded ? _('Collapse') : _('Expand')

app/views/admin/application_settings/metrics_and_profiling.html.haml

@@ -32,7 +32,7 @@
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
       = _('Enable access to the Performance Bar for a given group.')
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/performance_bar')
+      = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/performance/performance_bar')
   .settings-content
     = render 'performance_bar'
 

app/views/admin/cohorts/_cohorts_table.html.haml

@@ -2,7 +2,7 @@
 .bs-callout.clearfix
   %p
     = s_("Cohorts|User cohorts are shown for the last %{months_included} months. Only users with activity are counted in the 'New users' column; inactive users are counted separately.") % { months_included: @cohorts[:months_included] }
-    = link_to icon('question-circle'), help_page_path('user/admin_area/analytics/user_cohorts', anchor: 'cohorts'), title: 'About this feature', target: '_blank'
+    = link_to sprite_icon('question-o'), help_page_path('user/admin_area/analytics/user_cohorts', anchor: 'cohorts'), title: 'About this feature', target: '_blank'
 
 .table-holder.d-xl-table
   %table.table

app/views/admin/dev_ops_report/show.html.haml

@@ -19,7 +19,7 @@
           = _('DevOps')
           %br
           = _('Score')
-          = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/admin_area/analytics/dev_ops_report')
+          = link_to sprite_icon('question-o', css_class: 'devops-header-icon'), help_page_path('user/admin_area/analytics/dev_ops_report')
 
       .devops-cards.board-card-container
         - @metric.cards.each do |card|

app/views/admin/groups/show.html.haml

@@ -57,7 +57,7 @@
           %span.light= _('Group Git LFS status:')
           %strong
             = group_lfs_status(@group)
-            = link_to icon('question-circle'), help_page_path('topics/git/lfs/index')
+            = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
 
         = render_if_exists 'namespaces/shared_runner_status', namespace: @group
 

app/views/admin/projects/show.html.haml

@@ -100,7 +100,7 @@
               = _('Git LFS status:')
             %strong
               = project_lfs_status(@project)
-              = link_to icon('question-circle'), help_page_path('topics/git/lfs/index')
+              = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
         - else
           %li
             %span.light
@@ -165,7 +165,7 @@
             - else
               = _("This repository was last checked %{last_check_timestamp}. The check passed.") % { last_check_timestamp: @project.last_repository_check_at.to_s(:medium) }
 
-            = link_to icon('question-circle'), help_page_path('administration/repository_checks')
+            = link_to sprite_icon('question-o'), help_page_path('administration/repository_checks')
 
           .form-group
             = f.submit _('Trigger repository check'), class: 'btn btn-primary'

app/views/ci/variables/_header.html.haml

@@ -2,7 +2,7 @@
 
 %h4
   = _('Variables')
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables'), target: '_blank', rel: 'noopener noreferrer'
+  = link_to sprite_icon('question-o', css_class: 'gl-vertical-align-baseline!'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables'), target: '_blank', rel: 'noopener noreferrer'
 
 %button.btn.btn-default.js-settings-toggle{ type: 'button' }
   = expanded ? _('Collapse') : _('Expand')

app/views/ci/variables/_variable_row.html.haml

@@ -39,7 +39,7 @@
         = value
       %p.masking-validation-error.gl-field-error.hide
         = s_("CiVariables|Cannot use Masked Variable with current value")
-        = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to sprite_icon('question-o'), help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
       .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
         .gl-mr-3

app/views/groups/_group_admin_settings.html.haml

@@ -7,7 +7,7 @@
       = f.label :lfs_enabled, class: 'form-check-label' do
         %strong
           Allow projects within this group to use Git LFS
-          = link_to icon('question-circle'), help_page_path('topics/git/lfs/index')
+          = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
         %br/
         %span This setting can be overridden in each project.
 .form-group.row
@@ -31,7 +31,7 @@
       = f.label :require_two_factor_authentication, class: 'form-check-label' do
         %strong
           Require all users in this group to set up Two-factor authentication
-          = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
+          = link_to sprite_icon('question-o'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
 .form-group.row
   .offset-sm-2.col-sm-10
     .form-check

app/views/groups/settings/ci_cd/_form.html.haml

@@ -8,6 +8,6 @@
           = f.number_field :max_artifacts_size, class: 'form-control'
           %p.form-text.text-muted
             = _("Set the maximum file size for each job's artifacts")
-            = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
 
         = f.submit _('Save changes'), class: "btn btn-success"

app/views/import/manifest/_form.html.haml

@@ -16,7 +16,7 @@
     = file_field_tag :manifest, class: 'form-control-file w-auto', required: true
     .form-text.text-muted
       = _('Import multiple repositories by uploading a manifest file.')
-      = link_to icon('question-circle'), help_page_path('user/project/import/manifest')
+      = link_to sprite_icon('question-o'), help_page_path('user/project/import/manifest')
 
   .gl-mb-3
     = submit_tag _('List available repositories'), class: 'btn btn-success'

app/views/profiles/preferences/_sourcegraph.html.haml

@@ -14,7 +14,7 @@
 .col-lg-8
   %label.label-bold
     = s_('Preferences|Sourcegraph')
-  = link_to icon('question-circle'), help_page_path('user/profile/preferences.md', anchor: 'sourcegraph'), target: '_blank', class: 'has-tooltip', title: _('More information')
+  = link_to sprite_icon('question-o'), help_page_path('user/profile/preferences.md', anchor: 'sourcegraph'), target: '_blank', class: 'has-tooltip', title: _('More information')
   .form-group.form-check
     = f.check_box :sourcegraph_enabled, class: 'form-check-input'
     = f.label :sourcegraph_enabled, class: 'form-check-label' do

app/views/profiles/show.html.haml

@@ -113,7 +113,7 @@
         - private_profile_label = capture do
           = s_("Profiles|Don't display activity-related personal information on your profiles")
         = f.check_box :private_profile, label: private_profile_label, inline: true, wrapper_class: 'mr-0'
-        = link_to icon('question-circle'), help_page_path('user/profile/index.md', anchor: 'private-profile')
+        = link_to sprite_icon('question-o'), help_page_path('user/profile/index.md', anchor: 'private-profile')
       %h5= s_("Profiles|Private contributions")
       = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
       .help-block

app/views/projects/_issuable_by_email.html.haml

@@ -37,9 +37,9 @@
           = render 'by_email_description'
         %p
           This is a private email address
-
-          %a{ href: 'https://docs.gitlab.com/ee/development/emails.html#email-namespace', target: "_blank", rel: "noopener" }
-            %i.fa.fa-question-circle{ 'aria-label': "Learn more about incoming email addresses" }
+          %span<
+            = link_to help_page_path('development/emails', anchor: 'email-namespace'), target: '_blank', rel: 'noopener', aria: { label: 'Learn more about incoming email addresses' } do
+              = sprite_icon('question-o')
 
           generated just for you.
 

app/views/projects/_merge_request_merge_checks_settings.html.haml

@@ -9,7 +9,7 @@
       = s_('ProjectSettings|Pipelines must succeed')
       .text-secondary
         = s_('ProjectSettings|Pipelines need to be configured to enable this feature.')
-        = link_to icon('question-circle'),
+        = link_to sprite_icon('question-o'),
           help_page_path('ci/merge_request_pipelines/index.md',
           anchor: 'pipelines-for-merge-requests'),
           target: '_blank'

app/views/projects/_merge_request_merge_suggestions_settings.html.haml

@@ -4,7 +4,7 @@
   %b= s_('ProjectSettings|Merge suggestions')
   %p.text-secondary
     = s_('ProjectSettings|The commit message used to apply merge request suggestions')
-    = link_to icon('question-circle'),
+    = link_to sprite_icon('question-o'),
       help_page_path('user/discussions/index.md',
       anchor: 'configure-the-commit-message-for-applied-suggestions'),
       target: '_blank'

app/views/projects/_new_project_fields.html.haml

@@ -47,7 +47,7 @@
 
 = f.label :visibility_level, class: 'label-bold' do
   = s_('ProjectsNew|Visibility Level')
-  = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
+  = link_to sprite_icon('question-o'), help_page_path('public_access/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
 = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
 
 - if !hide_init_with_readme

app/views/projects/ci/lints/show.html.haml

@@ -26,7 +26,7 @@
           - if Gitlab::Ci::Features.lint_creates_pipeline_with_dry_run?(@project)
             = check_box_tag(:dry_run, 'true', params[:dry_run])
             = label_tag(:dry_run, _('Simulate a pipeline created for the default branch'))
-            = link_to icon('question-circle'), help_page_path('ci/lint', anchor: 'pipeline-simulation'), target: '_blank', rel: 'noopener noreferrer'
+            = link_to sprite_icon('question-o'), help_page_path('ci/lint', anchor: 'pipeline-simulation'), target: '_blank', rel: 'noopener noreferrer'
         .float-right.prepend-top-10
           = button_tag(_('Clear'), type: 'button', class: 'btn btn-default clear-yml')
 

app/views/projects/cleanup/_show.html.haml

@@ -7,7 +7,7 @@
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Clean up after running %{filter_repo} on the repository" % { filter_repo: link_to_filter_repo }).html_safe
-      = link_to icon('question-circle'),
+      = link_to sprite_icon('question-o'),
           help_page_path('user/project/repository/reducing_the_repo_size_using_git.md'),
           target: '_blank', rel: 'noopener noreferrer'
 
@@ -28,4 +28,3 @@
 
       .gl-display-flex.gl-justify-content-end
         = f.submit _('Start cleanup'), class: 'btn btn-success'
-

app/views/projects/cycle_analytics/show.html.haml

@@ -40,19 +40,23 @@
               %li.stage-header.pl-5
                 %span.stage-name.font-weight-bold
                   {{ s__('ProjectLifecycle|Stage') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.median-header
                 %span.stage-name.font-weight-bold
                   {{ __('Median') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.event-header.pl-3
                 %span.stage-name.font-weight-bold
                   {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.total-time-header.pr-5.text-right
                 %span.stage-name.font-weight-bold
                   {{ __('Time') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
         .stage-panel-body
           %nav.stage-nav
             %ul

app/views/projects/default_branch/_show.html.haml

@@ -26,7 +26,7 @@
               %strong= _("Auto-close referenced issues on default branch")
             .form-text.text-muted
               = _("Issues referenced by merge requests and commits within the default branch will be closed automatically")
-              = link_to icon('question-circle'), help_page_path('user/project/issues/managing_issues.md', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
 
       .gl-display-flex.gl-justify-content-end
         = f.submit _('Save changes'), class: "btn btn-success"

app/views/projects/mirrors/_mirror_repos.html.haml

@@ -30,7 +30,7 @@
             .form-check.gl-mb-3
               = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
               = label_tag :only_protected_branches, _('Only mirror protected branches'), class: 'form-check-label'
-              = link_to icon('question-circle'), help_page_path('user/project/protected_branches'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('user/project/protected_branches'), target: '_blank'
 
           .panel-footer.gl-display-flex.gl-justify-content-end
             = f.submit _('Mirror repository'), class: 'btn btn-success js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror

app/views/projects/mirrors/_mirror_repos_push.html.haml

@@ -10,4 +10,4 @@
   .form-check.gl-mb-3
     = check_box_tag :keep_divergent_refs, '1', false, class: 'js-mirror-keep-divergent-refs form-check-input'
     = label_tag :keep_divergent_refs, _('Keep divergent refs'), class: 'form-check-label'
-    = link_to icon('question-circle'), help_page_path('user/project/repository/repository_mirroring', anchor: 'keep-divergent-refs'), target: '_blank'
+    = link_to sprite_icon('question-o'), help_page_path('user/project/repository/repository_mirroring', anchor: 'keep-divergent-refs'), target: '_blank'

app/views/projects/settings/ci_cd/_autodevops_form.html.haml

@@ -40,18 +40,18 @@
                   = form.radio_button :deploy_strategy, 'continuous', class: 'form-check-input'
                   = form.label :deploy_strategy_continuous, class: 'form-check-label' do
                     = s_('CICD|Continuous deployment to production')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/stages.md', anchor: 'auto-deploy'), target: '_blank'
+                    = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/stages.md', anchor: 'auto-deploy'), target: '_blank'
 
                 .form-check
                   = form.radio_button :deploy_strategy, 'timed_incremental', class: 'form-check-input'
                   = form.label :deploy_strategy_timed_incremental, class: 'form-check-label' do
                     = s_('CICD|Continuous deployment to production using timed incremental rollout')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/customize.md', anchor: 'timed-incremental-rollout-to-production'), target: '_blank'
+                    = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/customize.md', anchor: 'timed-incremental-rollout-to-production'), target: '_blank'
 
                 .form-check
                   = form.radio_button :deploy_strategy, 'manual', class: 'form-check-input'
                   = form.label :deploy_strategy_manual, class: 'form-check-label' do
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
+                    = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
 
           = f.submit _('Save changes'), class: "btn btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }

app/views/projects/settings/ci_cd/_form.html.haml

@@ -8,7 +8,7 @@
             = _("Git strategy for pipelines")
           %p
             = html_escape(_("Choose between %{code_open}clone%{code_close} or %{code_open}fetch%{code_close} to get the recent application code")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-            = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'git-strategy'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'git-strategy'), target: '_blank'
           .form-check
             = f.radio_button :build_allow_git_fetch, 'false', { class: 'form-check-input' }
             = f.label :build_allow_git_fetch_false, class: 'form-check-label' do
@@ -38,7 +38,7 @@
           = f.text_field :build_timeout_human_readable, class: 'form-control'
           %p.form-text.text-muted
             = _('If any job surpasses this timeout threshold, it will be marked as failed. Human readable time input language is accepted like "1 hour". Values without specification represent seconds.')
-            = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'timeout'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'timeout'), target: '_blank'
 
         - if can?(current_user, :update_max_artifacts_size, @project)
           %hr
@@ -47,7 +47,7 @@
             = f.number_field :max_artifacts_size, class: 'form-control'
             %p.form-text.text-muted
               = _("Set the maximum file size for each job's artifacts")
-              = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
 
         %hr
         .form-group
@@ -55,7 +55,7 @@
           = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
           %p.form-text.text-muted
             = html_escape(_("The path to the CI configuration file. Defaults to %{code_open}.gitlab-ci.yml%{code_close}")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-            = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
 
         %hr
         .form-group
@@ -65,7 +65,7 @@
               %strong= _("Public pipelines")
             .form-text.text-muted
               = _("Allow public access to pipelines and job details, including output logs and artifacts")
-              = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank'
             .bs-callout.bs-callout-info
               %p #{_("If enabled")}:
               %ul
@@ -86,7 +86,7 @@
               %strong= _("Auto-cancel redundant, pending pipelines")
             .form-text.text-muted
               = _("New pipelines will cancel older, pending pipelines on the same branch")
-              = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-pending-pipelines'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-pending-pipelines'), target: '_blank'
 
         .form-group
           .form-check
@@ -95,7 +95,7 @@
               %strong= _("Skip outdated deployment jobs")
             .form-text.text-muted
               = _("When a deployment job is successful, skip older deployment jobs that are still pending")
-              = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank'
 
         %hr
         .form-group
@@ -108,7 +108,7 @@
               .input-group-text /
           %p.form-text.text-muted
             = _("A regular expression that will be used to find the test coverage output in the job log. Leave blank to disable")
-            = link_to icon('question-circle'), help_page_path('ci/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
           .bs-callout.bs-callout-info
             %p= _("Below are examples of regex for existing tools:")
             %ul

app/views/shared/_old_visibility_level.html.haml

 .form-group.row
   .col-sm-2.col-form-label
     = _('Visibility level')
-    = link_to icon('question-circle'), help_page_path("public_access/public_access"), target: '_blank'
+    = link_to sprite_icon('question-o'), help_page_path('public_access/public_access'), target: '_blank'
   .col-sm-10
     = render 'shared/visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: can_change_visibility_level, form_model: form_model, with_label: with_label

app/views/shared/access_tokens/_table.html.haml

@@ -18,7 +18,7 @@
           %th= s_('AccessTokens|Created')
           %th
             = _('Last Used')
-            = link_to icon('question-circle'), help_page_path('user/profile/personal_access_tokens.md', anchor: 'token-activity'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('user/profile/personal_access_tokens.md', anchor: 'token-activity'), target: '_blank'
           %th= _('Expires')
           %th= _('Scopes')
           %th

app/views/shared/issuable/form/_merge_params.html.haml

@@ -25,7 +25,7 @@
           = check_box_tag 'merge_request[squash]', '1', issuable_squash_option?(issuable, project), class: 'form-check-input'
         = label_tag 'merge_request[squash]', class: 'form-check-label' do
           Squash commits when merge request is accepted.
-          = link_to icon('question-circle'), help_page_path('user/project/merge_requests/squash_and_merge'), target: '_blank'
+          = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/squash_and_merge'), target: '_blank'
         - if project.squash_always?
           .gl-text-gray-400
             = _('Required in this project.')

app/views/shared/snippets/_form.html.haml

@@ -37,7 +37,7 @@
       .form-group
         .font-weight-bold
           = _('Visibility level')
-          = link_to icon('question-circle'), help_page_path("public_access/public_access"), target: '_blank'
+          = link_to sprite_icon('question-o'), help_page_path('public_access/public_access'), target: '_blank'
         = render 'shared/visibility_level', f: f, visibility_level: @snippet.visibility_level, can_change_visibility_level: true, form_model: @snippet, with_label: false
 
       - if params[:files]

app/views/shared/wikis/_form.html.haml

@@ -24,7 +24,7 @@
         = sprite_icon('bulb', size: 12, css_class: 'gl-mr-n1')
         - if @page.persisted?
           = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.")
-          = link_to icon('question-circle'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'),
+          = link_to sprite_icon('question-o'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'),
               target: '_blank', rel: 'noopener noreferrer'
         - else
           = s_("WikiNewPageTip|Tip: You can specify the full path for the new file. We will automatically create any missing directories.")

changelogs/unreleased/225958-replace-fa-question-circle-icons-with-gitlab-svg-question-icon.yml

+---
+title: Replace fa-question-circle icons with GitLab SVG question-o icon
+merge_request: 41970
+author:
+type: changed

doc/development/documentation/index.md

@@ -335,12 +335,12 @@ You can combine one or more of the following:
    = link_to 'Help page', help_page_path('user/permissions'), target: '_blank'
    ```
 
-1. **Linking to a circle icon.** Usually used in settings where a long
+1. **Using a question icon.** Usually used in settings where a long
    description cannot be used, like near checkboxes. You can basically use
-   any font awesome icon, but prefer the `question-circle`:
+   any GitLab SVG icon, but prefer the `question-o`:
 
    ```haml
-   = link_to icon('question-circle'), help_page_path('user/permissions')
+   = link_to sprite_icon('question-o'), help_page_path('user/permissions')
    ```
 
 1. **Using a button link.** Useful in places where text would be out of context

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 
 export default {
   components: {
+    GlIcon,
     statusIcon,
   },
   directives: {
@@ -31,7 +33,7 @@ export default {
         rel="noopener noreferrer nofollow"
         data-container="body"
       >
-        <i class="fa fa-question-circle"></i>
+        <gl-icon name="question-o" />
       </a>
     </div>
   </div>

ee/app/views/admin/application_settings/_ldap_access_setting.html.haml

@@ -11,7 +11,7 @@
       = _('Lock memberships to LDAP synchronization')
   %span.form-text.text-muted
     = _('If checked, new group memberships and permissions can only be added via LDAP synchronization')
-    = link_to icon('question-circle'), help_page_path('administration/auth/ldap/index.md', anchor: 'global-group-memberships-lock')
+    = link_to sprite_icon('question-o'), help_page_path('administration/auth/ldap/index.md', anchor: 'global-group-memberships-lock')
 
   .form-check
     = form.check_box :allow_group_owners_to_manage_ldap, class: 'form-check-input'
@@ -19,4 +19,4 @@
       = _('Allow group owners to manage LDAP-related settings')
   %span.form-text.text-muted
     = _('If checked, group owners can manage LDAP group links and LDAP member overrides')
-    = link_to icon('question-circle'), help_page_path('administration/auth/ldap-ee')
+    = link_to sprite_icon('question-o'), help_page_path('administration/auth/ldap-ee')

ee/app/views/admin/application_settings/_repository_size_limit_setting.html.haml

@@ -8,4 +8,4 @@
   = form.number_field :repository_size_limit, value: form.object.repository_size_limit.try(:to_mb), class: 'form-control', min: 0, title: _('Maximum size limit for each repository.'), data: { toggle: 'tooltip', container: 'body' }
   %span.form-text.text-muted#repository_size_limit_help_block
     = _('Includes LFS objects. It can be overridden per group, or per project. 0 for unlimited.')
-    = link_to icon('question-circle'), help_page_path("user/admin_area/settings/account_and_limit_settings")
+    = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/account_and_limit_settings')

ee/app/views/admin/application_settings/_shared_runners_minutes_setting.html.haml

@@ -3,4 +3,4 @@
   = form.number_field :shared_runners_minutes, class: 'form-control'
   .form-text.text-muted
     = _('Set the maximum number of pipeline minutes that a group can use on shared Runners per month. 0 for unlimited.')
-    = link_to icon('question-circle'), help_page_path("user/admin_area/settings/continuous_integration", anchor: "shared-runners-pipeline-minutes-quota"), target: '_blank'
+    = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'shared-runners-pipeline-minutes-quota'), target: '_blank'

ee/app/views/groups/_insights.html.haml

@@ -20,7 +20,7 @@
             = insight_form.label :project_id, class: 'label-light' do
               .form-text.text-muted
                 = _('Select a repository')
-                = link_to icon('question-circle'), help_page_path('user/group/index.md', anchor: 'insights'), target: '_blank'
+                = link_to sprite_icon('question-o'), help_page_path('user/group/index.md', anchor: 'insights'), target: '_blank'
             = project_select_tag('group[insight_attributes][project_id]', class: 'project-item-select hidden-filter-value', toggle_class: 'js-project-search js-project-filter js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
               placeholder: _('Search projects'), idAttribute: 'id', data: { order_by: 'last_activity_at', idattribute: 'id', simple_filter: true, allow_clear: true, include_projects_in_subgroups: true }, value: insight.project_id)
       = form.submit _('Save changes'), class: "btn btn-success"

ee/app/views/groups/_templates_setting.html.haml

@@ -17,7 +17,7 @@
           = f.label :file_template_project_id, class: 'label-light' do
             .form-text.text-muted
               = _('Select a template repository')
-              = link_to icon('question-circle'), help_page_path('user/group/index.md', anchor: 'group-file-templates'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('user/group/index.md', anchor: 'group-file-templates'), target: '_blank'
           = project_select_tag('group[file_template_project_id]', class: 'project-item-select hidden-filter-value qa-file-template-repository-dropdown', toggle_class: 'js-project-search js-project-filter js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
             placeholder: _('Search projects'), idAttribute: 'id', data: { order_by: 'last_activity_at', idattribute: 'id', simple_filter: true, allow_clear: true }, value: @group.checked_file_template_project_id)
       = f.submit _('Save changes'), class: "btn btn-success", data: { qa_selector: 'save_changes_button' }

ee/app/views/namespaces/_shared_runner_status.html.haml

@@ -6,4 +6,4 @@
     %span.light Pipeline minutes quota:
     %strong
       = ci_minutes_report(minutes_quota.monthly_minutes_report)
-      = link_to icon('question-circle'), help_page_path("user/admin_area/settings/continuous_integration", anchor: "shared-runners-pipeline-minutes-quota"), target: '_blank'
+      = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'shared-runners-pipeline-minutes-quota'), target: '_blank'

ee/app/views/namespaces/_shared_runners_minutes_setting.html.haml

@@ -11,4 +11,4 @@
       Set the maximum number of pipeline minutes that a group can use on shared Runners per month.
       Set 0 for unlimited.
       Set empty to inherit the global setting of #{Gitlab::CurrentSettings.shared_runners_minutes}.
-      = link_to icon('question-circle'), help_page_path("user/admin_area/settings/continuous_integration", anchor: "shared-runners-pipeline-minutes-quota"), target: '_blank'
+      = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'shared-runners-pipeline-minutes-quota'), target: '_blank'

ee/app/views/namespaces/pipelines_quota/_extra_shared_runners_minutes_quota.html.haml

@@ -8,7 +8,7 @@
     %div
       = ci_minutes_report(minutes_quota.purchased_minutes_report)
       minutes
-      = link_to icon('question-circle'), help_page_path('subscriptions/index', anchor: 'purchasing-additional-ci-minutes'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to sprite_icon('question-o'), help_page_path('subscriptions/index', anchor: 'purchasing-additional-ci-minutes'), target: '_blank', rel: 'noopener noreferrer'
   .col-sm-6.right
     #{minutes_quota.purchased_percent_used}% used
     = ci_minutes_progress_bar(minutes_quota.purchased_percent_used)

ee/app/views/namespaces/pipelines_quota/_list.haml

@@ -24,7 +24,7 @@
       %div
         = ci_minutes_report(minutes_quota.monthly_minutes_report)
         minutes
-        = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'shared-runners-pipeline-minutes-quota'), target: '_blank', 'aria-label': _('Shared runners help link')
+        = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'shared-runners-pipeline-minutes-quota'), target: '_blank', 'aria-label': _('Shared runners help link')
 
     .col-sm-6.right
       - if namespace.shared_runners_minutes_limit_enabled?

ee/app/views/projects/_merge_pipelines_settings.html.haml

@@ -6,7 +6,7 @@
     = s_('ProjectSettings|Enable merge trains and pipelines for merged results')
     .text-secondary.mb-2
       = s_('ProjectSettings|Pipelines for merge requests must be enabled in the CI/CD configuration file, or pipelines could be unresolvable or dropped')
-      = link_to icon('question-circle'),
+      = link_to sprite_icon('question-o'),
         help_page_path('ci/merge_request_pipelines/index.md',
         anchor: 'configuring-pipelines-for-merge-requests'),
         target: '_blank'

ee/app/views/projects/_merge_request_approvals_settings_form.html.haml

@@ -18,14 +18,14 @@
       - banner_url = project_settings_repository_path(project, anchor: 'js-protected-branches-settings')
       - banner_link_start = '<a href="%{url}"><strong>'.html_safe % { url: banner_url }
       = _('The "Require approval from CODEOWNERS" setting was moved to %{banner_link_start}Protected Branches%{banner_link_end}').html_safe % { banner_link_start: banner_link_start, banner_link_end: '</strong></a>'.html_safe}
-      = link_to icon('question-circle'), help_page_path('user/project/protected_branches', anchor: 'protected-branches-approval-by-code-owners'), target: '_blank'
+      = link_to sprite_icon('question-o'), help_page_path('user/project/protected_branches', anchor: 'protected-branches-approval-by-code-owners'), target: '_blank'
 
 .form-group
   .form-check
     = form.check_box(:disable_overriding_approvers_per_merge_request, { checked: can_override_approvers, class: 'form-check-input', disabled: !can_modify_approvers }, false, true)
     = form.label :disable_overriding_approvers_per_merge_request, class: 'form-check-label' do
       %span= _('Can override approvers and approvals required per merge request')
-      = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'prevent-overriding-default-approvals'), target: '_blank'
+      = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'prevent-overriding-default-approvals'), target: '_blank'
 
 .form-group.reset-approvals-on-push
   .form-check
@@ -38,7 +38,7 @@
     = form.check_box :merge_requests_author_approval, { class: 'form-check-input', checked: !project.merge_requests_author_approval?, disabled: !can_modify_merge_request_author_settings }, false, true
     = form.label :merge_requests_author_approval, class: 'form-check-label' do
       %span= _('Prevent approval of merge requests by merge request author')
-      = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_request_approvals',
+      = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals',
         anchor: 'allowing-merge-request-authors-to-approve-their-own-merge-requests'), target: '_blank'
 
 .form-group.committers-approval
@@ -46,7 +46,7 @@
     = form.check_box :merge_requests_disable_committers_approval, { disabled: !can_modify_merge_request_committer_settings, class: 'form-check-input' }
     = form.label :merge_requests_disable_committers_approval, class: 'form-check-label' do
       %span= _('Prevent approval of merge requests by merge request committers')
-      = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_request_approvals',
+      = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals',
         anchor: 'allowing-merge-request-authors-to-approve-their-own-merge-requests'), target: '_blank'
 
 - if password_authentication_enabled_for_web?
@@ -55,5 +55,5 @@
       = form.check_box :require_password_to_approve, class: 'form-check-input'
       = form.label :require_password_to_approve, class: 'form-check-label' do
         %span= _('Require user password to approve')
-        = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_request_approvals',
+        = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals',
           anchor: 'require-authentication-when-approving-a-merge-request'), target: '_blank'

ee/app/views/projects/_merge_request_settings.html.haml

@@ -15,7 +15,7 @@
   .form-group
     = form.label :merge_requests_template, class: 'label-bold' do
       = _('Default description template for merge requests')
-      = link_to icon('question-circle'), help_page_path('user/project/description_templates'), target: '_blank'
+      = link_to sprite_icon('question-o'), help_page_path('user/project/description_templates'), target: '_blank'
     = form.text_area :merge_requests_template, class: "form-control", rows: 3
     .text-secondary
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/markdown') }

ee/app/views/projects/blob/_owners.html.haml

@@ -5,6 +5,6 @@
   = sprite_icon('users', size: 18, css_class: 'icon')
   %strong
     = _("Code owners")
-  = link_to icon('question-circle'), help_page_path('user/project/code_owners'), title: 'About this feature', target: '_blank'
+  = link_to sprite_icon('question-o'), help_page_path('user/project/code_owners'), title: 'About this feature', target: '_blank'
   :
   = users_sentence(owners, link_class: 'file-owner-link qa-link-file-owner')

ee/app/views/projects/settings/_default_issue_template.html.haml

@@ -13,7 +13,7 @@
           .form-group.col-md-9
             = f.label :issues_template, class: 'label-bold' do
               = _('Default description template for issues')
-              = link_to icon('question-circle'), help_page_path('user/project/description_templates'), target: '_blank'
+              = link_to sprite_icon('question-o'), help_page_path('user/project/description_templates'), target: '_blank'
             = f.text_area :issues_template, class: "form-control", rows: 3
             .text-secondary
               - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/markdown') }

ee/app/views/registrations/projects/new.html.haml

@@ -40,7 +40,7 @@
 
               = f.label :visibility_level, class: 'label-bold' do
                 = s_('ProjectsNew|Visibility Level')
-                = link_to icon('question-circle'), help_page_path('public_access/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
+                = link_to sprite_icon('question-o'), help_page_path('public_access/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
               = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
 
               = f.submit _('Create project'), class: 'btn btn-success project-submit w-100', data: { track_label: 'blank_project', track_event: 'click_button', track_property: 'create_project', track_value: '' }

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -958,7 +958,7 @@ describe('ee merge request widget options', () => {
       vm.mr.state = 'readyToMerge';
 
       vm.$nextTick(() => {
-        const tooltip = vm.$el.querySelector('.fa-question-circle');
+        const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
 
         expect(vm.$el.textContent).toContain('Deletes source branch');
         expect(tooltip.getAttribute('data-original-title')).toBe(

spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap

@@ -33,9 +33,9 @@ exports[`Confidential merge request project form group component renders empty s
           Read more
         </span>
          
-        <i
-          aria-hidden="true"
-          class="fa fa-question-circle"
+        <gl-icon-stub
+          name="question-o"
+          size="16"
         />
       </gl-link-stub>
     </p>
@@ -76,9 +76,9 @@ exports[`Confidential merge request project form group component renders fork dr
           Read more
         </span>
          
-        <i
-          aria-hidden="true"
-          class="fa fa-question-circle"
+        <gl-icon-stub
+          name="question-o"
+          size="16"
         />
       </gl-link-stub>
     </p>

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -530,7 +530,7 @@ describe('mrWidgetOptions', () => {
         vm.mr.state = 'readyToMerge';
 
         vm.$nextTick(() => {
-          const tooltip = vm.$el.querySelector('.fa-question-circle');
+          const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
 
           expect(vm.$el.textContent).toContain('Deletes source branch');
           expect(tooltip.getAttribute('data-original-title')).toBe(