REFACTOR: Replace some fa-* uses with helpers

app/assets/javascripts/admin/components/resumable-upload.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 /*global Resumable:true */
@@ -40,7 +41,7 @@ export default Ember.Component.extend(bufferedRender({
 
   buildBuffer(buffer) {
     const icon = this.get("isUploading") ? "times" : "upload";
-    buffer.push(`<i class="fa fa-${icon}"></i>`);
+    buffer.push(iconHTML(icon));
     buffer.push("<span class='ru-label'>" + this.get("text") + "</span>");
     buffer.push("<span class='ru-progress' style='width:" + this.get("progress") + "%'></span>");
   },

app/assets/javascripts/admin/helpers/check-icon.js.es6

@@ -0,0 +1,7 @@
+import { registerUnbound } from 'discourse-common/lib/helpers';
+import { renderIcon } from 'discourse-common/lib/icon-library';
+
+registerUnbound('check-icon', function(value) {
+  let icon = value ? "check" : "times";
+  return new Handlebars.SafeString(renderIcon('string', icon));
+});

app/assets/javascripts/admin/models/admin-user.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { ajax } from 'discourse/lib/ajax';
 import computed from 'ember-addons/ember-computed-decorators';
 import { propertyNotEqual } from 'discourse/lib/computed';
@@ -108,7 +109,7 @@ const AdminUser = Discourse.User.extend({
             "class": "cancel-inline",
             "link":  true
           }, {
-            "label": '<i class="fa fa-exclamation-triangle"></i> ' + I18n.t("admin.user.delete_all_posts"),
+            "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("admin.user.delete_all_posts"),
             "class": "btn btn-danger",
             "callback": function() {
               ajax("/admin/users/" + user.get('id') + "/delete_all_posts", {
@@ -337,7 +338,7 @@ const AdminUser = Discourse.User.extend({
       "class": "cancel",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.block_accept'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.block_accept'),
       "class": "btn btn-danger",
       "callback": function() { performBlock(); }
     }];
@@ -386,7 +387,7 @@ const AdminUser = Discourse.User.extend({
       "class": "cancel",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.anonymize_yes'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.anonymize_yes'),
       "class": "btn btn-danger",
       "callback": function() { performAnonymize(); }
     }];
@@ -450,7 +451,7 @@ const AdminUser = Discourse.User.extend({
       "class": "btn",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.delete_and_block'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.delete_and_block'),
       "class": "btn btn-danger",
       "callback": function(){ performDestroy(true); }
     }, {
@@ -479,7 +480,7 @@ const AdminUser = Discourse.User.extend({
         "class": "cancel-inline",
         "link":  true
       }, {
-        "label": '<i class="fa fa-exclamation-triangle"></i> ' + I18n.t("flagging.yes_delete_spammer"),
+        "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("flagging.yes_delete_spammer"),
         "class": "btn btn-danger",
         "callback": function() {
           return ajax("/admin/users/" + user.get('id') + '.json', {

app/assets/javascripts/admin/models/flagged-post.js.es6

@@ -2,7 +2,7 @@ import { ajax } from 'discourse/lib/ajax';
 import AdminUser from 'admin/models/admin-user';
 import Topic from 'discourse/models/topic';
 import Post from 'discourse/models/post';
-
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 const FlaggedPost = Post.extend({
 
@@ -35,13 +35,14 @@ const FlaggedPost = Post.extend({
 
   dispositionIcon: function (disposition) {
     if (!disposition) { return null; }
-    var icon, title = I18n.t('admin.flags.dispositions.' + disposition);
+    let icon;
+    let title = 'admin.flags.dispositions.' + disposition;
     switch (disposition) {
-      case "deferred": { icon = "fa-external-link"; break; }
-      case "agreed": { icon = "fa-thumbs-o-up"; break; }
-      case "disagreed": { icon = "fa-thumbs-o-down"; break; }
+      case "deferred": { icon = "external-link"; break; }
+      case "agreed": { icon = "thumbs-o-up"; break; }
+      case "disagreed": { icon = "thumbs-o-down"; break; }
     }
-    return "<i class='fa " + icon + "' title='" + title + "'></i>";
+    return iconHTML(icon, { title });
   },
 
   wasEdited: function () {

app/assets/javascripts/admin/templates/api-keys.hbs

@@ -29,5 +29,5 @@
 {{/if}}
 
 {{#unless hasMasterKey}}
-  <button class='btn' {{action "generateMasterKey"}}><i class="fa fa-key"></i>{{i18n 'admin.api.generate_master'}}</button>
+<button class='btn' {{action "generateMasterKey"}}>{{d-icon "key"}}</button>
 {{/unless}}

app/assets/javascripts/admin/templates/customize-colors-show.hbs

@@ -5,13 +5,13 @@
       {{#unless model.theme_id}}
       <button {{action "save"}} disabled={{model.disableSave}} class='btn'>{{i18n 'admin.customize.save'}}</button>
       {{/unless}}
-      <button {{action "copy" model}} class='btn'><i class="fa fa-copy"></i> {{i18n 'admin.customize.copy'}}</button>
-      <button {{action "copyToClipboard" model}} class='btn'><i class="fa fa-clipboard"></i> {{i18n 'admin.customize.copy_to_clipboard'}}</button>
+      <button {{action "copy" model}} class='btn'>{{d-icon "copy"}} {{i18n 'admin.customize.copy'}}</button>
+      <button {{action "copyToClipboard" model}} class='btn'>{{d-icon "clipboard"}} {{i18n 'admin.customize.copy_to_clipboard'}}</button>
       {{#if model.theme_id}}
       {{i18n "admin.customize.theme_owner"}}
       {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
       {{else}}
-      <button {{action "destroy"}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n 'admin.customize.delete'}}</button>
+      <button {{action "destroy"}} class='btn btn-danger'>{{d-icon "trash-o"}} {{i18n 'admin.customize.delete'}}</button>
       {{/if}}
       <span class="saving {{unless model.savingStatus 'hidden'}}">{{model.savingStatus}}</span>
     </div>

app/assets/javascripts/admin/templates/customize-themes-edit.hbs

@@ -53,7 +53,7 @@
         {{/each}}
         <li class='toggle-maximize'>
           <a {{action "toggleMaximize"}}>
-            <i class="fa fa-{{maximizeIcon}}"></i>
+            {{d-icon maximizeIcon}}
           </a>
         </li>
       </ul>

app/assets/javascripts/admin/templates/flags-list.hbs

@@ -19,7 +19,9 @@
                   {{#if flaggedPost.postAuthorFlagged}}
                     {{#if flaggedPost.user}}
                       {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
-                      {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
+                      {{#if flaggedPost.wasEdited}}
+                        {{d-icon "pencil" title="admin.flags.was_edited"}}
+                      {{/if}}
                     {{/if}}
                   {{/if}}
                   {{#if adminActiveFlagsView}}
@@ -90,7 +92,7 @@
                           {{format-age flagger.disposedAt}}
                           {{{flagger.dispositionIcon}}}
                           {{#if flagger.tookAction}}
-                            <i class='fa fa-gavel' title='{{i18n 'admin.flags.took_action'}}'></i>
+                            {{d-icon "gavel" title="admin.flags.took_action"}}
                           {{/if}}
                         </td>
                       </tr>
@@ -129,7 +131,8 @@
                       </p>
                     {{/if}}
                     <a href="{{unbound c.permalink}}">
-                      <button class='btn btn-reply'><i class="fa fa-reply"></i>&nbsp;{{i18n 'admin.flags.reply_message'}}</button>
+                      <button class='btn btn-reply'>{{d-icon "reply"}}&nbsp;{{i18n 'admin.flags.reply_message'}}</button>
+
                     </a>
                   {{/if}}
                 </div>
@@ -141,14 +144,14 @@
             <tr>
               <td colspan="3" class="action">
                 {{#if adminActiveFlagsView}}
-                  <button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree'}}&hellip;</button>
+                <button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}>{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.agree'}}&hellip;</button>
                   {{#if flaggedPost.postHidden}}
-                    <button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
+                  <button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}>{{d-icon "thumbs-o-down"}}{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
                   {{else}}
-                    <button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag'}}</button>
+                  <button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}>{{d-icon "thumbs-o-down"}}>{{i18n 'admin.flags.disagree_flag'}}</button>
                   {{/if}}
-                  <button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}><i class="fa fa-external-link"></i>{{i18n 'admin.flags.defer_flag'}}</button>
-                  <button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}><i class="fa fa-trash-o"></i>{{i18n 'admin.flags.delete'}}&hellip;</button>
+                  <button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}>{{d-icon "external-link"}}{{i18n 'admin.flags.defer_flag'}}</button>
+                  <button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}>{{d-icon "trash-o"}}{{i18n 'admin.flags.delete'}}&hellip;</button>
                 {{/if}}
               </td>
             </tr>

app/assets/javascripts/admin/templates/modal/admin-agree-flag.hbs

@@ -1,13 +1,13 @@
 {{#d-modal-body title="admin.flags.agree_flag_modal_title"}}
   {{#if model.user_deleted}}
-    <button title="{{i18n 'admin.flags.agree_flag_restore_post_title'}}" {{action "agreeFlagRestorePost"}} class="btn"><i class="fa fa-thumbs-o-up"></i><i class="fa fa-eye"></i>{{i18n 'admin.flags.agree_flag_restore_post'}}</button>
+  <button title={{i18n 'admin.flags.agree_flag_restore_post_title'}} {{action "agreeFlagRestorePost"}} class="btn">{{d-icon "thumbs-o-up"}}{{d-icon "eye"}}{{i18n 'admin.flags.agree_flag_restore_post'}}</button>
   {{else}}
     {{#unless model.postHidden}}
-      <button title="{{i18n 'admin.flags.agree_flag_hide_post_title'}}" {{action "agreeFlagHidePost"}} class="btn"><i class="fa fa-thumbs-o-up"></i><i class="fa fa-eye-slash"></i>{{i18n 'admin.flags.agree_flag_hide_post'}}</button>
+    <button title="{{i18n 'admin.flags.agree_flag_hide_post_title'}}" {{action "agreeFlagHidePost"}} class="btn">{{d-icon "thumbs-o-up"}}{{d-icon "eye-slash"}}{{i18n 'admin.flags.agree_flag_hide_post'}}</button>
     {{/unless}}
   {{/if}}
-  <button title="{{i18n 'admin.flags.agree_flag_title'}}" {{action "agreeFlagKeepPost"}} class="btn"><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree_flag'}}</button>
+  <button title="{{i18n 'admin.flags.agree_flag_title'}}" {{action "agreeFlagKeepPost"}} class="btn">{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.agree_flag'}}</button>
   {{#if model.canDeleteAsSpammer}}
-    <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i>{{i18n 'admin.flags.delete_spammer'}}</button>
+  <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger">{{d-icon "exclamation-triangle"}}{{i18n 'admin.flags.delete_spammer'}}</button>
   {{/if}}
 {{/d-modal-body}}

app/assets/javascripts/admin/templates/modal/admin-badge-preview.hbs

@@ -24,7 +24,7 @@
 
     {{#if count_warning}}
       <div class="count-warning">
-        <p class="heading"><i class="fa fa-warning"></i> {{i18n 'admin.badges.preview.bad_count_warning.header'}}</p>
+        <p class="heading">{{d-icon "warning"}} {{i18n 'admin.badges.preview.bad_count_warning.header'}}</p>
         <p class="body">{{i18n 'admin.badges.preview.bad_count_warning.text'}}</p>
       </div>
     {{/if}}

app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs

@@ -1,7 +1,7 @@
 {{#d-modal-body title="admin.flags.delete_flag_modal_title"}}
-  <button title="{{i18n 'admin.flags.delete_post_defer_flag_title'}}" {{action "deletePostDeferFlag"}} class="btn"><i class="fa fa-trash-o"></i><i class="fa fa-external-link"></i>{{i18n 'admin.flags.delete_post_defer_flag'}}</button>
-  <button title="{{i18n 'admin.flags.delete_post_agree_flag_title'}}" {{action "deletePostAgreeFlag"}} class="btn"><i class="fa fa-trash-o"></i><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.delete_post_agree_flag'}}</button>
+<button title="{{i18n 'admin.flags.delete_post_defer_flag_title'}}" {{action "deletePostDeferFlag"}} class="btn">{{d-icon "trash-o"}}{{d-icon "external-link"}}{{i18n 'admin.flags.delete_post_defer_flag'}}</button>
+<button title="{{i18n 'admin.flags.delete_post_agree_flag_title'}}" {{action "deletePostAgreeFlag"}} class="btn">{{d-icon "trash-o"}}{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.delete_post_agree_flag'}}</button>
   {{#if model.canDeleteAsSpammer}}
-    <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i>{{i18n 'admin.flags.delete_spammer'}}</button>
+  <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger">{{d-icon "exclamation-triangle"}}{{i18n 'admin.flags.delete_spammer'}}</button>
   {{/if}}
 {{/d-modal-body}}

app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs

@@ -11,6 +11,6 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  <button class='btn btn-danger' {{action "suspend"}} disabled={{submitDisabled}}><i class='fa fa-ban'></i>{{i18n 'admin.user.suspend'}}</button>
+  <button class='btn btn-danger' {{action "suspend"}} disabled={{submitDisabled}}>{{d-icon "ban"}}{{i18n 'admin.user.suspend'}}</button>
   <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
 </div>

app/assets/javascripts/admin/templates/user-badges.hbs

@@ -1,7 +1,7 @@
 <div class='admin-controls'>
   <div class='span15'>
     <ul class='nav nav-pills'>
-      <li>{{#link-to 'adminUser' user}}<i class="fa fa-caret-left"></i> &nbsp;{{user.username}}{{/link-to}}</li>
+      <li>{{#link-to 'adminUser' user}}{{d-icon "caret-left"}} &nbsp;{{user.username}}{{/link-to}}</li>
     </ul>
   </div>
 </div>

app/assets/javascripts/admin/templates/user-index.hbs

@@ -281,9 +281,11 @@
     <div class="controls">
       {{#if model.canLockTrustLevel}}
         {{#if model.trust_level_locked}}
-          <i title='{{i18n 'admin.user.trust_level_locked_tip'}}' class='fa fa-lock'></i> {{d-button action="lockTrustLevel" actionParam=false label="admin.user.unlock_trust_level"}}
+          {{d-icon "lock" title="admin.user.trust_level_locked_tip"}}
+          {{d-button action="lockTrustLevel" actionParam=false label="admin.user.unlock_trust_level"}}
         {{else}}
-          <i title='{{i18n 'admin.user.trust_level_unlocked_tip'}}' class='fa fa-unlock'></i> {{d-button action="lockTrustLevel" actionParam=true label="admin.user.lock_trust_level"}}
+          {{d-icon "unlock" title="admin.user.trust_level_unlocked_tip"}}
+          {{d-button action="lockTrustLevel" actionParam=true label="admin.user.lock_trust_level"}}
         {{/if}}
       {{/if}}
       {{#if model.tl3Requirements}}

app/assets/javascripts/admin/templates/user-tl3-requirements.hbs

@@ -1,7 +1,7 @@
 <div class='admin-controls'>
   <div class='span15'>
     <ul class="nav nav-pills">
-      <li>{{#link-to 'adminUser' model}}<i class="fa fa-caret-left"></i> &nbsp;{{model.username}}{{/link-to}}</li>
+      <li>{{#link-to 'adminUser' model}}{{d-icon "caret-left"}} &nbsp;{{model.username}}{{/link-to}}</li>
       <li>{{#link-to 'adminUsersList.show' 'member'}}{{i18n 'admin.user.trust_level_2_users'}}{{/link-to}}</li>
     </ul>
   </div>
@@ -24,7 +24,7 @@
     <tbody>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.visits'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.days_visited 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.days_visited}}</td>
         <td>
           {{model.tl3Requirements.days_visited_percent}}% ({{model.tl3Requirements.days_visited}} / {{model.tl3Requirements.time_period}} {{i18n 'admin.user.tl3_requirements.days'}})
         </td>
@@ -32,67 +32,67 @@
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_replied_to'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_replied_to 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_replied_to}}</td>
         <td>{{model.tl3Requirements.num_topics_replied_to}}</td>
         <td>{{model.tl3Requirements.min_topics_replied_to}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_viewed'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_viewed 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_viewed}}</td>
         <td>{{model.tl3Requirements.topics_viewed}}</td>
         <td>{{model.tl3Requirements.min_topics_viewed}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_viewed_all_time'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_viewed_all_time 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_viewed_all_time}}</td>
         <td>{{model.tl3Requirements.topics_viewed_all_time}}</td>
         <td>{{model.tl3Requirements.min_topics_viewed_all_time}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.posts_read'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.posts_read 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.posts_read}}</td>
         <td>{{model.tl3Requirements.posts_read}}</td>
         <td>{{model.tl3Requirements.min_posts_read}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.posts_read_all_time'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.posts_read_all_time 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.posts_read_all_time}}</td>
         <td>{{model.tl3Requirements.posts_read_all_time}}</td>
         <td>{{model.tl3Requirements.min_posts_read_all_time}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.flagged_posts'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.flagged_posts 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.flagged_posts}}</td>
         <td>{{model.tl3Requirements.num_flagged_posts}}</td>
         <td>{{i18n 'max_of_count' count=model.tl3Requirements.max_flagged_posts}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.flagged_by_users'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.flagged_by_users 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.flagged_by_users}}</td>
         <td>{{model.tl3Requirements.num_flagged_by_users}}</td>
         <td>{{i18n 'max_of_count' count=model.tl3Requirements.max_flagged_by_users}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_given'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_given 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_given}}</td>
         <td>{{model.tl3Requirements.num_likes_given}}</td>
         <td>{{model.tl3Requirements.min_likes_given}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received}}</td>
         <td>{{model.tl3Requirements.num_likes_received}}</td>
         <td>{{model.tl3Requirements.min_likes_received}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received_days'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received_days 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received_days}}</td>
         <td>{{model.tl3Requirements.num_likes_received_days}}</td>
         <td>{{model.tl3Requirements.min_likes_received_days}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received_users'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received_users 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received_users}}</td>
         <td>{{model.tl3Requirements.num_likes_received_users}}</td>
         <td>{{model.tl3Requirements.min_likes_received_users}}</td>
       </tr>
@@ -105,16 +105,16 @@
       {{#if model.tl3Requirements.requirements_lost}}
         {{! tl implicitly not locked }}
         {{#if model.tl3Requirements.on_grace_period}}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
         {{else}} {{! not on grace period }}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
                                       {{i18n 'admin.user.tl3_requirements.will_be_demoted'}}
         {{/if}}
       {{else}} {{! requirements not lost - remains tl3 }}
         {{#if model.tl3Requirements.trust_level_locked}}
-          <i class="fa fa-lock"></i> {{i18n 'admin.user.tl3_requirements.locked_will_not_be_demoted'}}
+          {{d-icon "lock"}} {{i18n 'admin.user.tl3_requirements.locked_will_not_be_demoted'}}
         {{else}} {{! tl not locked }}
-          <i class="fa fa-check"></i> {{i18n 'admin.user.tl3_requirements.qualifies'}}
+          {{d-icon "check"}} {{i18n 'admin.user.tl3_requirements.qualifies'}}
           {{#if model.tl3Requirements.on_grace_period}}
             {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
           {{/if}}
@@ -123,13 +123,13 @@
     {{else}} {{! is not tl3 }}
       {{#if model.tl3Requirements.requirements_met}}
         {{! met & not tl3 - will be promoted}}
-        <i class="fa fa-check"></i> {{i18n 'admin.user.tl3_requirements.qualifies'}}
+        {{d-icon "check"}} {{i18n 'admin.user.tl3_requirements.qualifies'}}
                                     {{i18n 'admin.user.tl3_requirements.will_be_promoted'}}
       {{else}} {{! requirements not met - remains regular }}
         {{#if model.tl3Requirements.trust_level_locked}}
-          <i class="fa fa-lock"></i> {{i18n 'admin.user.tl3_requirements.locked_will_not_be_promoted'}}
+          {{d-icon "lock"}} {{i18n 'admin.user.tl3_requirements.locked_will_not_be_promoted'}}
         {{else}}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
         {{/if}}
       {{/if}}
     {{/if}}