Switch legacy icon implementations to use variables instead of hard-coded characters

client/scss/components/_breadcrumb.scss

@@ -31,7 +31,7 @@
                 // z-index: 5;
                 position: absolute;
                 font-family: wagtail;
-                content: 'n';
+                content: map-get($icons, 'arrow-right');
                 padding-left: 20px;
                 font-size: 2em;
                 color: $color-teal-darker;

client/scss/components/_chooser.scss

@@ -85,7 +85,7 @@ overriden here? hmm.
     .unchosen,
     .chosen {
         &:before {
-            content: 'b';
+            content: map-get($icons, 'doc-empty-inverse');
         }
     }
 }
@@ -94,7 +94,7 @@ overriden here? hmm.
     .unchosen,
     .chosen {
         &:before {
-            content: 'D';
+            content: map-get($icons, 'snippet');
         }
     }
 }
@@ -103,7 +103,7 @@ overriden here? hmm.
     .unchosen,
     .chosen {
         &:before {
-            content: 'r';
+            content: map-get($icons, 'doc-full-inverse');
         }
     }
 }
@@ -112,7 +112,7 @@ overriden here? hmm.
     .unchosen,
     .chosen {
         &:before {
-            content: 'o';
+            content: map-get($icons, 'image');
         }
     }
 

client/scss/components/_forms.scss

@@ -92,7 +92,7 @@ select::-ms-expand {
         bottom: 0;
         width: 1.5em;
         font-family: wagtail;
-        content: 'q';
+        content: map-get($icons, 'arrow-down');
         border: 1px solid $color-input-border;
         border-width: 0 0 0 1px;
         text-align: center;

client/scss/components/_help-block.scss

@@ -30,7 +30,7 @@
         position: absolute;
         left: 1em;
         top: 0.7em;
-        content: '?';
+        content: map-get($icons, 'help');
         font-size: 1.4em;
     }
 }
@@ -48,7 +48,7 @@
 
     &:before {
         color: $color-orange;
-        content: '!';
+        content: map-get($icons, 'warning');
     }
 }
 
@@ -57,6 +57,6 @@
 
     &:before {
         color: $color-red;
-        content: '!';
+        content: map-get($icons, 'warning');
     }
 }

client/scss/components/_icons.scss

@@ -122,7 +122,7 @@
     $size: 15px;
 
     &:before {
-        content: '?';
+        content: map-get($icons, 'help');
         display: inline-block;
         width: $size;
         height: $size;

client/scss/components/_loading-mask.scss

@@ -28,7 +28,7 @@
             margin: -15px 0 0 -15px;
             font-family: wagtail;
             animation: spin 0.5s infinite linear;
-            content: '1';
+            content: map-get($icons, 'spinner');
             z-index: 2;
             color: $color-teal;
         }

client/scss/components/_main-nav.scss

@@ -232,7 +232,7 @@
             font-family: wagtail;
             font-weight: 200;
             text-transform: none;
-            content: 'f';
+            content: map-get($icons, 'search');
             display: block;
             height: 100%;
             line-height: 3.3em;

client/scss/components/_messages.scss

@@ -36,7 +36,7 @@
 
         &:before {
             font-family: wagtail;
-            content: '!';
+            content: map-get($icons, 'warning');
         }
     }
 
@@ -45,7 +45,7 @@
 
         &:before {
             font-family: wagtail;
-            content: '!';
+            content: map-get($icons, 'warning');
         }
     }
 
@@ -54,7 +54,7 @@
 
         &:before {
             font-family: wagtail;
-            content: '9';
+            content: map-get($icons, 'success');
         }
     }
 

client/scss/components/_streamfield.scss

@@ -261,7 +261,7 @@ li.sequence-member {
             transform: rotate(-45deg);
             position: absolute;
             font-family: wagtail;
-            content: 'B';
+            content: map-get($icons, 'plus-inverse');
             line-height: 1em;
             text-align: center;
         }

client/scss/components/_tabs.scss

@@ -68,7 +68,7 @@
             font-family: wagtail;
             vertical-align: middle;
             text-transform: none;
-            content: 'w';
+            content: map-get($icons, 'cog');
             margin-right: 0.5em;
             font-size: 1.2em;
             font-weight: normal;

client/scss/components/_tag.scss

@@ -12,7 +12,7 @@
         font-family: wagtail;
         display: inline-block;
         color: $color-white;
-        content: 'u';
+        content: map-get($icons, 'tag');
         padding-right: 0.5em;
     }
 

client/scss/elements/_forms.scss

@@ -131,7 +131,7 @@ input[type=radio]:before {
     left: -2px;
     cursor: pointer;
     display: block;
-    content: 'K';
+    content: map-get($icons, 'radio-full');
     width: 1em;
     height: 1em;
     line-height: 1.1em;
@@ -142,7 +142,7 @@ input[type=radio]:before {
 }
 
 input[type=radio]:checked:before {
-    content: 'K';
+    content: map-get($icons, 'radio-full');
     color: $color-teal;
 }
 
@@ -161,7 +161,7 @@ input[type=checkbox]:before {
     top: -5px;
     cursor: pointer;
     display: block;
-    content: 'x';
+    content: map-get($icons, 'tick');
     line-height: 20px;
     width: 20px;
     height: 20px;

client/scss/overrides/_vendor.datetimepicker.scss

@@ -84,7 +84,7 @@
         float: left;
 
         &:before {
-            content: 'z';
+            content: map-get($icons, 'arrow-left');
         }
     }
 
@@ -93,7 +93,7 @@
         margin-left: 5px;
 
         &:before {
-            content: 'W';
+            content: map-get($icons, 'home');
         }
     }
 
@@ -101,7 +101,7 @@
         float: right;
 
         &:before {
-            content: 'n';
+            content: map-get($icons, 'arrow-right');
         }
     }
 
@@ -127,11 +127,11 @@
         }
 
         .xdsoft_prev:before {
-            content: 'e';
+            content: map-get($icons, 'arrow-up');
         }
 
         .xdsoft_next:before {
-            content: 'q';
+            content: map-get($icons, 'arrow-down');
         }
 
         .xdsoft_time_box {

client/scss/overrides/_vendor.tagit.scss

@@ -34,7 +34,7 @@
         font-family: wagtail;
         display: block;
         color: $color-grey-3;
-        content: 'g';
+        content: map-get($icons, 'cross');
     }
 
     .ui-icon-close:hover:before {

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -121,7 +121,7 @@ $object-title-height: 40px;
             text-shadow: none;
             font-family: wagtail;
             text-transform: none;
-            content: 'q';
+            content: map-get($icons, 'arrow-down');
             text-align: center;
             display: block;
             position: absolute;
@@ -219,7 +219,7 @@ $object-title-height: 40px;
     // special panel for the publishing fields, requires a bit more pizzazz
     &.publishing {
         > h2:before {
-            content: '7';
+            content: map-get($icons, 'date');
             font-size: 1.8rem;
             line-height: 1.4em;
             width: 1.4em;
@@ -304,7 +304,7 @@ $object-title-height: 40px;
         > h2 {
             &:before,
             > label:before {
-                content: '6';
+                content: map-get($icons, 'collapse-up');
                 cursor: pointer;
             }
         }
@@ -313,7 +313,7 @@ $object-title-height: 40px;
             > h2 {
                 &:before,
                 > label:before {
-                    content: '5';
+                    content: map-get($icons, 'collapse-down');
                 }
             }
         }