Use fontawesome icons directly via far/fas

flaskbb/templates/forum/topic.html

@@ -142,18 +142,18 @@
 
                             {% if current_user|post_reply(topic) %}
                                 <!-- Quick quote -->
-                                <a href="#" class="btn btn-icon icon-reply quote-btn" data-post-id="{{ post.id }}" data-toggle="tooltip" data-placement="top" title="{% trans %}Quote this post{% endtrans %}"></a>
+                                <a href="#" class="btn btn-icon fas fa-reply text-blue quote-btn" data-post-id="{{ post.id }}" data-toggle="tooltip" data-placement="top" title="{% trans %}Quote this post{% endtrans %}"></a>
                                 <!-- Full quote/reply -->
-                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon icon-replyall" data-toggle="tooltip" data-placement="top" title="{% trans %}Full Reply{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon fas fa-reply-all text-light-blue" data-toggle="tooltip" data-placement="top" title="{% trans %}Full Reply{% endtrans %}"></a>
                             {% endif %}
 
                             {% if current_user|edit_post(post) %}
                                 {% if topic.first_post_id == post.id %}
                                 <!-- Edit Topic -->
-                                <a href="{{ url_for('forum.edit_topic', topic_id=topic.id) }}" class="btn btn-icon icon-edit" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this topic{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.edit_topic', topic_id=topic.id) }}" class="btn btn-icon far fa-edit text-green" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this topic{% endtrans %}"></a>
                                 {% else %}
                                 <!-- Edit Post -->
-                                <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon icon-edit" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this post{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon far fa-edit text-green" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit this post{% endtrans %}"></a>
                                 {% endif %}
                             {% endif %}
 
@@ -161,7 +161,7 @@
                                 {% if current_user|delete_topic(topic) %}
                                 <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
                                     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                    <button class="btn btn-icon icon-delete" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this topic{% endtrans %}"></button>
+                                    <button class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this topic{% endtrans %}"></button>
                                 </form>
                                 {% endif %}
                             {% else %}
@@ -169,7 +169,7 @@
                             <!-- Delete Post -->
                                 <form class="inline-form" method="post" action="{{ url_for('forum.delete_post', post_id=post.id) }}">
                                     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                    <button  class="btn btn-icon icon-delete" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this post{% endtrans %}"></button>
+                                    <button  class="btn btn-icon far fa-trash-alt text-red" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete this post{% endtrans %}"></button>
                                 </form>
                                 {% endif %}
 
@@ -177,7 +177,7 @@
 
                             {% if current_user.is_authenticated %}
                             <!-- Report post -->
-                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon icon-report" data-toggle="tooltip" data-placement="top" title="{% trans %}Report this post{% endtrans %}"></a>
+                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon far fa-flag text-orange" data-toggle="tooltip" data-placement="top" title="{% trans %}Report this post{% endtrans %}"></a>
                             {% endif %}
 
                             {% if current_user.permissions.get('makehidden') %}
@@ -185,24 +185,24 @@
                                     {% if topic.hidden %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.unhide_topic', topic_id=topic.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon fa fa-user" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this topic{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this topic{% endtrans %}"></button>
                                     </form>
                                     {% else %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.hide_topic', topic_id=topic.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon fa fa-user-secret" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this topic{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye-slash" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this topic{% endtrans %}"></button>
                                     </form>
                                     {% endif %}
                                 {% else %}
                                     {% if post.hidden %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.unhide_post', post_id=post.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon fa fa-user" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this post{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye" name="unhide" data-toggle="tooltip" data-placement="top" title="{% trans %}Unhide this post{% endtrans %}"></button>
                                     </form>
                                     {% else %}
                                     <form class="inline-form" method="post" action="{{ url_for('forum.hide_post', post_id=post.id) }}">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-icon fa fa-user-secret" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this post{% endtrans %}"></button>
+                                        <button class="btn btn-icon far fa-eye-slash" name="hide" data-toggle="tooltip" data-placement="top" title="{% trans %}Hide this post{% endtrans %}"></button>
                                     </form>
                                     {% endif %}
                                 {% endif %}

flaskbb/themes/aurora/src/scss/_aurora.scss

@@ -1,6 +1,7 @@
 @import "variables";
 @import "mixins";
 
+@import "text";
 @import "misc";
 @import "fixes";
 @import "navigation";

flaskbb/themes/aurora/src/scss/_button.scss

@@ -15,35 +15,9 @@
 }
 
 .btn-icon {
-    font-family: 'FontAwesome';
-    font-size: 1.15em;
+    font-family: 'Font Awesome 5 Free';
+    font-size: 1em;
     line-height: 1.50em;
-    font-weight: normal;
     background: none;
     border-radius: 0;
 }
-
-.icon-delete:before {
-    content: "\f014";
-    color: $red;
-}
-
-.icon-report:before {
-    content: "\f024";
-    color: $orange;
-}
-
-.icon-edit:before {
-    content: "\f040";
-    color: $green;
-}
-
-.icon-reply:before {
-    content: "\f10e";
-    color: $blue;
-}
-
-.icon-replyall:before {
-    content: "\f122";
-    color: $light-blue;
-}

flaskbb/themes/aurora/src/scss/_text.scss

@@ -0,0 +1,39 @@
+.text-red {
+    color: $red;
+
+    &:hover {
+        color: $red;
+    }
+}
+
+.text-orange {
+    color: $orange;
+
+    &:hover {
+        color: $orange;
+    }
+}
+
+.text-green {
+    color: $green;
+
+    &:hover {
+        color: $green;
+    }
+}
+
+.text-blue {
+    color: $blue;
+
+    &:hover {
+        color: $blue;
+    }
+}
+
+.text-light-blue {
+    color: $light-blue;
+
+    &:hover {
+        color: $light-blue;
+    }
+}

flaskbb/themes/aurora/src/scss/styles.scss

@@ -2,14 +2,14 @@
 @import "bootstrap-variables";
 
 // Import Bootstrap for Sass
-$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
+@import "bootstrap-sass/assets/stylesheets/bootstrap";
 
 // Import fontawesome icons
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/regular";
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/regular";
 
 // Import FlaskBB theme
 @import "aurora";