Merge branch 'mw-wiki-page-specific-css' into 'master'

Replace remaining fontawesome icons with emojis

See merge request gitlab-org/gitlab!49097

Gemfile

@@ -292,7 +292,6 @@ gem 'sassc-rails', '~> 2.1.0'
 gem 'terser', '1.0.2'
 
 gem 'addressable', '~> 2.7'
-gem 'font-awesome-rails', '~> 4.7'
 gem 'gemojione', '~> 3.3'
 gem 'gon', '~> 6.2'
 gem 'request_store', '~> 1.5'

Gemfile.lock

@@ -396,8 +396,6 @@ GEM
     fog-xml (0.1.3)
       fog-core
       nokogiri (>= 1.5.11, < 2.0.0)
-    font-awesome-rails (4.7.0.5)
-      railties (>= 3.2, < 6.1)
     formatador (0.2.5)
     fugit (1.2.1)
       et-orbi (~> 1.1, >= 1.1.8)
@@ -1347,7 +1345,6 @@ DEPENDENCIES
   fog-local (~> 0.6)
   fog-openstack (~> 1.0)
   fog-rackspace (~> 0.1.1)
-  font-awesome-rails (~> 4.7)
   fugit (~> 1.2.1)
   fuubar (~> 2.2.0)
   gemojione (~> 3.3)

app/assets/stylesheets/application.scss

@@ -9,9 +9,6 @@
 // GitLab UI framework
 @import 'framework';
 
-// Custom Fontawesome icons
-@import 'fontawesome_custom';
-
 // Page specific styles (issues, projects etc):
 @import 'page_specific_files';
 

app/assets/stylesheets/components/milestone_combobox.scss

-.selected-item::before {
-  content: '\f00c';
-  color: $green-500;
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  transform: translateY(-50%);
-  font: 14px FontAwesome;
+.selected-item {
+  /* stylelint-disable-next-line function-url-quotes */
+  background: url(asset_path('checkmark.png')) no-repeat 0 2px;
 }
 
 .dropdown-item-space {

app/assets/stylesheets/fontawesome_custom.scss

-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-
-// stylelint-disable property-no-vendor-prefix
-// stylelint-disable at-rule-no-vendor-prefix
-// stylelint-disable stylelint-gitlab/duplicate-selectors
-// scss-lint:disable MergeableSelector
-@font-face {
-  font-family: 'FontAwesome';
-  src: asset-url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'), asset-url('fontawesome-webfont.woff?v=4.7.0') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.fa {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.fa-2x {
-  font-size: 2em;
-}
-
-.fa-exclamation-triangle::before {
-  content: '\f071';
-}
-
-.fa-exclamation-circle::before {
-  content: '\f06a';
-}
-
-.fa-lightbulb-o::before {
-  content: '\f0eb';
-}
-
-.fa-thumb-tack::before {
-  content: '\f08d';
-}
-
-.fa-fire::before {
-  content: '\f06d';
-}
-
-.fa-square-o::before {
-  content: '\f096';
-}
-
-.fa-check-square-o::before {
-  content: '\f046';
+// Custom Font Awesome styles that render emojis in asciidoc
+.md {
+  .fa {
+    display: inline-block;
+    font-style: normal;
+    font-size: 14px;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .fa-2x {
+    font-size: 2em;
+  }
+
+  .fa-exclamation-triangle::before {
+    content: '⚠';
+  }
+
+  .fa-exclamation-circle::before {
+    content: '❗';
+  }
+
+  .fa-lightbulb-o::before {
+    content: '💡';
+  }
+
+  .fa-thumb-tack::before {
+    content: '📌';
+  }
+
+  .fa-fire::before {
+    content: '🔥';
+  }
+
+  .fa-square-o::before {
+    content: '\2610';
+  }
+
+  .fa-check-square-o::before {
+    content: '\2611';
+  }
 }

app/assets/stylesheets/framework/dropdowns.scss

@@ -505,29 +505,27 @@
       &.is-active {
         color: $gl-text-color;
 
-        &::before {
-          position: absolute;
-          left: 16px;
-          top: 16px;
-          transform: translateY(-50%);
-          font: normal normal normal 14px/1 FontAwesome;
-          font-size: inherit;
-          text-rendering: auto;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
         &.dropdown-menu-user-link::before {
           top: 50%;
         }
       }
 
       &.is-indeterminate::before {
-        content: '\f068';
+        position: absolute;
+        left: 16px;
+        top: 16px;
+        transform: translateY(-50%);
+        font-style: normal;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        content: '—';
       }
 
-      &.is-active::before {
-        content: '\f00c';
+      &.is-active {
+        /* stylelint-disable-next-line function-url-quotes */
+        background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
       }
     }
   }

app/assets/stylesheets/framework/typography.scss

+// Custom Fontawesome icons
+@import 'fontawesome_custom';
+
 /**
  * Apply Markup (Markdown/AsciiDoc) typography
  *
@@ -432,11 +435,11 @@
     &::before {
       margin-right: 4px;
 
-      font: normal normal normal 14px/1 FontAwesome;
+      font-style: normal;
       font-size: inherit;
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
-      content: '\f0c6';
+      content: '📎';
     }
 
     &.no-attachment-icon {

app/assets/stylesheets/lazy_bundles/select2_overrides.scss

@@ -22,32 +22,14 @@
     border-radius: $gl-border-radius-base;
 
     .select2-arrow {
-      background-image: none;
-      background-color: transparent;
-      border: 0;
       padding-top: 12px;
       padding-right: 20px;
-      font-size: 10px;
+      /* stylelint-disable-next-line function-url-quotes */
+      background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
 
       b {
         display: none;
       }
-
-      &::after {
-        content: '\f078';
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        pointer-events: none;
-        box-sizing: border-box;
-        color: $gray-darkest;
-        display: inline-block;
-        font: normal normal normal 14px/1 FontAwesome;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
     }
 
     .select2-chosen {

app/helpers/icons_helper.rb

@@ -4,7 +4,6 @@ require 'json'
 
 module IconsHelper
   extend self
-  include FontAwesome::Rails::IconHelper
 
   DEFAULT_ICON_SIZE = 16
 

changelogs/unreleased/mw-wiki-page-specific-css.yml

+---
+title: Replace wiki fontawesome icons with emojis
+merge_request: 49097
+author:
+type: other

config/application.rb

@@ -229,11 +229,6 @@ module Gitlab
     config.assets.precompile << "icons.json"
     config.assets.precompile << "illustrations/*.svg"
 
-    # Import Fontawesome fonts
-    config.assets.paths << "#{config.root}/node_modules/font-awesome/fonts"
-    config.assets.precompile << "fontawesome-webfont.woff2"
-    config.assets.precompile << "fontawesome-webfont.woff"
-
     # Import css for xterm
     config.assets.paths << "#{config.root}/node_modules/xterm/src/"
     config.assets.precompile << "xterm.css"