Switch to Font Awesome 5

jgthms · Mar 23, 2024 · 0f694f9 · 0f694f9
1 parent f09a0ec
commit 0f694f9
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 148 deletions.
diff --git a/docs/_data/links.json b/docs/_data/links.json
diff --git a/docs/_includes/about/author.html b/docs/_includes/about/author.html
@@ -4,7 +4,7 @@ <h4 class="bd-footer-title">
 
 <div class="bd-footer-iframe">
   <a href="https://twitter.com/jgthms" class="button is-twitter" data-related="jgthms:Creator of Bulma">
-    <span class="icon"><i class="fa-brands fa-twitter"></i></span>
+    <span class="icon"><i class="fab fa-twitter"></i></span>
     <span>Follow @jgthms</span>
   </a>
 </div>
diff --git a/docs/_includes/about/share.html b/docs/_includes/about/share.html
@@ -4,12 +4,12 @@ <h4 class="bd-footer-title">
 
 <div class="bd-footer-iframe">
   <a href="https://twitter.com/share" class="button is-twitter" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">
-    <span class="icon"><i class="fa-brands fa-twitter"></i></span>
+    <span class="icon"><i class="fab fa-twitter"></i></span>
     <span>Twitter</span>
   </a>
 
   <a class="button is-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fbulma.io">
-    <span class="icon"><i class="fa-brands fa-facebook"></i></span>
+    <span class="icon"><i class="fab fa-facebook"></i></span>
     <span>Facebook</span>
   </a>
 </div>
diff --git a/docs/_includes/docs/components/variables.html b/docs/_includes/docs/components/variables.html
@@ -10,21 +10,21 @@
       <tr>
         <th>
           <div class="icon-text">
-            <span class="icon has-text-sass"><i class="fa-brands fa-sass"></i></span>
+            <span class="icon has-text-sass"><i class="fab fa-sass"></i></span>
             <span>Sass Variable</span>
           </div>
         </th>
         {% unless include.hide_css_vars %}
           <th>
             <div class="icon-text">
-              <span class="icon has-text-link"><i class="fa-brands fa-css3"></i></span>
+              <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
               <span>CSS Variable</span>
             </div>
           </th>
         {% endunless %}
         <th>
           <div class="icon-text">
-            <span class="icon has-text-success"><i class="fa-solid fa-code"></i></span>
+            <span class="icon has-text-success"><i class="fas fa-code"></i></span>
             <span>Value</span>
           </div>
         </th>
@@ -45,4 +45,4 @@
       {% endfor %}
     </tbody>
   </table>
-</div>
+</div>
diff --git a/docs/_includes/docs/hero.html b/docs/_includes/docs/hero.html
@@ -1,12 +1,12 @@
 <section class="bd-hero is-{{ include.variant }}">
   <div class="bd-hero-body">
-    <h1 class="bd-hero-title">
+    <h1 class="bd-hero-title algolia-lvl0">
       {{ include.title }}
     </h1>
 
     <hr class="bd-hr">
 
-    <h2 class="bd-hero-subtitle">
+    <h2 class="bd-hero-subtitle algolia-lvl1">
       {{ include.subtitle }}
     </h2>
 

diff --git a/docs/_includes/docs/menu-link.html b/docs/_includes/docs/menu-link.html
@@ -20,7 +20,7 @@
 
   {% if include.has_sublist %}
     <span class="icon is-small">
-      <i class="fa-solid fa-angle-right"></i>
+      <i class="fas fa-angle-right"></i>
     </span>
   {% endif %}
 </a>
diff --git a/docs/_includes/docs/menu.html b/docs/_includes/docs/menu.html
@@ -1,26 +1,26 @@
 <div class="bd-menu">
   <div class="bd-menu-section is-start">
-    {% include docs/menu-heading.html icon="fa-solid fa-arrow-right" label="Start Here" %}
+    {% include docs/menu-heading.html icon="fas fa-arrow-right" label="Start Here" %}
     {% include docs/menu-list.html category_id="start" %}
   </div>
 
   <div class="bd-menu-section is-features">
-    {% include docs/menu-heading.html icon="fa-solid fa-medal" label="Features" %}
+    {% include docs/menu-heading.html icon="fas fa-medal" label="Features" %}
     {% include docs/menu-list.html category_id="features" %}
   </div>
 
   <div class="bd-menu-section is-sass">
-    {% include docs/menu-heading.html icon="fa-brands fa-sass" label="Sass Tools" %}
+    {% include docs/menu-heading.html icon="fab fa-sass" label="Sass Tools" %}
     {% include docs/menu-list.html category_id="sass" %}
   </div>
 
   <div class="bd-menu-section is-custom">
-    {% include docs/menu-heading.html icon="fa-solid fa-palette" label="Customization" %}
+    {% include docs/menu-heading.html icon="fas fa-palette" label="Customization" %}
     {% include docs/menu-list.html category_id="customize" %}
   </div>
 
   <div class="bd-menu-section is-library">
-    {% include docs/menu-heading.html icon="fa-solid fa-code" label="CSS Library" %}
+    {% include docs/menu-heading.html icon="fas fa-code" label="CSS Library" %}
 
     {% assign columns_size = site.data.links.categories.columns | size %}
     {% assign grid_size = site.data.links.categories.grid | size %}
@@ -59,7 +59,7 @@
   </div>
 
   <div class="bd-menu-section is-utilities">
-    {% include docs/menu-heading.html icon="fa-brands fa-css3" label="CSS Helpers" %}
+    {% include docs/menu-heading.html icon="fab fa-css3" label="CSS Helpers" %}
     {% include docs/menu-list.html category_id="helpers" %}
   </div>
 

diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html
@@ -15,6 +15,8 @@
   {%- endif %}
 </title>
 
+  <link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
+
 {% if page.fontawesome4 %}
   <link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
 {% endif %}

diff --git a/docs/_includes/global/header.html b/docs/_includes/global/header.html
@@ -13,7 +13,7 @@
 
       <button class="bd-nav-item is-search is-icon">
         <span class="icon">
-          <i class="fa-solid fa-magnifying-glass fa-lg"></i>
+          <i class="fas fa-search fa-lg"></i>
         </span>
       </button>
 
@@ -22,7 +22,7 @@
         data-target="js-more"
       >
         <span class="icon">
-          <i class="fa-solid fa-ellipsis fa-lg"></i>
+          <i class="fas fa-ellipsis-h fa-lg"></i>
         </span>
       </button>
 
@@ -86,25 +86,25 @@
         aria-label="System mode"
       >
         <span class="icon">
-          <i class="fas fa-display" aria-hidden="true"></i>
+          <i class="fas fa-desktop" aria-hidden="true"></i>
         </span>
         <span>System</span>
       </button>
     </div>
   </div>
 
-  <div class="bd-nav-search is-hidden">
+  <div class="bd-nav-search">
     <button
       class="bd-nav-item is-search-desktop is-icon js-burger"
       data-target="js-search"
     >
       <span class="icon">
-        <i class="fa-solid fa-magnifying-glass fa-lg"></i>
+        <i class="fas fa-search fa-lg"></i>
       </span>
     </button>
 
     <div id="js-search" class="bd-nav-menu is-search js-menu">
-      <input id="form-search" class="input" type="text" placeholder="Search" />
+      <input id="algoliaSearch" class="input" type="text" placeholder="Search" />
     </div>
   </div>
 

diff --git a/docs/_includes/home/features.html b/docs/_includes/home/features.html
@@ -11,14 +11,14 @@
     {% assign href = site.data.links.by_id['features'].path %}
     {% include website/feature.html
       id="modern"
-      icon="fa-brands fa-css3 fa-xl"
+      icon="fab fa-css3 fa-xl"
       title="Modern"
       subtitle="Flexbox + Grid + CSS Variables"
       href=href %}
     {% assign href = site.data.links.by_id['customize'].path %}
     {% include website/feature.html
       id="easy"
-      icon="fa-solid fa-star-of-life fa-xl"
+      icon="fas fa-star-of-life fa-xl"
       title="Easy"
       subtitle="Download. Customize. Done."
       href=href
@@ -27,7 +27,7 @@
     {{ href }}
     {% include website/feature.html
       id="free"
-      icon="fa-brands fa-github-alt fa-xl"
+      icon="fab fa-github-alt fa-xl"
       title="Free"
       subtitle="Open Source on GitHub"
       href=href

diff --git a/docs/_includes/home/intro.html b/docs/_includes/home/intro.html
@@ -119,7 +119,7 @@ <h1 class="bd-home-title js-animated">
       </p>
 
       <span class="thing bd-home-knowledge">
-        <span class="icon"> <i class="fa-solid fa-circle-check"></i></span>
+        <span class="icon"> <i class="fas fa-circle-check"></i></span>
         <strong>No CSS knowledge required!</strong>
       </span>
 

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -16,8 +16,15 @@
     {% include global/native.html %}
     {% include global/about.html %}
 
-    <script src="https://kit.fontawesome.com/418563224c.js" crossorigin="anonymous"></script>
     <script src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script type="text/javascript"> docsearch({
+      apiKey: 'cb93c14bebd90678e789c946d95ea94d',
+      indexName: 'bulma',
+      inputSelector: '#algoliaSearch',
+      debug: false // Set debug to true if you want to inspect the dropdown
+    });
+    </script>
     <script src="{{ site.url }}/assets/javascript/main.js"></script>
   </body>
 </html>
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
@@ -13,7 +13,7 @@
   <div class="bd-docs-overlay js-toggle" data-target="js-docs"></div>
 
   <button id="js-menu-toggle" class="button bd-docs-button js-toggle" data-target="js-docs">
-    <i class="fa-solid fa-arrow-right-from-bracket"></i>
+    <i class="fas fa-arrow-right-from-bracket"></i>
   </button>
 
   <div class="bd-docs-menu">
@@ -32,7 +32,7 @@
       prints=page.hero_prints
     %}
 
-    <div class="bd-docs-content">
+    <div class="bd-docs-content algolia-content">
       {% if page.markdown %}
         <div class="content">{{ content }}</div>
       {% else %}

diff --git a/docs/_sass/docs/docs.scss b/docs/_sass/docs/docs.scss
@@ -121,7 +121,7 @@
       margin-left: calc(-0.5 * var(--p));
       margin-top: calc(-0.5 * var(--p));
 
-      .fa-solid {
+      .fas {
         transition-duration: cv.getVar("duration");
         transition-property: transform;
       }
@@ -159,7 +159,7 @@
     &.is-active {
       padding-left: calc(var(--menu-width) + var(--p));
 
-      .bd-docs-button .fa-solid {
+      .bd-docs-button .fas {
         transform: rotate(180deg);
       }
 

diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
@@ -35784,7 +35784,7 @@ has-background-moon.is-hoverable:active {
     margin-left: calc(-0.5 * var(--p));
     margin-top: calc(-0.5 * var(--p));
   }
-  .bd-docs.is-fullwidth .bd-docs-button .fa-solid {
+  .bd-docs.is-fullwidth .bd-docs-button .fas {
     transition-duration: var(--bulma-duration);
     transition-property: transform;
   }
@@ -35816,7 +35816,7 @@ has-background-moon.is-hoverable:active {
   .bd-docs.is-fullwidth.is-active {
     padding-left: calc(var(--menu-width) + var(--p));
   }
-  .bd-docs.is-fullwidth.is-active .bd-docs-button .fa-solid {
+  .bd-docs.is-fullwidth.is-active .bd-docs-button .fas {
     transform: rotate(180deg);
   }
   .bd-docs.is-fullwidth.is-active .bd-docs-menu {

diff --git a/docs/assets/css/website.min.css b/docs/assets/css/website.min.css
diff --git a/docs/documentation.html b/docs/documentation.html
@@ -5,9 +5,9 @@
 subtitle: Everything you need to create a website with Bulma.
 hero_prints:
 - label: "Creative Commons"
-  icon: "fa-brands fa-creative-commons"
+  icon: "fab fa-creative-commons"
 - label: "Contribute on GitHub"
-  icon: "fa-solid fa-code-pull-request"
+  icon: "fas fa-code-pull-request"
 ---
 {% assign category_ids = site.data.links.category_ids %}
 

diff --git a/docs/documentation/customize/with-sass.html b/docs/documentation/customize/with-sass.html
@@ -133,7 +133,7 @@
     <td>
       <div class="icon-text has-text-html">
         <span class="icon">
-          <i class="fa-brands fa-html5"></i>
+          <i class="fab fa-html5"></i>
         </span>
       </div>
     </td>
@@ -144,7 +144,7 @@
     <td>
       <div class="icon-text has-text-css">
         <span class="icon">
-          <i class="fa-brands fa-css3"></i>
+          <i class="fab fa-css3"></i>
         </span>
       </div>
     </td>
@@ -155,7 +155,7 @@
     <td>
       <div class="icon-text has-text-success">
         <span class="icon">
-          <i class="fa-solid fa-code"></i>
+          <i class="fas fa-code"></i>
         </span>
       </div>
     </td>
@@ -166,7 +166,7 @@
     <td>
       <div class="icon-text has-text-sass">
         <span class="icon">
-          <i class="fa-brands fa-sass"></i>
+          <i class="fab fa-sass"></i>
         </span>
       </div>
     </td>
@@ -177,7 +177,7 @@
     <td>
       <div class="icon-text has-text-js">
         <span class="icon">
-          <i class="fa-brands fa-js"></i>
+          <i class="fab fa-js"></i>
         </span>
       </div>
     </td>