Merge branch 'icon_picker_admin_config' into 'develop'

Add font icon picker for admin config, fixes #338

Closes #338

See merge request soapbox-pub/soapbox-fe!219

app/styles/emoji_picker.scss

@@ -173,6 +173,13 @@
   display: inline-block;
   font-size: 0;
 
+  .fa {
+    font-size: 18px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+  }
+
   span {
     width: 22px;
     height: 22px;

app/styles/fonts.scss

@@ -163,12 +163,12 @@
   font-style: normal;
 }
 
-.fa-users::before {
-  font-family: 'ForkAwesome';
-  content: '\f0c0';
-}
-
 .fa-fediverse::before {
-  font-family: 'soapbox' !important;
+  font-family: 'soapbox';
   content: "\e901";
 }
+
+.fa-spinster::before {
+  font-family: 'soapbox';
+  content: "\e900";
+}

app/styles/forms.scss

@@ -179,6 +179,10 @@ code {
     }
   }
 
+  .input.font_icon_picker {
+    width: 52px;
+  }
+
   .input.with_block_label {
     max-width: none;
 
@@ -302,7 +306,8 @@ code {
   input[type=number],
   input[type=email],
   input[type=password],
-  textarea {
+  textarea,
+  .rfipbtn {
     box-sizing: border-box;
     font-size: 16px;
     color: var(--primary-text-color);
@@ -335,6 +340,11 @@ code {
     }
   }
 
+  .rfip {
+    width: 100%;
+    margin: 0;
+  }
+
   input[type=text][disabled],
   input[type=number][disabled],
   input[type=email][disabled],
@@ -501,6 +511,22 @@ code {
       }
     }
 
+    &__font_icon_picker {
+      font-size: 14px;
+
+      .font-icon-button {
+        padding: 9px;
+        border: 1px solid var(--highlight-text-color);
+        border-radius: 4px;
+        cursor: pointer;
+
+        .fa {
+          font-size: 18px;
+          color: var(--primary-text-color);
+        }
+      }
+    }
+
     &__wrapper {
       position: relative;
     }
@@ -701,7 +727,7 @@ code {
   }
 }
 
-.input .row .fa-times-circle {
+.input .row > .fa-times-circle {
   position: absolute;
   right: 7px;
   cursor: pointer;