Upgrade to FontAwesome 5 (take two) (#6673)

* Add missing icons to set

* Revert FA5 revert

 This reverts commit 42572ff

* use new SVG syntax in locales

* Noscript page changes (remove login button, center "powered by" footer text)

* Cast wider net for SVG icons in settings

- include any _icon setting for SVG registry (offers better support for plugin settings)

- let themes store multiple pipe-delimited icons in a setting

- also replaces broken onebox image icon with SVG reference in cooked post processor

* interpolate icons in locales

* Fix composer whisper icon alignment

* Add support for stacked icons

* SECURITY: enforce hostname to match discourse hostname

This ensures that the hostname rails uses for various helpers always matches
the Discourse hostname

* load SVG sprite with pre-initializers

* FIX: enable caching on SVG sprites

* PERF: use JSONP for SVG sprites so they are served from CDN

This avoids needing to deal with CORS for loading of the SVG

Note, added the svg- prefix to the filename so we can quickly tell in
dev tools what the file is

* Add missing SVG sprite JSONP script to CSP

* Upgrade to FA 5.5.0

* Add support for all FA4.7 icons

- adds complete frontend and backend for renamed FA4.7 icons

- improves performance of SvgSprite.bundle and SvgSprite.all_icons

* Fix group avatar flair preview

- adds an endpoint at /svg-sprites/search/:keyword

- adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset

* Remove FA 4.7 font files

plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6

@@ -55,7 +55,9 @@
 
       const $dateTemplate = `
         <span>
-          <i class="fa fa-globe d-icon d-icon-globe"></i>
+          <svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
+            <use xlink:href="#globe-americas"></use>
+          </svg>
           <span class="relative-time"></span>
         </span>
       `;

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -7,7 +7,7 @@
     cursor: pointer;
     border-bottom: 1px dashed $primary-medium;
 
-    .d-icon-globe {
+    .d-icon {
       margin-right: 0.25em;
       color: $primary;
     }

plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs

@@ -82,5 +82,5 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  {{d-button action="insertPoll" icon="bar-chart-o" class='btn-primary' label='poll.ui_builder.insert' disabled=disableInsert}}
+  {{d-button action="insertPoll" icon="chart-bar" class='btn-primary' label='poll.ui_builder.insert' disabled=disableInsert}}
 </div>

plugins/poll/assets/javascripts/initializers/add-poll-ui-builder.js.es6

@@ -32,7 +32,7 @@ function initializePollUIBuilder(api) {
   api.addToolbarPopupMenuOptionsCallback(function() {
     return {
       action: "showPollBuilder",
-      icon: "bar-chart-o",
+      icon: "chart-bar",
       label: "poll.ui_builder.title",
       condition: "canBuildPoll"
     };

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -42,9 +42,9 @@ createWidget("discourse-poll-option", {
     const chosen = vote.includes(option.id);
 
     if (attrs.isMultiple) {
-      contents.push(iconNode(chosen ? "check-square-o" : "square-o"));
+      contents.push(iconNode(chosen ? "far-check-square" : "far-square"));
     } else {
-      contents.push(iconNode(chosen ? "dot-circle-o" : "circle-o"));
+      contents.push(iconNode(chosen ? "far-dot-circle" : "far-circle"));
     }
 
     contents.push(" ");

plugins/poll/assets/stylesheets/desktop/poll.scss

@@ -51,16 +51,20 @@ div.poll {
 
   .poll {
     li[data-poll-option-id]:before {
-      font-family: FontAwesome;
-      content: "\f10c";
-      margin-right: 0.25em;
       position: relative;
       vertical-align: baseline;
+      border: 2px solid $primary;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 0.5em;
+      width: 12px;
+      height: 12px;
+      content: "";
     }
 
     &[data-poll-type="multiple"] {
       li[data-poll-option-id]:before {
-        content: "\f096";
+        border-radius: 3px;
       }
     }
   }

plugins/poll/plugin.rb

@@ -11,6 +11,8 @@ register_asset "stylesheets/common/poll-ui-builder.scss"
 register_asset "stylesheets/desktop/poll.scss", :desktop
 register_asset "stylesheets/mobile/poll.scss", :mobile
 
+register_svg_icon "far fa-check-square"
+
 enabled_site_setting :poll_enabled
 hide_plugin if self.respond_to?(:hide_plugin)
 

plugins/poll/test/javascripts/widgets/discourse-poll-option-test.js.es6

@@ -14,7 +14,7 @@ widgetTest("single, not selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-circle-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-circle:eq(0)").length === 1);
   }
 });
 
@@ -27,7 +27,7 @@ widgetTest("single, selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-dot-circle-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-dot-circle:eq(0)").length === 1);
   }
 });
 
@@ -43,7 +43,7 @@ widgetTest("multi, not selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-square-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-square:eq(0)").length === 1);
   }
 });
 
@@ -59,6 +59,6 @@ widgetTest("multi, selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-check-square-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-check-square:eq(0)").length === 1);
   }
 });