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.
-  &:before {
-    .fas();
-    content: @fa-var-reply;
+  .icon {
     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 {
-        .fas();
-        content: @fa-var-check !important;
+      .SelectTagListItem-checkIcon {
+        display: inline-block;
         color: var(--muted-color);
         font-size: 14px;
-        text-align: center;
-        vertical-align: 1px;
       }
-
-      &.colored .TagIcon:before {
+      .SelectTagListItem-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;