diff --git a/public/src/forum/footer.js b/public/src/forum/footer.js
index c10d951088..5c1d57b51e 100644
--- a/public/src/forum/footer.js
+++ b/public/src/forum/footer.js
@@ -250,18 +250,9 @@
 	});
 
 	function updateUnreadCount(count) {
-		var badge = $('#numUnreadBadge');
-			badge.html(count > 20 ? '20+' : count);
 
-			if (count > 0) {
-				badge
-					.removeClass('badge-inverse')
-					.addClass('badge-important');
-			} else {
-				badge
-					.removeClass('badge-important')
-					.addClass('badge-inverse');
-			}
+		$('#unread-count').toggleClass('unread-count', count > 0);
+		$('#unread-count').attr('data-content', count > 20 ? '20+' : count);
 	}
 
 	socket.on('event:unread.updateCount', updateUnreadCount);
diff --git a/public/templates/header.tpl b/public/templates/header.tpl
index cf8bc888a7..e5c5bad73a 100644
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@@ -58,7 +58,7 @@
 						<a href="{relative_path}/recent"><i class="fa fa-clock-o" title="[[global:header.recent]]"></i></a>
 					</li>
 					<li class="nodebb-loggedin">
-						<a href="{relative_path}/unread"><i class="fa fa-envelope" title="[[global:header.unread]]"> <span id="numUnreadBadge" class="">0</span></i></a>
+						<a href="{relative_path}/unread"><i id="unread-count" class="fa fa-inbox" data-content="0" title="[[global:header.unread]]"></i></a>
 					</li>
 					<li>
 						<a href="{relative_path}/users"><i class="fa fa-users" title="[[global:header.users]]"></i></a>