Switch from using fontawesome to ionicons

assets/css/default.css

@@ -28,11 +28,11 @@ div {
   justify-content: space-between;
 }
 
-.navbar>div {
+.navbar > div {
   flex: 1;
 }
 
-.navbar>.searchbar {
+.navbar > .searchbar {
   flex-grow: 2; /* take double the space of the other items */
 }
 
@@ -44,7 +44,7 @@ div {
   font-weight: bold;
 }
 
-.navbar>.searchbar .pure-form input[type="search"] {
+.navbar > .searchbar .pure-form input[type="search"] {
   border-top: 0;
   border-left: 0;
   border-right: 0;
@@ -58,12 +58,12 @@ div {
   transition: 0.1s border-bottom;
 }
 
-.navbar>.searchbar .pure-form fieldset {
+.navbar > .searchbar .pure-form fieldset {
   padding: 0;
 }
 
 /* attract focus to the searchbar by adding a subtle transition */
-.navbar>.searchbar .pure-form input[type="search"]:focus {
+.navbar > .searchbar .pure-form input[type="search"]:focus {
   border-bottom: 2px solid #aaa;
 }
 
@@ -87,22 +87,22 @@ div {
     flex-direction: column;
   }
 
-  .navbar>div {
+  .navbar > div {
     display: flex;
     justify-content: center;
-  } 
+  }
 
-  .navbar>div:not(:last-child) {
+  .navbar > div:not(:last-child) {
     margin-bottom: 1em;
   }
 
-  .navbar>.searchbar>form {
+  .navbar > .searchbar > form {
     width: 60%;
   }
 }
 
 @media screen and (max-width: 320px) {
-  .navbar>.searchbar>form {
+  .navbar > .searchbar > form {
     width: 100%;
     margin: 0 1em;
   }

src/invidious/helpers.cr

@@ -648,13 +648,13 @@ def add_alt_links(html)
     if ["www.youtube.com", "m.youtube.com"].includes?(url.host)
       alt_link = <<-END_HTML
       <a href="#{url.full_path}">
-        <i class="fa fa-link" aria-hidden="true"></i>
+        <i class="icon ion-ios-link" aria-hidden="true"></i>
       </a>
       END_HTML
     elsif url.host == "youtu.be"
       alt_link = <<-END_HTML
       <a href="/watch?v=#{url.path.try &.lchop("/")}&#{url.query}">
-        <i class="fa fa-link" aria-hidden="true"></i>
+        <i class="icon ion-ios-link" aria-hidden="true"></i>
       </a>
       END_HTML
     else

src/invidious/views/channel.ecr

@@ -8,7 +8,7 @@
     </div>
     <div class="pure-u-1-3" style="text-align:right;">
         <h3>
-            <a href="/feed/channel/<%= ucid %>"><i class="fas fa-rss-square"></i></a>
+            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
         </h3>
     </div>
 </div>

src/invidious/views/layout.ecr

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
+  <link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css">
   <link rel="stylesheet" href="/css/default.css">
   <% if env.get?("user") && env.get("user").as(User).preferences.dark_mode %>
   <link rel="stylesheet" href="/css/darktheme.css">
@@ -37,15 +37,15 @@
           <a href="/feed/subscriptions" class="pure-menu-heading">
             <% notification_count = env.get("user").as(User).notifications.size %>
             <% if notification_count > 0 %>
-            <%= notification_count %> <i class="fas fa-bell"></i>
+            <%= notification_count %> <i class="icon ion-ios-notifications"></i>
             <% else %>
-            <i class="far fa-bell"></i>
+            <i class="icon ion-ios-notifications-outline"></i>
             <% end %>
           </a>
         </div>
         <div class="pure-u-1-3">
           <a href="/preferences" class="pure-menu-heading">
-            <i class="fas fa-cog"></i>
+            <i class="icon ion-ios-cog"></i>
           </a>
         </div>
         <div class="pure-u-1-3">

src/invidious/views/subscriptions.ecr

@@ -10,7 +10,7 @@
     </div>
     <div class="pure-u-1-3" style="text-align:right;">
         <h3>
-            <a href="/feed/private?token=<%= user.token %>"><i class="fas fa-rss-square"></i></a>
+            <a href="/feed/private?token=<%= user.token %>"><i class="icon ion-logo-rss"></i></a>
         </h3>
     </div>
 </div>

src/invidious/views/watch.ecr

@@ -182,7 +182,7 @@ function load_comments(target) {
   var body = target.parentNode.parentNode;
   var fallback = body.innerHTML;
   body.innerHTML =
-    '<h3><center><i class="loading fas fa-spinner"></i></center></h3>';
+    '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
 
   var url =
     '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
@@ -277,11 +277,11 @@ get_youtube_comments();
     <%= video.title %> 
     <% if listen %>
     <a href="/watch?<%= env.params.query %>">
-        <i class="fa fa-video" aria-hidden="true"></i>
+        <i class="icon ion-ios-videocam" aria-hidden="true"></i>
     </a>
     <% else %>
     <a href="/watch?<%= env.params.query %>&listen=true">
-        <i class="fa fa-volume-up" aria-hidden="true"></i>
+        <i class="icon ion-ios-volume-high" aria-hidden="true"></i>
     </a>
     <% end %>
 </h1>
@@ -290,9 +290,9 @@ get_youtube_comments();
 <div class="pure-g">
     <div class="pure-u-1 pure-u-md-1-5">
         <div class="h-box">
-            <p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
+            <p><i class="icon ion-ios-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
-            <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
+            <p><i class="icon ion-ios-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
-            <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
+            <p><i class="icon ion-ios-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
             <p id="Genre">Genre : <%= video.genre %></p>
             <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
             <p id="Wilson">Wilson Score : <%= video.wilson_score.round(4) %></p>
@@ -347,7 +347,7 @@ get_youtube_comments();
             </div>
             <hr style="margin-left:1em; margin-right:1em;">
             <div id="comments">
-                <h3><center><i class="loading fas fa-spinner"></i></center></h3>
+                <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
             </div>
         </div>
     </div>