Merge pull request #1194 from Fryguy/upgrade-font-awesome-sass

Upgrade font-awesome-sass to v6
ManageIQ · Dec 16, 2024 · 77a036b · 77a036b
2 parents 074b367 + dad8542
commit 77a036b
Show file tree

Hide file tree

Showing 26 changed files with 101 additions and 154 deletions.
diff --git a/Gemfile b/Gemfile
@@ -4,7 +4,7 @@ ruby "~> 3.3.6"
 
 gem "activesupport", ">= 5.2.7", :require => false
 gem "bootstrap-sass", "~> 3.x"
-gem "font-awesome-sass", "~> 4.x"
+gem "font-awesome-sass", "~> 6.5"
 gem "jekyll", "~> 4.3"
 gem "jekyll-paginate"
 gem "jekyll-sass-converter"

diff --git a/site/_includes/appliances.html b/site/_includes/appliances.html
@@ -2,7 +2,7 @@
   <h4>
     <a href="/download/">
       <span>Or download one of our virtual appliances</span>
-      <i class="fa fa-arrow-right"></i>
+      <i class="fa-solid fa-arrow-right"></i>
     </a>
   </h4>
 

diff --git a/site/_includes/footer.html b/site/_includes/footer.html
@@ -9,28 +9,26 @@
     <ul class="contact_menu">
       <li>
         <a href="https://github.com/ManageIQ/">
-          <i class="fa fa-github"></i>
-          Github
+          <i class="fa-brands fa-github"></i>
+          GitHub
         </a>
       </li>
       <li>
         <a href="https://gitter.im/ManageIQ/manageiq">
-          <i class="fa fa-gitter">
-            {% include icon-gitter.svg %}
-          </i>
+          <i class="fa-brands fa-gitter"></i>
           Gitter
         </a>
       </li>
       <li>
         <a href="https://github.com/orgs/ManageIQ/discussions">
-          <i class="fa fa-comments"></i>
+          <i class="fa-solid fa-comments"></i>
           Forum
         </a>
       </li>
       {% unless page.path contains "docs" %}
       <li>
         <a href="https://github.com/ManageIQ/manageiq.org/edit/master/site/{{ page.path }}">
-          <i class="fa fa-pencil"></i>
+          <i class="fa-solid fa-pencil"></i>
           Edit this page
         </a>
       </li>
@@ -62,33 +60,26 @@
     <div class="footer-social">
       <ul class="social_menu">
         <li>
-          <a href="https://twitter.com/ManageIQ" class="social_link social_link-twitter">
-            <i class="fa fa-twitter"></i>
+          <a href="https://twitter.com/ManageIQ" class="social_link">
+            <i class="fa-brands fa-twitter"></i>
           </a>
         </li>
 
         <li>
-          <a href="https://www.facebook.com/manageiq/" class="social_link social_link-facebook">
-            <span class="social_link-icon">
-              <i class="fa fa-facebook"></i>
-            </span>
+          <a href="https://www.facebook.com/manageiq/" class="social_link">
+            <i class="fa-brands fa-facebook"></i>
           </a>
         </li>
 
-        <!--  -->
         <li>
-          <a href="https://www.linkedin.com/company/manageiq" class="social_link social_link-linkedin">
-            <span class="social_link-icon">
-              <i class="fa fa-linkedin"></i>
-            </span>
+          <a href="https://www.linkedin.com/company/manageiq" class="social_link">
+            <i class="fa-brands fa-linkedin"></i>
           </a>
         </li>
 
         <li>
-          <a href="https://www.youtube.com/user/ManageIQVideo" class="social_link social_link-youtube">
-            <span class="social_link-icon">
-              <i class="fa fa-youtube"></i>
-            </span>
+          <a href="https://www.youtube.com/user/ManageIQVideo" class="social_link">
+            <i class="fa-brands fa-youtube"></i>
           </a>
         </li>
       </ul>

diff --git a/site/_includes/header.html b/site/_includes/header.html
@@ -6,14 +6,14 @@
 
   <div id="site_header-nav_toggle">
     <a href="#" class="off_canvas-show" data-behavior="off_canvas-toggle">
-      <i class="fa fa-bars"></i>
+      <i class="fa-solid fa-bars"></i>
     </a>
   </div>
 
   <div class="off_canvas">
     <header class="off_canvas-header">
       <a href="#" class="off_canvas-hide" data-behavior="off_canvas-toggle">
-        <i class="fa fa-times"></i>
+        <i class="fa-solid fa-times"></i>
       </a>
     </header>
 

diff --git a/site/_includes/icon-github.html b/site/_includes/icon-github.html
diff --git a/site/_includes/icon-github.svg b/site/_includes/icon-github.svg
diff --git a/site/_includes/icon-gitter.svg b/site/_includes/icon-gitter.svg
diff --git a/site/_includes/icon-twitter.html b/site/_includes/icon-twitter.html
diff --git a/site/_includes/icon-twitter.svg b/site/_includes/icon-twitter.svg
diff --git a/site/_includes/lightbox.html b/site/_includes/lightbox.html
@@ -2,7 +2,7 @@
   <header class="lightbox-header">
     <div class="lightbox-title"></div>
     <div class="lightbox-close">
-      <span class="fa fa-times"></span>
+      <span class="fa-solid fa-times"></span>
     </div>
   </header>
 

diff --git a/site/_includes/site_nav.html b/site/_includes/site_nav.html
@@ -12,6 +12,6 @@
     <a href="/blog/">Blog</a>
   </li>
   <li>
-    <button class="fa theme-toggle" data-toggle-theme></i>
+    <button class="fa-solid theme-toggle" data-toggle-theme></i>
   </li>
 </ul>
diff --git a/site/_sass/_footer.scss b/site/_sass/_footer.scss
@@ -32,19 +32,6 @@
   }
 }
 
-.fa-gitter {
-  width: 14px;
-
-  svg {
-    max-width: 100%;
-    height: auto;
-
-    g#icon-gitter {
-      fill: var(--color-text-banner);
-    }
-  }
-}
-
 @media only screen and (min-width: #{$bp-desk0}) {
   .site-footer {
     padding: 0;
@@ -72,7 +59,6 @@
     }
 
     .social_link {
-
       svg {
         fill: var(--color-text-footer);
       }
@@ -81,19 +67,15 @@
         fill: var(--color-text-banner);
       }
 
-      i.fa {
+      i.fa-brands {
         font-size: 22px;
         color: var(--color-text-footer);
       }
 
-      i.fa:hover {
+      i.fa-brands:hover {
         color: var(--color-text-banner);
       }
     }
-
-    .social_link-username {
-      display: none;
-    }
   } // .site-footer
 
   .footer-row {

diff --git a/site/_sass/_menu.scss b/site/_sass/_menu.scss
@@ -71,10 +71,10 @@
     color: var(--color-text-doc-menu);
 
     &:before {
-      @include fa_type;
-      content: $fa-var-chevron-right;
+      @extend %fa-icon;
+      @extend .fa-solid;
+      content: fa-content($fa-var-chevron-right);
 
-      display: inline-block;
       font-size: 9px;
       color: lighten($grey-dark, 30%);
       margin-left: -1em;
@@ -86,7 +86,7 @@
 
   &.active, &.menu-open {
     > a:before {
-      content: $fa-var-chevron-down;
+      content: fa-content($fa-var-chevron-down);
     }
   }
 }

diff --git a/site/_sass/_mixins.scss b/site/_sass/_mixins.scss
@@ -7,14 +7,6 @@
   // -webkit-filter: grayscale($amount); // uncomment if necessary
 }
 
-@mixin fa_type {
-  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
-  font-size: inherit; // can't have font-size inherit on line above, so need to override
-  text-rendering: auto; // optimizelegibility throws things off #1094
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 @mixin link_background_hover {
   background-color: transparent;
   transition: background-color 0.5s;

diff --git a/site/_sass/themes/_dark.scss b/site/_sass/themes/_dark.scss
@@ -91,6 +91,8 @@
   --partner-img-opacity:     0.6;
   --platforms-vcloud-bright: 3;
 
-  .theme-toggle::before { content: ""; }
+  .theme-toggle::before {
+    content: fa-content($fa-var-sun);
+  }
 }
 }
diff --git a/site/_sass/themes/_light.scss b/site/_sass/themes/_light.scss
@@ -91,6 +91,8 @@
   --partner-img-opacity:     0.8;
   --platforms-vcloud-bright: 0;
 
-  .theme-toggle::before { content: ""; }
+  .theme-toggle::before {
+    content: fa-content($fa-var-moon);
+  }
 }
 }
diff --git a/site/assets/css/main.scss b/site/assets/css/main.scss
@@ -4,6 +4,7 @@
 @charset "utf-8";
 
 $font-size-base: 16px;
+$fa-font-path: "../fonts/font-awesome";
 
 @import "font-awesome";
 @import "twbs_custom";