Use fixed width icons

flaskbb/templates/forum/category_layout.html

@@ -18,7 +18,7 @@
                 <div class="row">
                     <!-- Icon -->
                     <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
-                        <span class="fa fa-external-link forum-external"></span>
+                        <span class="fa fa-external-link fa-fw forum-external"></span>
                     </div>
 
                     <div class="col-md-11 col-sm-10 col-xs-10">
@@ -55,11 +55,11 @@
                     <!-- Icon -->
                     <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
                         {% if forum.locked %}
-                            <span class="fa fa-lock forum-locked"></span>
+                            <span class="fa fa-lock fa-fw forum-locked"></span>
                         {% elif forum|forum_is_unread(forumsread, current_user) %}
-                            <span class="fa fa-comments forum-unread"></span>
+                            <span class="fa fa-comments fa-fwforum-unread"></span>
                         {% else %}
-                            <span class="fa fa-comments-o forum-read"></span>
+                            <span class="fa fa-comments-o fa-fw forum-read"></span>
                         {% endif %}
                     </div>
 

flaskbb/templates/forum/edit_forum.html

@@ -42,18 +42,18 @@
                         <div class="row">
                             <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
                             {% if topic.locked %}
-                                <span class="fa fa-lock topic-locked"></span>
+                                <span class="fa fa-lock fa-fw topic-locked"></span>
                             {% elif topic.important %}
                                 {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-star topic-starred-unread"></span>
+                                    <span class="fa fa-star fa-fw topic-starred-unread"></span>
                                 {% else %}
-                                    <span class="fa fa-star-o topic-starred-read"></span>
+                                    <span class="fa fa-star-o fa-fw topic-starred-read"></span>
                                 {% endif %}
                             {% else %}
                                 {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                    <span class="fa fa-comment topic-unread"></span>
+                                    <span class="fa fa-comment fa-fw topic-unread"></span>
                                 {% else %}
-                                    <span class="fa fa-comment-o topic-read"></span>
+                                    <span class="fa fa-comment-o fa-fw topic-read"></span>
                                 {% endif %}
                             {% endif %}
                             </div>
@@ -125,24 +125,24 @@
 
                         <div class="btn-group" role="group">
                             <button name="lock" class="btn btn-warning">
-                                <span class="fa fa-lock"></span> {% trans %}Lock{% endtrans %}
+                                <span class="fa fa-lock fa-fw"></span> {% trans %}Lock{% endtrans %}
                             </button>
                             <button name="unlock" class="btn btn-warning">
-                                <span class="fa fa-unlock"></span> {% trans %}Unlock{% endtrans %}
+                                <span class="fa fa-unlock fa-fw"></span> {% trans %}Unlock{% endtrans %}
                             </button>
                         </div>
 
                         <div class="btn-group" role="group">
                             <button name="highlight" class="btn btn-success">
-                                <span class="fa fa-star"></span> {% trans %}Highlight{% endtrans %}
+                                <span class="fa fa-star fa-fw"></span> {% trans %}Highlight{% endtrans %}
                             </button>
                             <button name="trivialize" class="btn btn-success">
-                                <span class="fa fa-star-o"></span> {% trans %}Trivialize{% endtrans %}
+                                <span class="fa fa-star-o fa-fw"></span> {% trans %}Trivialize{% endtrans %}
                             </button>
                         </div>
 
                         <button name="delete" class="btn btn-danger">
-                            <span class="fa fa-trash-o"></span> {% trans %}Delete{% endtrans %}
+                            <span class="fa fa-trash-o fa-fw"></span> {% trans %}Delete{% endtrans %}
                         </button>
 
                     </div>

flaskbb/templates/forum/forum.html

@@ -22,17 +22,17 @@
             <form class="inline-form" method="post" action="{{ url_for('forum.markread', forum_id=forum.id, slug=forum.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <button class="btn btn-default">
-                    <span class="fa fa-check"></span> {% trans %}Mark as Read{% endtrans %}
+                    <span class="fa fa-check fa-fw"></span> {% trans %}Mark as Read{% endtrans %}
                 </button>
             </form>
 
             {% if forum.locked %}
             <span class="btn btn-primary">
-                <span class="fa fa-lock"></span> {% trans %}Locked{% endtrans %}
+                <span class="fa fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}
             </span>
             {% else %}
             <a href="{{ url_for('forum.new_topic', forum_id=forum.id, slug=forum.slug) }}" class="btn btn-primary">
-                <span class="fa fa-pencil"></span> {% trans %}New Topic{% endtrans %}
+                <span class="fa fa-pencil fa-fw"></span> {% trans %}New Topic{% endtrans %}
             </a>
             {% endif %}
         </div>
@@ -59,18 +59,18 @@
                     <div class="row">
                         <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
                         {% if topic.locked %}
-                            <span class="fa fa-lock topic-locked"></span>
+                            <span class="fa fa-lock fa-fw topic-locked"></span>
                         {% elif topic.important %}
                             {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                <span class="fa fa-star topic-starred-unread"></span>
+                                <span class="fa fa-star fa-fw topic-starred-unread"></span>
                             {% else %}
-                                <span class="fa fa-star-o topic-starred-read"></span>
+                                <span class="fa fa-star-o fa-fw topic-starred-read"></span>
                             {% endif %}
                         {% else %}
                             {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
-                                <span class="fa fa-comment topic-unread"></span>
+                                <span class="fa fa-comment fa-fw topic-unread"></span>
                             {% else %}
-                                <span class="fa fa-comment-o topic-read"></span>
+                                <span class="fa fa-comment-o fa-fw topic-read"></span>
                             {% endif %}
                         {% endif %}
                         </div>
@@ -127,7 +127,7 @@
     {% if current_user|can_moderate(forum) %}
     <div class="row controls-row">
         <a class="btn btn-default" href="{{ url_for('forum.manage_forum', forum_id=forum.id, slug=forum.slug) }}">
-            <span class="fa fa-tasks"></span> {% trans %}Moderation Mode{% endtrans %}
+            <span class="fa fa-tasks fa-fw"></span> {% trans %}Moderation Mode{% endtrans %}
         </a>
     </div>
     {% endif %}

flaskbb/templates/forum/online_users.html

@@ -2,14 +2,12 @@
 
 {% extends theme("layout.html") %}
 
-
 {% block header %}
 {% endblock %}
 
 {% block navigation %}
 {% endblock %}
 
-
 {% block content %}
 
 <legend>{% trans %}Online Users{% endtrans %}</legend>

flaskbb/templates/forum/topic_controls.html

@@ -12,7 +12,7 @@
             <!-- Moderation buttons -->
             <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="fa fa-bars" aria-hidden="true"></span> {% trans %}Moderate{% endtrans %} <span class="caret"></span>
+                    <span class="fa fa-bars fa-fw" aria-hidden="true"></span> {% trans %}Moderate{% endtrans %} <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
 
@@ -21,7 +21,7 @@
                     <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-link">
-                            <span class="fa fa-trash-o"></span> {% trans %}Delete Topic{% endtrans %}
+                            <span class="fa fa-trash-o fa-fw"></span> {% trans %}Delete Topic{% endtrans %}
                         </button>
                     </form>
                 </li>
@@ -33,7 +33,7 @@
                         <form class="inline-form" method="post" action="{{ url_for('forum.lock_topic', topic_id=topic.id, slug=topic.slug) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-link">
-                                <span class="fa fa-lock"></span> {% trans %}Lock Topic{% endtrans %}
+                                <span class="fa fa-lock fa-fw"></span> {% trans %}Lock Topic{% endtrans %}
                             </button>
                         </form>
                     </li>
@@ -42,7 +42,7 @@
                         <form class="inline-form" method="post" action="{{ url_for('forum.unlock_topic', topic_id=topic.id, slug=topic.slug) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-link">
-                                <span class="fa fa-unlock"></span> {% trans %}Unlock Topic{% endtrans %}
+                                <span class="fa fa-unlock fa-fw"></span> {% trans %}Unlock Topic{% endtrans %}
                             </button>
                         </form>
                     </li>
@@ -53,7 +53,7 @@
                         <form class="inline-form" method="post" action="{{ url_for('forum.highlight_topic', topic_id=topic.id, slug=topic.slug) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-link">
-                                <span class="fa fa-star"></span> {% trans %}Highlight Topic{% endtrans %}
+                                <span class="fa fa-star fa-fw"></span> {% trans %}Highlight Topic{% endtrans %}
                             </button>
                         </form>
                     </li>
@@ -62,7 +62,7 @@
                         <form class="inline-form" method="post" action="{{ url_for('forum.trivialize_topic', topic_id=topic.id, slug=topic.slug) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-link">
-                                <span class="fa fa-star-o"></span> {% trans %}Trivialize Topic{% endtrans %}
+                                <span class="fa fa-star-o fa-fw"></span> {% trans %}Trivialize Topic{% endtrans %}
                             </button>
                         </form>
                     </li>
@@ -77,24 +77,24 @@
             <form class="inline-form" method="post" action="{{ url_for('forum.untrack_topic', topic_id=topic.id, slug=topic.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <button class="btn btn-default">
-                    <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
+                    <span class="fa fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
                 </button>
             </form>
             {% else %}
             <form class="inline-form" method="post" action="{{ url_for('forum.track_topic', topic_id=topic.id, slug=topic.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <button class="btn btn-default">
-                    <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
+                    <span class="fa fa-tag fa-fw" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
                 </button>
             </form>
             {% endif %}
 
             {% if current_user|post_reply(topic) %}
             <a href="{{ url_for('forum.new_post', topic_id=topic.id, slug=topic.slug) }}" class="btn btn-primary">
-                <span class="fa fa-pencil"></span> {% trans %}Reply{% endtrans %}
+                <span class="fa fa-pencil fa-fw"></span> {% trans %}Reply{% endtrans %}
             </a>
             {% else %}
-            <div class="btn btn-primary"><span class="fa fa-lock"></span> {% trans %}Locked{% endtrans %}</div>
+            <div class="btn btn-primary"><span class="fa fa-lock fa-fw"></span> {% trans %}Locked{% endtrans %}</div>
             {% endif %}
         </div>
     </div>

flaskbb/templates/layout.html

@@ -84,7 +84,7 @@
                             <!-- Inbox -->
                             <li class="dropdown {{ is_active('message.inbox') }}">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                    <span class="fa fa-envelope"></span> {% trans %}Inbox{% endtrans %}
+                                    <span class="fa fa-envelope fa-fw"></span> {% trans %}Inbox{% endtrans %}
                                     {% if current_user.unread_count > 0 %}
                                     <span class="label label-danger">{{ current_user.unread_count }}</span>
                                     {% else %}
@@ -105,8 +105,8 @@
                                     <li><a href="#">No unread messages.</a></li>
                                     {% endfor %}
                                     <li class="divider"></li>
-                                    <li><a href="{{ url_for('message.inbox') }}"><span class="fa fa-envelope"></span> {% trans %}Inbox{% endtrans %}</a></li>
-                                    <li><a href="{{ url_for('message.new_conversation') }}"><span class="fa fa-pencil"></span> {% trans %}New Message{% endtrans %}</a></li>
+                                    <li><a href="{{ url_for('message.inbox') }}"><span class="fa fa-envelope fa-fw"></span> {% trans %}Inbox{% endtrans %}</a></li>
+                                    <li><a href="{{ url_for('message.new_conversation') }}"><span class="fa fa-pencil fa-fw"></span> {% trans %}New Message{% endtrans %}</a></li>
                                 </ul>
                             </li>
 
@@ -114,20 +114,20 @@
                             <li>
                                 <div class="btn-group navbar-btn user-btn">
                                     <a class="btn btn-primary" href="{{ url_for('user.profile', username=current_user.username) }}">
-                                        <span class="fa fa-user"></span> {{ current_user.username }}
+                                        <span class="fa fa-user fa-fw"></span> {{ current_user.username }}
                                     </a>
                                     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                     <ul class="dropdown-menu" role="menu">
-                                        <li><a href="{{ url_for('forum.topictracker') }}"><span class="fa fa-book"></span> {% trans %}Topic Tracker{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('forum.topictracker') }}"><span class="fa fa-book fa-fw"></span> {% trans %}Topic Tracker{% endtrans %}</a></li>
                                         <li class="divider"></li>
 
-                                        <li><a href="{{ url_for('user.settings') }}"><span class="fa fa-cogs"></span> {% trans %}Settings{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('user.settings') }}"><span class="fa fa-cogs fa-fw"></span> {% trans %}Settings{% endtrans %}</a></li>
                                         {% if current_user|is_admin_or_moderator %}
-                                        <li><a href="{{ url_for('management.overview') }}"><span class="fa fa-cog"></span> {% trans %}Management{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('management.overview') }}"><span class="fa fa-cog fa-fw"></span> {% trans %}Management{% endtrans %}</a></li>
                                         <li class="divider"></li>
                                         {% endif %}
 
-                                        <li><a href="{{ url_for('auth.logout') }}"><span class="fa fa-power-off"></span> {% trans %}Logout{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('auth.logout') }}"><span class="fa fa-power-off fa-fw"></span> {% trans %}Logout{% endtrans %}</a></li>
                                     </ul>
                                 </div>
                             </li>
@@ -136,14 +136,14 @@
                             <li>
                                 <div class="btn-group navbar-btn user-btn">
                                     <a class="btn btn-primary" href="{{ url_for('auth.login') }}">
-                                        <span class="fa fa-user"></span> {% trans %}Login{% endtrans %}
+                                        <span class="fa fa-user fa-fw"></span> {% trans %}Login{% endtrans %}
                                     </a>
                                     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                     <ul class="dropdown-menu" role="menu">
                                         {% if flaskbb_config["REGISTRATION_ENABLED"] %}
-                                        <li><a href="{{ url_for('auth.register') }}">{% trans %}Register{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('auth.register') }}"><span class="fa fa-user-plus fa-fw"></span> {% trans %}Register{% endtrans %}</a></li>
                                         {% endif %}
-                                        <li><a href="{{ url_for('auth.forgot_password') }}">{% trans %}Reset Password{% endtrans %}</a></li>
+                                        <li><a href="{{ url_for('auth.forgot_password') }}"><span class="fa fa-undo fa-fw"></span> {% trans %}Reset Password{% endtrans %}</a></li>
                                     </ul>
                                 </div>
                             </li>

flaskbb/themes/aurora/src/_forum.scss

@@ -30,12 +30,6 @@
             float: left;
             font-size: 1.5em;
             padding-right: 0.5em;
-
-            // why is this?
-            .topic-locked {
-                font-size: 1.5em;
-            }
-
         }
 
         .topic-name {

flaskbb/themes/aurora/src/_navigation.scss

@@ -1,6 +1,6 @@
 /* The private messages in the main navbar */
 .dropdown-messages {
-    min-width: 15em;
+    min-width: 20em;
     .message-subject {
         font-style: italic;
     }