Tweak badge styling

app/assets/javascripts/discourse/templates/poster_expansion.handlebars

@@ -6,6 +6,17 @@
     {{#if showName}}
       <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2>
     {{/if}}
+
+    {{#if showBadges}}
+      <div class="badge-section">
+        {{#each user.featured_user_badges}}
+        <span class="user-badge badge-type-{{unbound badge.badge_type_id}}"><i class='fa fa-certificate'></i> {{badge.name}}</span>
+        {{/each}}
+        {{#if showMoreBadges}}
+          <span class="btn more-user-badges">{{i18n badges.more_badges count=moreBadgesCount}}</span>
+        {{/if}}
+      </div>
+    {{/if}}
   </div>
 
   {{#if user}}
@@ -15,17 +26,6 @@
       {{groups-list groups=user.custom_groups}}
     </div>
 
-    {{#if showBadges}}
-      <div class="badge-section">
-        <h3>{{i18n badges.badge_count count=user.badge_count}}</h3>
-        {{#each user.featured_user_badges}}
-          <span class="badge">{{badge.name}}</span>
-        {{/each}}
-        {{#if showMoreBadges}}
-          <span class="btn more-badges">{{i18n badges.more_badges count=moreBadgesCount}}</span>
-        {{/if}}
-      </div>
-    {{/if}}
 
     <div class='bottom'>
       {{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}}

app/assets/stylesheets/desktop/poster_expansion.scss

@@ -91,10 +91,11 @@
     }
 
     h2 {
-      line-height: 15px;
+      line-height: 12px;
     }
 
     .badge-section {
+      margin-top: 20px;
       h3 {
         line-height: 43px;
         color: $primary_text_color;
@@ -102,21 +103,38 @@
         margin-bottom: -8px;
       }
 
-      .badge, .more-badges {
-        font-size: 12px;
-        margin: 0;
-        line-height: 16px;
-        display: inline-block;
-      }
-
-      .badge {
-        padding: 3px 8px;
-        border: 1px solid $secondary-border-color;
-      }
-
-      .more-badges {
-        padding: 4px 8px;
-      }
     }
   }
 }
+
+.user-badge, .more-user-badges {
+  font-size: 12px;
+  margin: 0;
+  line-height: 16px;
+  display: inline-block;
+  .fa {
+    padding-right: 5px;
+    font-size: 16px;
+  }
+}
+
+.user-badge {
+  padding: 3px 8px;
+  border: 1px solid $secondary-border-color;
+}
+
+.more-user-badges {
+  padding: 4px 8px;
+}
+
+.badge-type-1 .fa-certificate {
+  color: #A67D3D;
+}
+
+.badge-type-2 .fa-certificate {
+  color: silver;
+}
+
+.badge-type-1 .fa-certificate {
+  color: gold;
+}