UX: Convert bookmark icon from CSS to a proper icon using our helper

app/assets/javascripts/discourse/widgets/post-menu.js.es6

@@ -173,20 +173,18 @@ registerButton('reply', attrs => {
 registerButton('bookmark', attrs => {
   if (!attrs.canBookmark) { return; }
 
-  let iconClass = 'read-icon';
-  let buttonClass = 'bookmark';
-  let tooltip = 'bookmarks.not_bookmarked';
+  let className = 'bookmark';
 
   if (attrs.bookmarked) {
-    iconClass += ' bookmarked';
-    buttonClass += ' bookmarked';
-    tooltip = 'bookmarks.created';
+    className += ' bookmarked';
   }
 
-  return { action: 'toggleBookmark',
-           title: tooltip,
-           className: buttonClass,
-           contents: h('div', { className: iconClass }) };
+  return {
+    action: 'toggleBookmark',
+    title: attrs.bookmarked ? "bookmarks.created" : "bookmarks.not_bookmarked",
+    className,
+    icon: 'bookmark'
+  };
 });
 
 registerButton('admin', attrs => {

app/assets/stylesheets/desktop/topic-post.scss

@@ -161,22 +161,10 @@ nav.post-controls {
       box-shadow: none;
     }
 
-    &.bookmark {padding: 8px 11px; }
-
-    .read-icon {
-      &:before {
-        font-family: "FontAwesome";
-        content: "\f02e";
-      }
-      &.unseen {
-        &:before {
-          content: "\f097";
-        }
-      }
+    &.bookmark {
+      padding: 8px 11px;
       &.bookmarked {
-        &:before {
-          color: $tertiary;
-        }
+        color: $tertiary;
       }
     }
   }