move font awesome to npm package (#1384)

mockdeep · web-flow · commit 2f1c19c14ebd · 2026-02-14T14:02:55.000-08:00
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -149,13 +149,13 @@ var StoryView = Backbone.View.extend({
   },
 
   itemKeepUnread: function() {
-    var icon = this.model.get("keep_unread") ? "icon-check" : "icon-check-empty";
+    var icon = this.model.get("keep_unread") ? "fa fa-check" : "fa fa-square-o";
     this.$(".story-keep-unread > i").attr("class", icon);
     this.$el.toggleClass("keepUnread", this.model.get("keep_unread"));
   },
 
   itemStarred: function() {
-    var icon = this.model.get("is_starred") ? "icon-star" : "icon-star-empty";
+    var icon = this.model.get("is_starred") ? "fa fa-star" : "fa fa-star-o";
     this.$(".story-starred > i").attr("class", icon);
   },
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,5 +1,6 @@
 /*
   *= require bootstrap.min
+  *= require font-awesome.min
   *= require_tree .
 */
 
@@ -241,11 +242,11 @@ li.story.open .story-preview {
   margin-right: 13px;
 }
 
-li.story .icon-star {
+li.story .fa-star {
   color: #F67100;
 }
 
-li.story .icon-star-empty {
+li.story .fa-star-o {
   color: #e5e5e5;
 }
 
diff --git a/app/assets/stylesheets/font-awesome-fonts.css b/app/assets/stylesheets/font-awesome-fonts.css
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  src: url('fontawesome-webfont.eot');
+  src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
+       url('fontawesome-webfont.woff2') format('woff2'),
+       url('fontawesome-webfont.woff') format('woff'),
+       url('fontawesome-webfont.ttf') format('truetype'),
+       url('fontawesome-webfont.svg#fontawesomeregular') format('svg');
+}
diff --git a/app/assets/stylesheets/font-awesome-min.css b/app/assets/stylesheets/font-awesome-min.css
diff --git a/app/views/feeds/_action_bar.html.erb b/app/views/feeds/_action_bar.html.erb
@@ -1,7 +1,7 @@
 <nav>
   <div>
     <a class="btn" id="home" href="/news" title="<%= t('partials.feed_action_bar.home') %>">
-      <i class="icon-reply"></i>
+      <i class="fa fa-reply"></i>
     </a>
   </div>
 
@@ -11,16 +11,16 @@
 
   <div>
     <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.feed_action_bar.starred_stories') %>">
-      <i class="icon-star"></i>
+      <i class="fa fa-star"></i>
     </a>
     <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.feed_action_bar.archived_stories') %>">
-      <i class="icon-time"></i>
+      <i class="fa fa-clock-o"></i>
     </a>
     <a class="btn btn-primary" id="feeds" href="/feeds" title="<%= t('partials.feed_action_bar.feeds') %>">
-      <i class="icon-list"></i>
+      <i class="fa fa-list"></i>
     </a>
     <a class="btn btn-primary" id="add-feed" href="/feeds/new" title="<%= t('partials.feed_action_bar.add_feed') %>">
-      <i class="icon-plus"></i>
+      <i class="fa fa-plus"></i>
     </a>
   </div>
 </nav>
diff --git a/app/views/feeds/_feed.html.erb b/app/views/feeds/_feed.html.erb
@@ -2,7 +2,7 @@
   <div class="feed-line">
     <div class="feed-title-container">
       <p class="feed-title <%= feed.unread_stories_count > 0 ? "feed-unread" : "" %>">
-        <i class="icon-circle status <%= feed.status_bubble %>" data-toggle="tooltip" title="<%= t("partials.feed.status_bubble.#{feed.status_bubble}") if feed.status_bubble %>" data-placement="left"></i>
+        <i class="fa fa-circle status <%= feed.status_bubble %>" data-toggle="tooltip" title="<%= t("partials.feed.status_bubble.#{feed.status_bubble}") if feed.status_bubble %>" data-placement="left"></i>
         <a href="/feed/<%= feed.id %>">
           <% if feed.unread_stories_count > 0 %>
             (<%= feed.unread_stories_count %>)
@@ -23,13 +23,13 @@
         </span>
       </div>
       <span class="read-feed">
-        <a class="icon-external-link" aria-label="visit feed site" href="<%= feed.url %>"></a>
+        <a class="fa fa-external-link" aria-label="visit feed site" href="<%= feed.url %>"></a>
       </span>
       <span class="edit-feed">
-        <a class="icon-edit" aria-label="Edit" href="<%= "/feeds/#{feed.id}/edit" %>"></a>
+        <a class="fa fa-edit" aria-label="Edit" href="<%= "/feeds/#{feed.id}/edit" %>"></a>
       </span>
       <%= button_to("/feeds/#{feed.id}", method: :delete, class: "remove-feed btn-link", aria: { label: "Delete" }) do %>
-        <a class="icon-remove"></a>
+        <a class="fa fa-times"></a>
       <% end %>
     </div>
   </div>
diff --git a/app/views/feeds/_single_feed_action_bar.html.erb b/app/views/feeds/_single_feed_action_bar.html.erb
@@ -1,29 +1,29 @@
 <div class="row">
   <div class="pull-left">
     <a class="btn" id="home" href="/news" title="<%= t('partials.feed_action_bar.home') %>">
-      <i class="icon-reply"></i>
+      <i class="fa fa-reply"></i>
     </a>
     <a class="btn" id="mark-all" title="<%= t('partials.action_bar.mark_all') %>">
-      <i class="icon-ok"></i>
+      <i class="fa fa-check"></i>
       <%= render "stories/mark_all_as_read_form", {stories: stories} %>
     </a>
     <a class="btn" href="<%= "/feed/#{@feed.id}" %>" id="refresh" title="<%= t('partials.action_bar.refresh') %>">
-      <i class="icon-repeat"></i>
+      <i class="fa fa-refresh"></i>
     </a>
   </div>
 
   <div class="pull-right">
     <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.action_bar.starred_stories') %>">
-      <i class="icon-star"></i>
+      <i class="fa fa-star"></i>
     </a>
     <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.action_bar.archived_stories') %>">
-      <i class="icon-time"></i>
+      <i class="fa fa-clock-o"></i>
     </a>
     <a class="btn btn-primary" id="feeds" href="/feeds" title="<%= t('partials.action_bar.view_feeds') %>">
-      <i class="icon-list"></i>
+      <i class="fa fa-list"></i>
     </a>
     <a class="btn btn-primary" id="add-feed" href="/feeds/new" title="<%= t('partials.action_bar.add_feed') %>">
-      <i class="icon-plus"></i>
+      <i class="fa fa-plus"></i>
     </a>
   </div>
 </div>
diff --git a/app/views/feeds/edit.html.erb b/app/views/feeds/edit.html.erb
@@ -9,12 +9,12 @@
     <input type="hidden" name="feed_id" value="<%= @feed.id %>">
     <div class="form-group">
       <input name="feed_name" id="feed-name" class="form-control" type="text" value="<%= @feed.name %>" required />
-      <i class="icon-pencil field-icon"></i>
+      <i class="fa fa-pencil field-icon"></i>
       <label id="feed-name-label" class="field-label" for="feed-name"><%= t('feeds.edit.fields.feed_name') %></label>
     </div>
     <div class="form-group">
       <input name="feed_url" id="feed-url" class="form-control" type="text" value="<%= @feed.url %>" autofocus required />
-      <i class="icon-rss field-icon"></i>
+      <i class="fa fa-rss field-icon"></i>
       <label id="feed-url-label" class="field-label" for="feed-url"><%= t('feeds.edit.fields.feed_url') %></label>
     </div>
     <% if current_user.groups.any? %>
diff --git a/app/views/feeds/new.html.erb b/app/views/feeds/new.html.erb
@@ -10,7 +10,7 @@
   <%= form_with(url: "/feeds", id: "add-feed-setup") do %>
     <div class="form-group">
       <input name="feed_url" class="form-control" id="feed-url" type="text" value="<%= @feed_url %>" autofocus/>
-      <i class="icon-rss field-icon"></i>
+      <i class="fa fa-rss field-icon"></i>
       <label id="feed_url-label" class="field-label" for="feed_url"><%= t('feeds.add.fields.feed_url') %></label>
     </div>
 
diff --git a/app/views/js/templates/_story.js.erb b/app/views/js/templates/_story.js.erb
@@ -2,7 +2,7 @@
   <div class="row story-preview">
     <div class="col-md-3">
       <div class="story-starred">
-        <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+        <i class="fa {{ if(is_starred) { }}fa-star{{ } else { }}fa-star-o{{ } }}"></i>
       </div>
       <p class="blog-title">
         {{= source }}
@@ -26,7 +26,7 @@
         <a href="{{= permalink }}">{{= title }}</a>
         {{ if (enclosure_url) { }}
           <a class="story-enclosure" target="_blank" href="{{= enclosure_url }}">
-            <i class="icon-download"></i>
+            <i class="fa fa-download"></i>
           </a>
         {{ } }}
       </h1>
@@ -40,13 +40,13 @@
       </div>
       <div class="pull-right story-actions">
         <div class="story-keep-unread">
-          <i class="icon-check{{ if(!keep_unread) { }}-empty{{ } }}"></i> <%= I18n.t('stories.keep_unread') %>
+          <i class="fa {{ if(keep_unread) { }}fa-check{{ } else { }}fa-square-o{{ } }}"></i> <%= I18n.t('stories.keep_unread') %>
         </div>
         <div class="story-starred">
-          <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+          <i class="fa {{ if(is_starred) { }}fa-star{{ } else { }}fa-star-o{{ } }}"></i>
         </div>
         <a class="story-permalink" target="_blank" href="{{= permalink }}">
-          <i class="icon-external-link"></i>
+          <i class="fa fa-external-link"></i>
         </a>
       </div>
     </div>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -11,7 +11,7 @@
           <li class="text-muted">·</li>
           <li>
             <a href="#shortcuts" data-toggle="modal" aria-label="shortcuts">
-              <i aria-hidden="true" class="icon-keyboard">
+              <i aria-hidden="true" class="fa fa-keyboard-o">
               </i>
             </a>
           </li>
diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
@@ -12,13 +12,13 @@
 
     <div class="form-group">
       <%= form.password_field :password, class: "form-control", required: true %>
-      <i class="icon-lock field-icon"></i>
+      <i class="fa fa-lock field-icon"></i>
       <%= form.label :password, t('first_run.password.fields.password'), class: "field-label" %>
     </div>
 
     <div class="form-group">
       <%= form.password_field :password_confirmation, class: "form-control", required: true %>
-      <i class="icon-lock field-icon"></i>
+      <i class="fa fa-lock field-icon"></i>
       <%= form.label :password_confirmation, t('first_run.password.fields.password_confirmation'), class: "field-label" %>
     </div>
 
diff --git a/app/views/sessions/new.erb b/app/views/sessions/new.erb
@@ -13,7 +13,7 @@
 
     <div class="form-group">
       <input name="password" class="form-control" id="password" type="password" required />
-      <i class="icon-lock field-icon"></i>
+      <i class="fa fa-lock field-icon"></i>
       <label id="password-label" class="field-label" for="password"><%= t('sessions.new.fields.password') %></label>
     </div>
     <input type="submit" value="<%= t('sessions.new.fields.submit') %>" class="btn btn-primary pull-right" />
diff --git a/app/views/stories/_action_bar.html.erb b/app/views/stories/_action_bar.html.erb
@@ -1,11 +1,11 @@
 <nav>
   <div>
     <button class="btn" id="mark-all" title="<%= t('partials.action_bar.mark_all') %>" aria-label="<%= t('partials.action_bar.mark_all') %>">
-      <i class="icon-ok"></i>
+      <i class="fa fa-check"></i>
       <%= render "stories/mark_all_as_read_form", { stories: stories } %>
     </button>
     <a class="btn" href="/" id="refresh" title="<%= t('partials.action_bar.refresh') %>">
-      <i class="icon-repeat"></i>
+      <i class="fa fa-refresh"></i>
     </a>
   </div>
 
@@ -15,16 +15,16 @@
 
   <div>
     <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.action_bar.starred_stories') %>">
-      <i class="icon-star"></i>
+      <i class="fa fa-star"></i>
     </a>
     <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.action_bar.archived_stories') %>">
-      <i class="icon-time"></i>
+      <i class="fa fa-clock-o"></i>
     </a>
     <a class="btn btn-primary" id="feeds" href="/feeds" title="<%= t('partials.action_bar.view_feeds') %>">
-      <i class="icon-list"></i>
+      <i class="fa fa-list"></i>
     </a>
     <a class="btn btn-primary" id="add-feed" href="/feeds/new" title="<%= t('partials.action_bar.add_feed') %>">
-      <i class="icon-plus"></i>
+      <i class="fa fa-plus"></i>
     </a>
   </div>
 </nav>
diff --git a/app/views/stories/_templates.html.erb b/app/views/stories/_templates.html.erb
@@ -2,7 +2,7 @@
   <div class="row story-preview">
     <div class="col-md-3">
       <div class="story-starred">
-        <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+        <i class="fa {{ if(is_starred) { }}fa-star{{ } else { }}fa-star-o{{ } }}"></i>
       </div>
       <p class="blog-title">
         {{= source }}
@@ -26,7 +26,7 @@
         <a href="{{= permalink }}">{{= title }}</a>
         {{ if (enclosure_url) { }}
           <a class="story-enclosure" target="_blank" href="{{= enclosure_url }}">
-            <i class="icon-download"></i>
+            <i class="fa fa-download"></i>
           </a>
         {{ } }}
       </h1>
@@ -40,13 +40,13 @@
       </div>
       <div class="pull-right story-actions">
         <div class="story-keep-unread">
-          <i class="icon-check{{ if(!keep_unread) { }}-empty{{ } }}"></i> <%= t('stories.keep_unread') %>
+          <i class="fa {{ if(keep_unread) { }}fa-check{{ } else { }}fa-square-o{{ } }}"></i> <%= t('stories.keep_unread') %>
         </div>
         <div class="story-starred">
-          <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+          <i class="fa {{ if(is_starred) { }}fa-star{{ } else { }}fa-star-o{{ } }}"></i>
         </div>
         <a class="story-permalink" target="_blank" href="{{= permalink }}">
-          <i class="icon-external-link"></i>
+          <i class="fa fa-external-link"></i>
         </a>
       </div>
     </div>
diff --git a/app/views/tutorials/_action_bar.html.erb b/app/views/tutorials/_action_bar.html.erb
@@ -1,11 +1,11 @@
 <nav>
   <div>
     <a class="btn" id="mark-all" title="<%= t('partials.action_bar.mark_all') %>">
-      <i class="icon-ok"></i>
+      <i class="fa fa-check"></i>
       <%= render 'stories/mark_all_as_read_form', {stories: stories} %>
     </a>
     <a class="btn" href="/" id="refresh" title="<%= t('partials.action_bar.refresh') %>">
-      <i class="icon-repeat"></i>
+      <i class="fa fa-refresh"></i>
     </a>
   </div>
 
@@ -15,10 +15,10 @@
 
   <div>
     <a class="btn btn-primary" id="feeds" href="/feeds" title="<%= t('partials.action_bar.view_feeds') %>">
-      <i class="icon-list"></i>
+      <i class="fa fa-list"></i>
     </a>
     <a class="btn btn-primary" id="add-feed" href="/feeds/new" title="<%= t('partials.action_bar.add_feed') %>">
-      <i class="icon-plus"></i>
+      <i class="fa fa-plus"></i>
     </a>
   </div>
 </nav>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -15,5 +15,7 @@
   Rails.root.join("node_modules/underscore"),
   Rails.root.join("node_modules/jquery-visible"),
   Rails.root.join("node_modules/@fontsource/lato/files"),
-  Rails.root.join("node_modules/@fontsource/reenie-beanie/files")
+  Rails.root.join("node_modules/@fontsource/reenie-beanie/files"),
+  Rails.root.join("node_modules/font-awesome/css"),
+  Rails.root.join("node_modules/font-awesome/fonts")
 ]
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@fontsource/reenie-beanie": "^5.2.8",
     "backbone": "1.0.0",
     "bootstrap": "3.1.1",
+    "font-awesome": "4.7.0",
     "jquery": "1.9.1",
     "jquery-visible": "1.2.0",
     "mousetrap": "1.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/fonts/FontAwesome.otf b/public/fonts/FontAwesome.otf
diff --git a/public/fonts/fontawesome-webfont.eot b/public/fonts/fontawesome-webfont.eot
diff --git a/public/fonts/fontawesome-webfont.svg b/public/fonts/fontawesome-webfont.svg
diff --git a/public/fonts/fontawesome-webfont.ttf b/public/fonts/fontawesome-webfont.ttf
diff --git a/public/fonts/fontawesome-webfont.woff b/public/fonts/fontawesome-webfont.woff
diff --git a/spec/javascript/spec/views/story_view_spec.js b/spec/javascript/spec/views/story_view_spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`/*`
`2`	`2`	`*= require bootstrap.min`
	`3`	`+ *= require font-awesome.min`
`3`	`4`	`*= require_tree .`
`4`	`5`	`*/`
`5`	`6`
`@@ -241,11 +242,11 @@ li.story.open .story-preview {`
`241`	`242`	`margin-right: 13px;`
`242`	`243`	`}`
`243`	`244`
`244`		`-li.story .icon-star {`
	`245`	`+li.story .fa-star {`
`245`	`246`	`color: #F67100;`
`246`	`247`	`}`
`247`	`248`
`248`		`-li.story .icon-star-empty {`
	`249`	`+li.story .fa-star-o {`
`249`	`250`	`color: #e5e5e5;`
`250`	`251`	`}`
`251`	`252`