chore: avoid using .fa() mixins and @fa-var vars (#3912)

extensions/mentions/less/forum.less

@@ -30,10 +30,7 @@
     margin-left: 0;
   }
 
-  // @TODO: 2.0 use an icon in the XSLT template.
+  .icon {
-  &:before {
-    .fas();
-    content: @fa-var-reply;
     margin-right: 5px;
   }
 }

extensions/mentions/src/ConfigureMentions.php

@@ -122,10 +122,10 @@ class ConfigureMentions
         $tag->template = '
             <xsl:choose>
                 <xsl:when test="@deleted != 1">
-                    <a href="{$DISCUSSION_URL}{@discussionid}/{@number}" class="PostMention" data-id="{@id}"><xsl:value-of select="@displayname"/></a>
+                    <a href="{$DISCUSSION_URL}{@discussionid}/{@number}" class="PostMention" data-id="{@id}"><i class="icon fas fa-reply"></i><xsl:value-of select="@displayname"/></a>
                 </xsl:when>
                 <xsl:otherwise>
-                    <span class="PostMention PostMention--deleted" data-id="{@id}"><xsl:value-of select="@displayname"/></span>
+                    <span class="PostMention PostMention--deleted" data-id="{@id}"><i class="icon fas fa-reply"></i><xsl:value-of select="@displayname"/></span>
                 </xsl:otherwise>
             </xsl:choose>';
 

extensions/tags/js/src/common/components/TagSelectionModal.tsx

@@ -194,7 +194,7 @@ export default class TagSelectionModal<
           {tags.map((tag) => (
             <li
               data-index={tag.id()}
-              className={classList({
+              className={classList('SelectTagListItem', {
                 pinned: tag.position() !== null,
                 child: !!tag.parent(),
                 colored: !!tag.color(),
@@ -205,7 +205,10 @@ export default class TagSelectionModal<
               onmouseover={() => (this.indexTag = tag)}
               onclick={this.toggleTag.bind(this, tag)}
             >
-              {tagIcon(tag)}
+              <i className="SelectTagListItem-icon">
+                {tagIcon(tag, { className: 'SelectTagListItem-tagIcon' })}
+                <i className="icon TagIcon fas fa-check SelectTagListItem-checkIcon"></i>
+              </i>
               <span className="SelectTagListItem-name">{highlight(tag.name(), filter)}</span>
               {tag.description() ? <span className="SelectTagListItem-description">{tag.description()}</span> : ''}
             </li>

extensions/tags/less/common/TagSelectionModal.less

@@ -77,6 +77,13 @@
   }
 }
 
+.SelectTagListItem-checkIcon {
+  position: absolute;
+  inset: 0;
+  display: none;
+  background-color: transparent;
+}
+
 .SelectTagList {
   padding: 0;
   margin: 0;
@@ -124,26 +131,27 @@
     }
 
     &.selected {
-      .icon::before {
+      .SelectTagListItem-checkIcon {
-        .fas();
+        display: inline-block;
-        content: @fa-var-check !important;
         color: var(--muted-color);
         font-size: 14px;
-        text-align: center;
-        vertical-align: 1px;
       }
-
+      .SelectTagListItem-tagIcon::before {
-      &.colored .TagIcon:before {
+        visibility: hidden;
+      }
+      &.colored .TagIcon + .SelectTagListItem-checkIcon {
         color: #fff;
       }
     }
-    .TagIcon {
-      vertical-align: top;
-      margin-top: 3px;
-      margin-left: 0;
-    }
   }
 }
+.SelectTagListItem-icon {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-left: 0;
+}
 .SelectTagListItem-name {
   display: inline-block;
   width: 150px;

framework/core/js/src/forum/components/Composer.js

@@ -338,7 +338,10 @@ export default class Composer extends Component {
         items.add(
           'minimize',
           <ComposerButton
-            icon="fas fa-minus minimize"
+            icon={classList('fas minimize', {
+              'fa-minus': app.screen() !== 'phone',
+              'fa-times': app.screen() === 'phone',
+            })}
             title={app.translator.trans('core.forum.composer.minimize_tooltip')}
             onclick={this.state.minimize.bind(this.state)}
             itemClassName="App-backControl"

framework/core/js/src/forum/components/Search.tsx

@@ -145,6 +145,7 @@ export default class Search<T extends SearchAttrs = SearchAttrs> extends Compone
         })}
       >
         <div className="Search-input">
+          <Icon name="fas fa-search Search-input-icon" />
           <input
             aria-label={searchLabel}
             className="FormControl"

framework/core/less/common/Search.less

@@ -58,9 +58,7 @@
   overflow: hidden;
   color: var(--muted-color);
 
-  &:before {
+  &-icon {
-    .fas();
-    content: @fa-var-search;
     margin-right: -36px;
     width: 36px;
     font-size: 14px;

framework/core/less/common/Select.less

@@ -16,5 +16,6 @@
   margin-left: -30px;
   pointer-events: none;
   color: var(--control-color);
-  .fa-fw();
+  text-align: center;
+  width: 1.25em;
 }

framework/core/less/common/Table.less

@@ -41,7 +41,8 @@
     .icon {
       font-size: 14px;
       margin-right: 2px;
-      .fa-fw();
+      text-align: center;
+      width: 1.25em;
     }
   }
 

framework/core/less/forum/Composer.less

@@ -155,9 +155,6 @@
       }
     }
   }
-  .Composer-controls .fa-minus:before {
-    content: @fa-var-times;
-  }
   .composer-backdrop {
     position: fixed;
     top: 0;