From 63e3b4b447b11e6dd11a5fe0e680ada4e4a8b02c Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 21 Jan 2021 04:12:13 -0600
Subject: [PATCH] views: factor out FontAwesome icons.

Factor out FontAwesome icons into a set of helpers. This is so that it's
easier to keep track of which icons we're using and easier to change
icons globally.
---
 app/components/comment_component.rb           |   2 +-
 .../comment_component.html.erb                |  12 +-
 app/components/popup_menu_component.rb        |   1 +
 .../popup_menu_component.html.erb             |   2 +-
 app/components/post_preview_component.rb      |   2 +-
 .../post_preview_component.html.erb           |   2 +-
 app/helpers/forum_topics_helper.rb            |  10 ++
 app/helpers/icon_helper.rb                    | 130 ++++++++++++++++++
 app/helpers/pagination_helper.rb              |  10 +-
 .../src/styles/common/main_layout.scss        |   6 -
 app/javascript/src/styles/specific/posts.scss |   4 +-
 app/models/forum_post_vote.rb                 |  10 --
 .../comments/partials/index/_header.html.erb  |   2 +-
 app/views/forum_post_votes/_add_vote.html.erb |   6 +-
 app/views/forum_post_votes/_vote.html.erb     |   4 +-
 app/views/forum_topics/_listing.html.erb      |   8 +-
 app/views/layouts/default.html.erb            |   4 +-
 app/views/modqueue/_post.html.erb             |   2 +-
 app/views/modqueue/_sidebar.html.erb          |   2 +-
 .../posts/partials/common/_search.html.erb    |   2 +-
 .../posts/partials/index/_options.html.erb    |   2 +-
 app/views/posts/partials/show/_edit.html.erb  |   4 +-
 .../posts/partials/show/_information.html.erb |   4 +-
 app/views/posts/show.html+tooltip.erb         |   8 +-
 app/views/posts/show.html.erb                 |   4 +-
 app/views/sources/_info.html.erb              |   2 +-
 app/views/uploads/new.html.erb                |   4 +-
 app/views/users/_statistics.html.erb          |   6 +-
 app/views/users/show.html+tooltip.erb         |  17 +--
 29 files changed, 199 insertions(+), 73 deletions(-)
 create mode 100644 app/helpers/icon_helper.rb

diff --git a/app/components/comment_component.rb b/app/components/comment_component.rb
index d4a9427cb..9c0ecd420 100644
--- a/app/components/comment_component.rb
+++ b/app/components/comment_component.rb
@@ -2,7 +2,7 @@
 
 class CommentComponent < ApplicationComponent
   attr_reader :comment, :context, :dtext_data, :current_user
-  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, to: :helpers
+  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, to: :helpers
 
   def initialize(comment:, current_user:, context: nil, dtext_data: nil)
     @comment = comment
diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb
index d931f22b7..1b11545f8 100644
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -89,21 +89,18 @@
           <% if policy(comment).update? %>
             <%= menu.item do %>
               <%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %>
-                <i class="icon fas fa-edit"></i>
-                Edit
+                <%= edit_icon %> Edit
               <% end %>
             <% end %>
 
             <%= menu.item do %>
               <% if comment.is_deleted? %>
                 <%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %>
-                  <i class="icon fas fa-trash-restore-alt"></i>
-                  Undelete
+                  <%= undelete_icon %> Undelete
                 <% end %>
               <% else %>
                 <%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %>
-                  <i class="icon fas fa-trash-alt"></i>
-                  Delete
+                  <%= delete_icon %> Delete
                 <% end %>
               <% end %>
             <% end %>
@@ -112,8 +109,7 @@
           <% if policy(comment).reportable? %>
             <%= menu.item do %>
               <%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %>
-                <i class="icon fas fa-flag"></i>
-                Report
+                <%= flag_icon %> Report
               <% end %>
             <% end %>
           <% end %>
diff --git a/app/components/popup_menu_component.rb b/app/components/popup_menu_component.rb
index 63463ad02..620a3e33b 100644
--- a/app/components/popup_menu_component.rb
+++ b/app/components/popup_menu_component.rb
@@ -2,6 +2,7 @@
 
 class PopupMenuComponent < ApplicationComponent
   include ViewComponent::SlotableV2
+  delegate :ellipsis_icon, to: :helpers
 
   renders_many :items
 end
diff --git a/app/components/popup_menu_component/popup_menu_component.html.erb b/app/components/popup_menu_component/popup_menu_component.html.erb
index 843bf628d..7e4904443 100644
--- a/app/components/popup_menu_component/popup_menu_component.html.erb
+++ b/app/components/popup_menu_component/popup_menu_component.html.erb
@@ -1,6 +1,6 @@
 <div class="popup-menu">
   <a class="popup-menu-button" href="javascript:void(0)">
-    <i class="fas fa-ellipsis-h"></i>
+    <%= ellipsis_icon %>
   </a>
 
   <ul class="popup-menu-content">
diff --git a/app/components/post_preview_component.rb b/app/components/post_preview_component.rb
index f598c10b6..914d5d138 100644
--- a/app/components/post_preview_component.rb
+++ b/app/components/post_preview_component.rb
@@ -4,7 +4,7 @@ class PostPreviewComponent < ApplicationComponent
   with_collection_parameter :post
 
   attr_reader :post, :tags, :show_deleted, :show_cropped, :link_target, :pool, :pool_id, :favgroup_id, :similarity, :recommended, :compact, :size, :current_user, :options
-  delegate :external_link_to, :time_ago_in_words_tagged, to: :helpers
+  delegate :external_link_to, :time_ago_in_words_tagged, :favorite_icon, to: :helpers
 
   def initialize(post:, tags: "", show_deleted: false, show_cropped: true, link_target: post, pool: nil, pool_id: nil, favgroup_id: nil, similarity: nil, recommended: nil, compact: nil, size: nil, current_user: CurrentUser.user, **options)
     @post = post
diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb
index e2d7ebdc2..40b0f5366 100644
--- a/app/components/post_preview_component/post_preview_component.html.erb
+++ b/app/components/post_preview_component/post_preview_component.html.erb
@@ -38,7 +38,7 @@
       <%= link_to recommended_posts_path(search: { post_id: post.id }), class: "more-recommended-posts", "data-post-id": post.id do %>
         <%= post.fav_count %>
 
-        <i class="far fa-heart fa-xs"></i>
+        <%= favorite_icon(class: "fa-xs") %>
 
         <br>more »
       <% end %>
diff --git a/app/helpers/forum_topics_helper.rb b/app/helpers/forum_topics_helper.rb
index 993f99e40..29296c89c 100644
--- a/app/helpers/forum_topics_helper.rb
+++ b/app/helpers/forum_topics_helper.rb
@@ -20,4 +20,14 @@ module ForumTopicsHelper
       :rejected
     end
   end
+
+  def forum_post_vote_icon(vote)
+    if vote.score == 1
+      upvote_icon
+    elsif vote.score == -1
+      downvote_icon
+    else
+      meh_icon
+    end
+  end
 end
diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
new file mode 100644
index 000000000..506b5b825
--- /dev/null
+++ b/app/helpers/icon_helper.rb
@@ -0,0 +1,130 @@
+module IconHelper
+  def icon_tag(icon_class, class: nil, **options)
+    klass = binding.local_variable_get(:class)
+    tag.i(class: "icon #{icon_class} #{klass}", **options)
+  end
+
+  def upvote_icon(**options)
+    icon_tag("far fa-thumbs-up", **options)
+  end
+
+  def downvote_icon(**options)
+    icon_tag("far fa-thumbs-down", **options)
+  end
+
+  def sticky_icon(**options)
+    icon_tag("fas fa-thumbtack", **options)
+  end
+
+  def lock_icon(**options)
+    icon_tag("fas fa-lock", **options)
+  end
+
+  def delete_icon(**options)
+    icon_tag("fas fa-trash-alt", **options)
+  end
+
+  def undelete_icon(**options)
+    icon_tag("fas fa-trash-restore_alt", **options)
+  end
+
+  def private_icon(**options)
+    icon_tag("fas fa-hand-paper", **options)
+  end
+
+  def menu_icon(**options)
+    icon_tag("fas fa-bars", **options)
+  end
+
+  def close_icon(**options)
+    icon_tag("fas fa-times", **options)
+  end
+
+  def search_icon(**options)
+    icon_tag("fas fa-search", **options)
+  end
+
+  def bookmark_icon(**options)
+    icon_tag("fas fa-bookmark", **options)
+  end
+
+  def favorite_icon(**options)
+    icon_tag("far fa-heart", **options)
+  end
+
+  def comments_icon(**options)
+    icon_tag("far fa-comments", **options)
+  end
+
+  def spinner_icon(**options)
+    icon_tag("fas fa-spinner fa-spin", **options)
+  end
+
+  def external_link_icon(**options)
+    icon_tag("fas fa-external-link-alt", **options)
+  end
+
+  def checkmark_icon(**options)
+    icon_tag("fas fa-check-circle", **options)
+  end
+
+  def exclamation_icon(**options)
+    icon_tag("fas fa-exclamation-triangle", **options)
+  end
+
+  def meh_icon(**options)
+    icon_tag("far fa-meh", **options)
+  end
+
+  def avatar_icon(**options)
+    icon_tag("fas fa-user-circle", **options)
+  end
+
+  def medal_icon(**options)
+    icon_tag("fas fa-medal", **options)
+  end
+
+  def negative_icon(**options)
+    icon_tag("fas fa-times-circle", **options)
+  end
+
+  def message_icon(**options)
+    icon_tag("far fa-envelope", **options)
+  end
+
+  def gift_icon(**options)
+    icon_tag("fas fa-gift", **options)
+  end
+
+  def feedback_icon(**options)
+    icon_tag("fas fa-file-signature", **options)
+  end
+
+  def promotion_icon(**options)
+    icon_tag("fas fa-user-plus", **options)
+  end
+
+  def ban_icon(**options)
+    icon_tag("fas fa-user-slash", **options)
+  end
+
+  def chevron_left_icon(**options)
+    icon_tag("fas fa-chevron-left", **options)
+  end
+
+  def chevron_right_icon(**options)
+    icon_tag("fas fa-chevron-right", **options)
+  end
+
+  def ellipsis_icon(**options)
+    icon_tag("fas fa-ellipsis-h", **options)
+  end
+
+  def edit_icon(**options)
+    icon_tag("fas fa-edit", **options)
+  end
+
+  def flag_icon(**options)
+    icon_tag("fas fa-flag", **options)
+  end
+end
diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb
index c07466e64..b1bd2ac7d 100644
--- a/app/helpers/pagination_helper.rb
+++ b/app/helpers/pagination_helper.rb
@@ -29,9 +29,9 @@ module PaginationHelper
     window = 4
 
     if records.current_page >= 2
-      html << "<li class='arrow'>" + link_to(content_tag(:i, nil, class: "fas fa-chevron-left"), nav_params_for(records.current_page - 1), rel: "prev", id: "paginator-prev", "data-shortcut": "a left") + "</li>"
+      html << "<li class='arrow'>" + link_to(chevron_left_icon, nav_params_for(records.current_page - 1), rel: "prev", id: "paginator-prev", "data-shortcut": "a left") + "</li>"
     else
-      html << "<li class='arrow'><span>" + content_tag(:i, nil, class: "fas fa-chevron-left") + "</span></li>"
+      html << "<li class='arrow'><span>" + chevron_left_icon + "</span></li>"
     end
 
     if records.total_pages <= (window * 2) + 5
@@ -69,9 +69,9 @@ module PaginationHelper
     end
 
     if records.current_page < records.total_pages && records.present?
-      html << "<li class='arrow'>" + link_to(content_tag(:i, nil, class: "fas fa-chevron-right"), nav_params_for(records.current_page + 1), rel: "next", id: "paginator-next", "data-shortcut": "d right") + "</li>"
+      html << "<li class='arrow'>" + link_to(chevron_right_icon, nav_params_for(records.current_page + 1), rel: "next", id: "paginator-next", "data-shortcut": "d right") + "</li>"
     else
-      html << "<li class='arrow'><span>" + content_tag(:i, nil, class: "fas fa-chevron-right") + "</span></li>"
+      html << "<li class='arrow'><span>" + chevron_right_icon + "</span></li>"
     end
 
     html << "</menu></div>"
@@ -92,7 +92,7 @@ module PaginationHelper
     html = []
     if page == "..."
       html << "<li class='more'>"
-      html << content_tag(:i, nil, class: "fas fa-ellipsis-h")
+      html << ellipsis_icon
       html << "</li>"
     elsif page == current_page
       html << "<li class='current-page'>"
diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index 31311a6a2..4a9a0c367 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -5,12 +5,6 @@ div#page {
   margin: 0 20px;
   padding: 0 10px;
 
-  aside#sidebar {
-    #options-box i.fa-bookmark {
-      margin-right: 0.25em;
-    }
-  }
-
   aside#sidebar > section {
     margin-bottom: 1em;
   }
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index c9e94df39..b0f70c642 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -79,7 +79,7 @@ div#c-posts {
     }
   }
 
-  #remove-fav-button i.fa-heart {
+  form#remove-fav-button button:not([disabled]) i.icon {
     color: var(--remove-favorite-button);
   }
 
@@ -364,7 +364,7 @@ div#c-posts, div#c-uploads {
       display: inline-block;
     }
 
-    i.fa-external-link-alt {
+    i#open-edit-dialog {
       font-size: var(--text-xs);
     }
 
diff --git a/app/models/forum_post_vote.rb b/app/models/forum_post_vote.rb
index 6a2ac7926..d4972e60d 100644
--- a/app/models/forum_post_vote.rb
+++ b/app/models/forum_post_vote.rb
@@ -36,16 +36,6 @@ class ForumPostVote < ApplicationRecord
     score == 0
   end
 
-  def fa_class
-    if score == 1
-      return "fa-thumbs-up"
-    elsif score == -1
-      return "fa-thumbs-down"
-    else
-      return "fa-meh"
-    end
-  end
-
   def vote_type
     if score == 1
       return "up"
diff --git a/app/views/comments/partials/index/_header.html.erb b/app/views/comments/partials/index/_header.html.erb
index da2bb9463..ea8d6deac 100644
--- a/app/views/comments/partials/index/_header.html.erb
+++ b/app/views/comments/partials/index/_header.html.erb
@@ -17,7 +17,7 @@
       <span>
         <span id="score-for-post-<%= post.id %>"><%= post.score %></span>
         <% if policy(PostVote).create? %>
-          (vote <%= link_to(content_tag("i", nil, class: "far fa-thumbs-up"), post_post_votes_path(:score => "up", :post_id => post.id), :remote => true, :method => :post) %>/<%= link_to(content_tag("i", nil, class: "far fa-thumbs-down"), post_post_votes_path(:score => "down", :post_id => post.id), :remote => true, :method => :post) %>)
+          (vote <%= link_to upvote_icon, post_post_votes_path(score: "up", post_id: post.id), remote: true, method: :post %>/<%= link_to downvote_icon, post_post_votes_path(score: "down", post_id: post.id), remote: true, method: :post %>)
         <% end %>
       </span>
     </span>
diff --git a/app/views/forum_post_votes/_add_vote.html.erb b/app/views/forum_post_votes/_add_vote.html.erb
index d8610890e..f0c5b7022 100644
--- a/app/views/forum_post_votes/_add_vote.html.erb
+++ b/app/views/forum_post_votes/_add_vote.html.erb
@@ -3,9 +3,9 @@
 %>
 
 <li>
-  <%= link_to content_tag(:i, nil, class: "far fa-thumbs-up"), forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=1"}, title: "Vote up" %>
+  <%= link_to upvote_icon, forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=1"}, title: "Vote up" %>
 
-  <%= link_to content_tag(:i, nil, class: "far fa-meh"), forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=0"}, title: "Vote meh" %>
+  <%= link_to meh_icon, forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=0"}, title: "Vote meh" %>
 
-  <%= link_to content_tag(:i, nil, class: "far fa-thumbs-down"), forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=-1"}, title: "Vote down" %>
+  <%= link_to downvote_icon, forum_post_votes_path(forum_post_id: forum_post.id, format: "js"), remote: true, method: :post, data: {params: "forum_post_vote[score]=-1"}, title: "Vote down" %>
 </li>
diff --git a/app/views/forum_post_votes/_vote.html.erb b/app/views/forum_post_votes/_vote.html.erb
index a22e093f8..36998b8e3 100644
--- a/app/views/forum_post_votes/_vote.html.erb
+++ b/app/views/forum_post_votes/_vote.html.erb
@@ -5,10 +5,10 @@
 
 <li class="vote-score-<%= vote.vote_type %>">
   <% if policy(forum_post).votable? && vote.creator_id == CurrentUser.id %>
-    <%= link_to content_tag(:i, nil, class: "far #{vote.fa_class}"), forum_post_vote_path(vote, format: "js"), remote: true, method: :delete %>
+    <%= link_to forum_post_vote_icon(vote), forum_post_vote_path(vote, format: "js"), remote: true, method: :delete %>
     <%= link_to_user vote.creator %>
   <% else %>
-    <%= content_tag(:i, nil, class: "far #{vote.fa_class}") %>
+    <%= forum_post_vote_icon(vote) %>
     <%= link_to_user vote.creator %>
   <% end %>
 </li>
diff --git a/app/views/forum_topics/_listing.html.erb b/app/views/forum_topics/_listing.html.erb
index 8b6baa356..bd04313c1 100644
--- a/app/views/forum_topics/_listing.html.erb
+++ b/app/views/forum_topics/_listing.html.erb
@@ -8,25 +8,25 @@
 
     <% if topic.is_sticky? %>
       <%= link_to forum_topics_path(search: { is_sticky: true }) do %>
-        <i class="topic-status icon stickied fas fa-thumbtack" title="Stickied"></i>
+        <%= sticky_icon(class: "topic-status stickied", title: "Stickied") %>
       <% end %>
     <% end %>
 
     <% if topic.is_locked? %>
       <%= link_to forum_topics_path(search: { is_locked: true }) do %>
-        <i class="topic-status icon locked fas fa-lock" title="Locked"></i>
+        <%= lock_icon(class: "topic-status locked", title: "Locked") %>
       <% end %>
     <% end %>
 
     <% if topic.is_deleted? %>
       <%= link_to forum_topics_path(search: { is_deleted: true }) do %>
-        <i class="topic-status icon deleted fas fa-trash-alt" title="Deleted"></i>
+        <%= delete_icon(class: "topic-status deleted", title: "Deleted") %>
       <% end %>
     <% end %>
 
     <% if topic.is_private? %>
       <%= link_to forum_topics_path(search: { is_private: true }) do %>
-        <i class="topic-status icon private fas fa-hand-paper" title="<%= User.level_string(topic.min_level) %> only"></i>
+        <%= private_icon(class: "topic-status private", title: "#{User.level_string(topic.min_level)} only") %>
       <% end %>
     <% end %>
 
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 7e8e6d87d..abab235d3 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -53,8 +53,8 @@
     <%= link_to Danbooru.config.app_name, root_path, id: "app-name-header", class: "heading" %>
 
     <div id="maintoggle" class="mobile-only">
-      <a href="#"><i id="maintoggle-on" class="fas fa-bars"></i></a>
-      <a href="#"><i id="maintoggle-off" class="fas fa-times" style="display: none;"></i></a>
+      <a href="#"><%= menu_icon(id: "maintoggle-on") %></a>
+      <a href="#"><%= close_icon(id: "maintoggle-off", style: "display: none;") %></a>
     </div>
 
     <nav id="nav">
diff --git a/app/views/modqueue/_post.html.erb b/app/views/modqueue/_post.html.erb
index e03ade512..862d4d74e 100644
--- a/app/views/modqueue/_post.html.erb
+++ b/app/views/modqueue/_post.html.erb
@@ -31,7 +31,7 @@
         <span>
           <span id="score-for-post-<%= post.id %>"><%= post.score %></span>
           <% if policy(PostVote).create? %>
-            (vote <%= link_to tag.i(class: "far fa-thumbs-up"), post_post_votes_path(score: "up", post_id: post.id), remote: true, method: :post %>/<%= link_to tag.i(class: "far fa-thumbs-down"), post_post_votes_path(score: "down", post_id: post.id), remote: true, method: :post %>)
+            (vote <%= link_to upvote_icon, post_post_votes_path(score: "up", post_id: post.id), remote: true, method: :post %>/<%= link_to downvote_icon, post_post_votes_path(score: "down", post_id: post.id), remote: true, method: :post %>)
           <% end %>
         </span>
       </span>
diff --git a/app/views/modqueue/_sidebar.html.erb b/app/views/modqueue/_sidebar.html.erb
index 9694ff8e0..c058a27a5 100644
--- a/app/views/modqueue/_sidebar.html.erb
+++ b/app/views/modqueue/_sidebar.html.erb
@@ -5,7 +5,7 @@
     <%= f.input :tags, label: false, input_html: { placeholder: "Tags", value: params.dig(:search, :tags), "data-autocomplete": "tag-query" } %>
     <%= f.input :order, label: false, collection: [["Newest", "modqueue"], ["Oldest", "modqueue_asc"], ["Score (Highest)", "score"], ["Score (Lowest)", "score_asc"]], selected: params[:search][:order] %>
     <%= f.button :button, name: nil, id: "search-box-submit" do %>
-      <i class="fas fa-search"></i>
+      <%= search_icon %>
     <% end %>
   <% end %>
 
diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb
index a790825e5..27e0dc098 100644
--- a/app/views/posts/partials/common/_search.html.erb
+++ b/app/views/posts/partials/common/_search.html.erb
@@ -7,6 +7,6 @@
       <%= hidden_field_tag :random, params[:random] %>
     <% end %>
     <%= text_field_tag("tags", tags, :id => tags_dom_id, :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
-    <button id="search-box-submit" type="submit"><i class="fas fa-search"></i></button>
+    <button id="search-box-submit" type="submit"><%= search_icon %></button>
   <% end %>
 </section>
diff --git a/app/views/posts/partials/index/_options.html.erb b/app/views/posts/partials/index/_options.html.erb
index d47338d92..16c582ad0 100644
--- a/app/views/posts/partials/index/_options.html.erb
+++ b/app/views/posts/partials/index/_options.html.erb
@@ -2,7 +2,7 @@
   <h2>Options</h2>
   <ul>
     <% if policy(SavedSearch).create? %>
-      <li><%= button_tag(tag.i(class: "fas fa-bookmark") + " Save search", id: "save-search", class: "ui-button ui-widget ui-corner-all sub") %></li>
+      <li><%= button_tag(bookmark_icon + " Save search", id: "save-search", class: "ui-button ui-widget ui-corner-all sub") %></li>
     <% end %>
   </ul>
 </section>
diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb
index 73c9a08f7..eb7ba1b6b 100644
--- a/app/views/posts/partials/show/_edit.html.erb
+++ b/app/views/posts/partials/show/_edit.html.erb
@@ -50,7 +50,9 @@
       <%= f.label :tag_string, "Tags" %>
 
       <span data-tag-counter data-for="#post_tag_string"></span>
-      <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-external-link-alt" title="detach" data-shortcut="shift+e"></i></a>
+      <a href="javascript:void(0)">
+        <%= external_link_icon(id: "open-edit-dialog", "data-shortcut": "shift+e") %>
+      </a>
     </div>
 
     <div>
diff --git a/app/views/posts/partials/show/_information.html.erb b/app/views/posts/partials/show/_information.html.erb
index 51ce633b2..a272c1a88 100644
--- a/app/views/posts/partials/show/_information.html.erb
+++ b/app/views/posts/partials/show/_information.html.erb
@@ -25,8 +25,8 @@
     <% if policy(PostVote).create? %>
       <%= tag.span id: "vote-links-for-post-#{post.id}", style: ("display: none;" if !@post.can_be_voted_by?(CurrentUser.user)) do %>
         (vote
-        <%= link_to tag.i(class: "far fa-thumbs-up"), post_post_votes_path(post_id: post.id, score: "up"), remote: true, method: :post %>
-        <%= link_to tag.i(class: "far fa-thumbs-down"), post_post_votes_path(post_id: post.id, score: "down"), remote: true, method: :post %>)
+        <%= link_to upvote_icon, post_post_votes_path(post_id: post.id, score: "up"), remote: true, method: :post %>
+        <%= link_to downvote_icon, post_post_votes_path(post_id: post.id, score: "down"), remote: true, method: :post %>)
       <% end %>
       <%= tag.span id: "unvote-link-for-post-#{post.id}", style: ("display: none;" if @post.can_be_voted_by?(CurrentUser.user)) do %>
         (<%= link_to "undo vote", post_post_votes_path(post), remote: true, method: :delete, class: "unvote-post-link" %>)
diff --git a/app/views/posts/show.html+tooltip.erb b/app/views/posts/show.html+tooltip.erb
index 1e5409ff9..b953115cd 100644
--- a/app/views/posts/show.html+tooltip.erb
+++ b/app/views/posts/show.html+tooltip.erb
@@ -3,18 +3,18 @@
 
   <span class="post-tooltip-favorites post-tooltip-info">
     <span><%= @post.fav_count %></span>
-    <i class="far fa-heart fa-xs"></i>
+    <%= favorite_icon(class: "fa-xs") %>
   </span>
 
   <span class="post-tooltip-score post-tooltip-info">
     <span><%= @post.score %></span>
-    <i class="far fa-thumbs-up fa-xs"></i>
+    <%= upvote_icon(class: "fa-xs") %>
   </span>
 
   <% if @post.last_commented_at.present? %>
     <span class="post-tooltip-comments post-tooltip-info">
       <span><%= @post.comments.count %></span>
-      <i class="far fa-comments fa-xs"></i>
+      <%= comments_icon(class: "fa-xs") %>
     </span>
   <% end %>
 
@@ -32,7 +32,7 @@
   <%= link_to "#{@post.image_width}x#{@post.image_height}", @post.file_url, class: "post-tooltip-dimensions post-tooltip-info" %>
 
   <%= link_to "#", class: "post-tooltip-disable", title: "Disable enhanced tooltips" do %>
-    <i class="fas fa-times-circle"></i>
+    <%= close_icon %>
   <% end %>
 </div>
 
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index 0a6d50aae..420d6ac86 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -52,11 +52,11 @@
   <% if policy(Favorite).create? %>
     <%= content_tag(:div, class: "fav-buttons fav-buttons-#{@post.favorited_by?(CurrentUser.user)}") do %>
       <%= form_tag(favorites_path(post_id: @post.id), method: "post", id: "add-fav-button", "data-remote": true) do %>
-        <%= button_tag tag.i(class: "far fa-heart"), class: "ui-button ui-widget ui-corner-all", "data-disable-with": tag.i(class: "fas fa-spinner fa-spin") %>
+        <%= button_tag favorite_icon, class: "ui-button ui-widget ui-corner-all", "data-disable-with": spinner_icon %>
       <% end %>
 
       <%= form_tag(favorite_path(@post.id), method: "delete", id: "remove-fav-button", "data-remote": true) do %>
-        <%= button_tag tag.i(class: "fas fa-heart"), class: "ui-button ui-widget ui-corner-all", "data-disable-with": tag.i(class: "fas fa-spinner fa-spin") %>
+        <%= button_tag favorite_icon, class: "ui-button ui-widget ui-corner-all", "data-disable-with": spinner_icon %>
       <% end %>
     <% end %>
   <% end %>
diff --git a/app/views/sources/_info.html.erb b/app/views/sources/_info.html.erb
index 9326d9b6b..2c7b1653f 100644
--- a/app/views/sources/_info.html.erb
+++ b/app/views/sources/_info.html.erb
@@ -2,7 +2,7 @@
 
 <div id="source-info">
   <%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %>
-  <i id="source-info-loading" class="fas fa-spinner fa-spin"></i>
+  <%= spinner_icon(id: "source-info-loading") %>
 
   <% if @source.present? %>
     <dl id="source-info-content">
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index cc6c614cb..e63600178 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -66,7 +66,9 @@
             <%= f.label :tag_string, "Tags" %>
 
             <span data-tag-counter data-for="#upload_tag_string"></span>
-            <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-external-link-alt" title="detach" data-shortcut="shift+e"></i></a>
+            <a href="javascript:void(0)">
+              <%= external_link_icon(id: "open-edit-dialog", "data-shortcut": "shift+e") %>
+            </a>
           </div>
 
           <%= f.input :tag_string, label: false, hint: "Ctrl+Enter to submit", input_html: { size: "60x5", "data-autocomplete": "tag-edit", "data-shortcut": "e", value: params[:tag_string] } %>
diff --git a/app/views/users/_statistics.html.erb b/app/views/users/_statistics.html.erb
index 581028cbd..147c67e3b 100644
--- a/app/views/users/_statistics.html.erb
+++ b/app/views/users/_statistics.html.erb
@@ -47,13 +47,13 @@
               <% end %>
 
               <% if user.email_address.is_verified? %>
-                <i class="fas fa-check-circle user-verified-email-icon" title="Verified email"></i>
+                <%= checkmark_icon(class: "user-verified-email-icon", title: "Verified email") %>
               <% elsif user == CurrentUser.user %>
                 <%= link_to verify_user_email_path(user) do %>
-                  <i class="fas fa-exclamation-triangle user-unverified-email-icon" title="Unverified email. Click here to verify your email."></i>
+                  <%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email. Click here to verify your email.") %>
                 <% end %>
               <% else %>
-                <i class="fas fa-exclamation-triangle user-email-unverified" title="Unverified email."></i>
+                <%= exclamation_icon(class: "user-email-unverified", title: "Unverified email") %>
               <% end %>
             <% else %>
               <em>none</em>
diff --git a/app/views/users/show.html+tooltip.erb b/app/views/users/show.html+tooltip.erb
index 1b47ecf0d..b60367d0b 100644
--- a/app/views/users/show.html+tooltip.erb
+++ b/app/views/users/show.html+tooltip.erb
@@ -1,6 +1,7 @@
 <div class="user-tooltip">
   <div class="user-tooltip-header">
-    <i class="fas fa-user-circle user-tooltip-avatar"></i>
+    <%= avatar_icon(class: "user-tooltip-avatar") %>
+
     <div class="user-tooltip-header-top">
       <span class="user-tooltip-name"><%= link_to_user @user %></span>
 
@@ -20,12 +21,12 @@
 
       <% if @user.positive_feedback_count > 0 %>
         <%= link_to user_feedbacks_path(search: { user_id: @user.id }), class: "link-plain user-tooltip-badge user-tooltip-badge-positive-feedback" do %>
-          <i class="fas fa-medal"></i>
+          <%= medal_icon %>
           <span><%= @user.positive_feedback_count %>
         <% end %>
       <% elsif @user.negative_feedback_count > 0 %>
         <%= link_to user_feedbacks_path(search: { user_id: @user.id }), class: "link-plain user-tooltip-badge user-tooltip-badge-negative-feedback" do %>
-          <i class="fas fa-times-circle"></i>
+          <%= negative_icon %>
           <span><%= @user.negative_feedback_count %>
         <% end %>
       <% end %>
@@ -47,14 +48,14 @@
     <%= render PopupMenuComponent.new do |menu| %>
       <%= menu.item do %>
         <%= link_to new_dmail_path(dmail: { to_id: @user.id }) do %>
-          <i class="icon far fa-envelope"></i> Send Message
+          <%= message_icon %> Send Message
         <% end %>
       <% end %>
 
       <% if !@user.is_platinum? %>
         <%= menu.item do %>
           <%= link_to new_user_upgrade_path(user_id: @user.id) do %>
-            <i class="icon fas fa-gift"></i> Gift Upgrade
+            <%= gift_icon %> Gift Upgrade
           <% end %>
         <% end %>
       <% end %>
@@ -62,7 +63,7 @@
       <% if policy(UserFeedback.new(user: @user)).create? %>
         <%= menu.item do %>
           <%= link_to new_user_feedback_path(user_feedback: { user_id: @user.id }) do %>
-            <i class="icon fas fa-file-signature"></i> Give Feedback
+            <%= feedback_icon %> Give Feedback
           <% end %>
         <% end %>
       <% end %>
@@ -70,7 +71,7 @@
       <% if policy(CurrentUser.user).promote? %>
         <%= menu.item do %>
           <%= link_to edit_admin_user_path(@user.id) do %>
-            <i class="icon fas fa-user-plus"></i> Promote User
+            <%= promotion_icon %> Promote User
           <% end %>
         <% end %>
       <% end %>
@@ -78,7 +79,7 @@
       <% if policy(Ban.new(user: @user)).create? %>
         <%= menu.item do %>
           <%= link_to new_ban_path(ban: { user_id: @user.id }) do %>
-            <i class="icon fas fa-user-slash"></i> Ban User
+            <%= ban_icon %> Ban User
           <% end %>
         <% end %>
       <% end %>