Switch to Font Awesome 5

docs/_data/links.json

@@ -2,7 +2,7 @@
   "by_id": {
     "home": {
       "name": "Home",
-      "icon": "fa-solid fa-house",
+      "icon": "fas fa-house",
       "path": "/"
     },
     "docs": {
@@ -10,27 +10,27 @@
       "long_name": "Documentation",
       "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
       "color": "primary",
-      "icon": "fa-solid fa-book",
+      "icon": "fas fa-book",
       "path": "/documentation/"
     },
     "code": {
       "name": "Templates",
       "subtitle": "Bulma templates to get started",
       "color": "link",
-      "icon": "fa-solid fa-code",
+      "icon": "fas fa-code",
       "path": "/bulma-templates/"
     },
     "blog": {
       "name": "Bulma Blog",
       "subtitle": "Stay updated with new features",
       "color": "rss",
-      "icon": "fa-solid fa-rss",
+      "icon": "fas fa-rss",
       "path": "/blog/"
     },
     "expo": {
       "name": "Expo",
       "subtitle": "Official Bulma showcase",
-      "icon": "fa-solid fa-star",
+      "icon": "fas fa-star",
       "color": "expo",
       "path": "/expo/"
     },
@@ -38,7 +38,7 @@
       "name": "Love",
       "subtitle": "Fans of Bulma around the world",
       "color": "love",
-      "icon": "fa-solid fa-heart",
+      "icon": "fas fa-heart",
       "path": "/love/"
     },
     "github": {
@@ -46,7 +46,7 @@
       "subtitle": "Open Source on GitHub",
       "icon_only": true,
       "color": "github",
-      "icon": "fa-brands fa-github-alt fa-lg",
+      "icon": "fab fa-github-alt fa-lg",
       "href": "https://github.com/jgthms/bulma"
     },
     "twitter": {
@@ -54,21 +54,21 @@
       "subtitle": "Follow me on Twitter",
       "icon_only": true,
       "color": "twitter",
-      "icon": "fa-brands fa-twitter fa-lg",
+      "icon": "fab fa-twitter fa-lg",
       "href": "https://twitter.com/jgthms"
     },
     "sponsor": {
       "name": "Sponsor",
       "subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
       "color": "patreon",
-      "icon": "fa-brands fa-patreon",
+      "icon": "fab fa-patreon",
       "path": "/become-a-bulma-sponsor/"
     },
     "brand": {
       "name": "Bulma Brand",
       "subtitle": "The official Bulma logos",
       "color": "primary",
-      "icon": "fa-solid fa-medal",
+      "icon": "fas fa-medal",
       "path": "/brand/"
     },
     "backers": {
@@ -76,7 +76,7 @@
       "name": "Backers",
       "title": "Backers",
       "color": "patreon",
-      "icon": "fa-solid fa-hand-holding-heart",
+      "icon": "fas fa-hand-holding-heart",
       "path": "/backers/",
       "subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
       "description": "Everyone who is supporting Bulma"
@@ -84,7 +84,7 @@
     "bootstrap": {
       "name": "Coming from Bootstrap",
       "subtitle": "See how Bulma is an alternative to Bootstrap",
-      "icon": "fa-solid fa-exchange-alt",
+      "icon": "fas fa-exchange-alt",
       "color": "bootstrap",
       "path": "/alternative-to-bootstrap/"
     },
@@ -92,7 +92,7 @@
       "name": "Bulma Extensions",
       "title": "Extensions",
       "subtitle": "Side projects to enhance Bulma",
-      "icon": "fa-solid fa-plug",
+      "icon": "fas fa-plug",
       "color": "extensions",
       "path": "/extensions/"
     },
@@ -100,14 +100,14 @@
       "name": "Made with Bulma",
       "title": "Badge",
       "subtitle": "The official community badge",
-      "icon": "fa-solid fa-certificate",
+      "icon": "fas fa-certificate",
       "color": "warning",
       "path": "/made-with-bulma/"
     },
     "patreon-backers": {
       "name": "Patreon and GitHub backers",
       "subtitle": "Everyone who is supporting Bulma",
-      "icon": "fa-solid fa-patreon",
+      "icon": "fas fa-patreon",
       "color": "patreon",
       "path": "/backers/"
     },
@@ -115,631 +115,631 @@
       "name": "Start",
       "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
       "color": "start",
-      "icon": "fa-solid fa-arrow-right",
+      "icon": "fas fa-arrow-right",
       "path": "/documentation/start/"
     },
     "start-overview": {
       "name": "Overview",
       "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
       "color": "start",
-      "icon": "fa-regular fa-eye",
+      "icon": "far fa-eye",
       "path": "/documentation/start/overview/"
     },
     "start-installation": {
       "name": "Installation",
       "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
       "color": "start",
-      "icon": "fa-solid fa-download",
+      "icon": "fas fa-download",
       "path": "/documentation/start/installation/"
     },
     "start-alternative-versions": {
       "name": "Alternative Versions",
       "subtitle": "Use one of the <strong>pre-built</strong> alternative versions of Bulma",
       "color": "start",
-      "icon": "fa-solid fa-download",
+      "icon": "fas fa-download",
       "path": "/documentation/start/alternative-versions/"
     },
     "start-syntax": {
       "name": "Syntax",
       "subtitle": "<strong>How to use</strong> Bulma components and their alternative styles",
       "color": "start",
-      "icon": "fa-solid fa-code",
+      "icon": "fas fa-code",
       "path": "/documentation/start/syntax/"
     },
     "start-modular": {
       "name": "Modularity",
       "subtitle": "Just import what you <strong>need</strong>",
       "color": "start",
-      "icon": "fa-solid fa-cubes",
+      "icon": "fas fa-cubes",
       "path": "/documentation/start/modular/"
     },
     "start-responsiveness": {
       "name": "Responsiveness",
       "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
       "color": "start",
-      "icon": "fa-solid fa-arrows-left-right",
+      "icon": "fas fa-arrows-alt-h",
       "path": "/documentation/start/responsiveness/"
     },
     "start-migrating": {
       "name": "Migrating to v1",
       "subtitle": "How to <strong>migrate</strong> to Bulma v1",
       "color": "start",
-      "icon": "fa-solid fa-arrows-left-right",
+      "icon": "fas fa-arrow-up",
       "path": "/documentation/start/migrating-to-v1/"
     },
     "features": {
       "name": "Features",
       "subtitle": "What makes Bulma <strong>special</strong>",
       "color": "danger",
-      "icon": "fa-solid fa-wand-magic-sparkles",
+      "icon": "fas fa-wand-magic-sparkles",
       "path": "/documentation/features/"
     },
     "features-auto-color": {
       "name": "Automatic Color",
       "subtitle": "Change the color of your text automatically based on the background",
       "color": "danger",
-      "icon": "fa-solid fa-droplet",
+      "icon": "fas fa-droplet",
       "path": "/documentation/features/auto-color/"
     },
     "features-color-palettes": {
       "name": "Color Palettes",
       "subtitle": "Input <strong>1 color</strong>, Receive <strong>dozens</strong> of different <strong>shades</strong> for that color",
       "color": "danger",
-      "icon": "fa-solid fa-swatchbook",
+      "icon": "fas fa-swatchbook",
       "path": "/documentation/features/color-palettes/"
     },
     "features-css-variables": {
       "name": "CSS Variables",
       "subtitle": "Customizing with <strong>CSS only</strong>",
       "color": "danger",
-      "icon": "fa-brands fa-css3",
+      "icon": "fab fa-css3",
       "path": "/documentation/features/css-variables/"
     },
     "features-dark-mode": {
       "name": "Dark Mode",
       "subtitle": "Bulma comes with an <strong>automatic Dark mode</strong>",
       "color": "danger",
-      "icon": "fa-solid fa-moon",
+      "icon": "fas fa-moon",
       "path": "/documentation/features/dark-mode/"
     },
     "features-skeletons": {
       "name": "Skeletons",
       "subtitle": "Transform almost any Bulma component into a <strong>skeleton loader</strong>, or use one of the pre-built utility elements",
       "color": "danger",
-      "icon": "fa-solid fa-swatchbook",
+      "icon": "fas fa-spinner",
       "path": "/documentation/features/skeletons/"
     },
     "features-smart-columns": {
       "name": "Smart Columns",
       "subtitle": "The <strong>simplest</strong> column system",
       "color": "danger",
-      "icon": "fa-solid fa-chart-simple fa-flip-vertical",
+      "icon": "fas fa-chart-simple fa-flip-vertical",
       "path": "/documentation/features/smart-columns/"
     },
     "features-smart-grid": {
       "name": "Smart Grid",
       "subtitle": "A <strong>responsive 2D</strong> CSS Grid",
       "color": "danger",
-      "icon": "fa-solid fa-grip",
+      "icon": "fas fa-grip",
       "path": "/documentation/features/smart-grid/"
     },
     "features-themes": {
       "name": "Themes",
       "subtitle": "How Bulma styles its components with <strong>CSS variables</strong>",
       "color": "danger",
-      "icon": "fa-solid fa-palette",
+      "icon": "fas fa-palette",
       "path": "/documentation/features/themes/"
     },
     "sass": {
       "name": "Sass Utilities",
       "subtitle": "<strong>Sass tools</strong> used by Bulma and available for you",
       "color": "primary",
-      "icon": "fa-brands fa-sass",
+      "icon": "fab fa-sass",
       "path": "/documentation/sass/"
     },
     "sass-extends": {
       "name": "Extends",
       "subtitle": "Sass extends to keep your <strong>CSS code DRY</strong>",
       "color": "sass",
-      "icon": "fa-solid fa-percentage",
+      "icon": "fas fa-percentage",
       "path": "/documentation/sass/extends/"
     },
     "sass-form-control-mixins": {
       "name": "Form Control mixins",
       "subtitle": "<strong>Mixins</strong> for Bulma's buttons and form controls",
       "color": "sass",
-      "icon": "fa-regular fa-square-check",
+      "icon": "far fa-hand-pointer",
       "path": "/documentation/sass/form-control-mixins/"
     },
     "sass-functions": {
       "name": "Functions",
       "subtitle": "<strong>Utility functions</strong> to calculate colors and other values",
       "color": "orange",
-      "icon": "fa-solid fa-code",
+      "icon": "fas fa-code",
       "path": "/documentation/sass/functions/"
     },
     "sass-mixins": {
       "name": "Mixins",
       "subtitle": "Utility mixins for custom elements and other CSS helpers",
       "color": "sass",
-      "icon": "fa-solid fa-at",
+      "icon": "fas fa-at",
       "path": "/documentation/sass/mixins/"
     },
     "sass-responsive-mixins": {
       "name": "Responsive mixins",
       "subtitle": "Mixins that allows you to define different styles for each screen size",
       "color": "sass",
-      "icon": "fa-solid fa-arrows-left-right",
+      "icon": "fas fa-arrows-alt-h",
       "path": "/documentation/sass/responsive-mixins/"
     },
     "customize": {
       "name": "Customize",
       "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
       "color": "sass",
-      "icon": "fa-solid fa-paint-brush",
+      "icon": "fas fa-paint-brush",
       "path": "/documentation/customize/"
     },
     "customize-concepts": {
       "name": "Concepts",
       "subtitle": "What makes Bulma <strong>customizable</strong>",
       "color": "info",
-      "icon": "fa-solid fa-lightbulb",
+      "icon": "fas fa-lightbulb",
       "path": "/documentation/customize/concepts/"
     },
     "customize-with-sass": {
       "name": "With Sass",
       "subtitle": "Customize Bulma with Sass variables",
       "color": "sass",
-      "icon": "fa-brands fa-sass",
+      "icon": "fab fa-sass",
       "path": "/documentation/customize/with-sass/"
     },
     "customize-with-css-variables": {
       "name": "With CSS Variables",
       "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
       "color": "grey",
-      "icon": "fa-brands fa-css3",
+      "icon": "fab fa-css3",
       "path": "/documentation/customize/with-css-variables/"
     },
     "customize-sass-list": {
       "name": "List of Sass variables",
       "subtitle": "All <strong>Sass</strong> variables defined by Bulma",
       "color": "grey",
-      "icon": "fa-solid fa-list",
+      "icon": "fas fa-list",
       "path": "/documentation/customize/list-of-sass-variables/"
     },
     "library": {
       "name": "CSS Library",
       "subtitle": "The core of the Bulma framework",
       "color": "link",
-      "icon": "fa-solid fa-cubes",
+      "icon": "fas fa-cubes",
       "path": "/documentation/library/"
     },
     "columns": {
       "name": "Columns",
       "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
       "color": "link",
-      "icon": "fa-solid fa-chart-simple fa-flip-vertical",
+      "icon": "fas fa-columns",
       "path": "/documentation/columns/"
     },
     "columns-basics": {
       "name": "Basics",
       "subtitle": "A simple way to build <strong>responsive columns</strong>",
       "color": "link",
-      "icon": "fa-solid fa-columns",
+      "icon": "fas fa-columns",
       "path": "/documentation/columns/basics/"
     },
     "columns-sizes": {
       "name": "Sizes",
       "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
       "color": "success",
-      "icon": "fa-solid fa-up-right-and-down-left-from-center",
+      "icon": "fas fa-up-right-and-down-left-from-center",
       "path": "/documentation/columns/sizes/"
     },
     "columns-responsiveness": {
       "name": "Responsiveness",
       "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
       "color": "primary",
-      "icon": "fa-solid fa-arrows-left-right",
+      "icon": "fas fa-arrows-left-right",
       "path": "/documentation/columns/responsiveness/"
     },
     "columns-nesting": {
       "name": "Nesting",
       "subtitle": "A simple way to build <strong>responsive columns</strong>",
       "color": "danger",
-      "icon": "fa-solid fa-sitemap",
+      "icon": "fas fa-sitemap",
       "path": "/documentation/columns/nesting/"
     },
     "columns-gap": {
       "name": "Gap",
       "subtitle": "Customize the <strong>gap</strong> between the columns",
       "color": "info",
-      "icon": "fa-solid fa-arrows-left-right-to-line",
+      "icon": "fas fa-arrows-left-right-to-line",
       "path": "/documentation/columns/gap/"
     },
     "columns-options": {
       "name": "Options",
       "subtitle": "Design different <strong>types</strong> of column layouts",
       "color": "grey",
-      "icon": "fa-solid fa-cogs",
+      "icon": "fas fa-cogs",
       "path": "/documentation/columns/options/"
     },
     "grid": {
       "name": "Grid",
       "subtitle": "A <strong>2 dimensional</strong> layout component",
-      "icon": "fa-solid fa-grip",
+      "icon": "fas fa-th",
       "path": "/documentation/grid/"
     },
     "grid-smart": {
       "name": "Smart Grid",
       "subtitle": "A <strong>smart</strong> 2D grid with <strong>flexible</strong> columns",
-      "icon": "fa-solid fa-lightbulb",
+      "icon": "fas fa-lightbulb",
       "path": "/documentation/grid/smart-grid/"
     },
     "grid-fixed": {
       "name": "Fixed Grid",
       "subtitle": "A customizable 2D <strong>fixed</strong> grid",
-      "icon": "fa-solid fa-grip",
+      "icon": "fas fa-grip",
       "path": "/documentation/grid/fixed-grid/"
     },
     "grid-cells": {
       "name": "Grid Cells",
       "subtitle": "Adjust the width and height of each <strong>individual cell</strong>",
-      "icon": "fa-solid fa-square",
+      "icon": "fas fa-square",
       "path": "/documentation/grid/grid-cells/"
     },
     "grid-playground": {
       "name": "Playground",
       "subtitle": "<strong>Try out</strong> the Bulma 2D Grid",
-      "icon": "fa-solid fa-code",
+      "icon": "fas fa-code",
       "path": "/documentation/grid/playground/"
     },
     "layout": {
       "name": "Layout",
       "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
       "color": "success",
-      "icon": "fa-solid fa-border-none",
+      "icon": "fas fa-border-none",
       "path": "/documentation/layout/"
     },
     "layout-container": {
       "name": "Container",
       "subtitle": "A simple <strong>container</strong> to center your content horizontally",
       "path": "/documentation/layout/container/",
-      "icon": "fa-solid fa-arrows-alt-h"
+      "icon": "fas fa-arrows-alt-h"
     },
     "layout-level": {
       "name": "Level",
       "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
       "path": "/documentation/layout/level/",
-      "icon": "fa-solid fa-ruler-horizontal"
+      "icon": "fas fa-ruler-horizontal"
     },
     "layout-media": {
       "name": "Media Object",
       "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
       "path": "/documentation/layout/media-object/",
-      "icon": "fa-solid fa-th-list"
+      "icon": "fas fa-th-list"
     },
     "layout-hero": {
       "name": "Hero",
       "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
       "path": "/documentation/layout/hero/",
-      "icon": "fa-solid fa-star"
+      "icon": "fas fa-star"
     },
     "layout-section": {
       "name": "Section",
       "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
       "path": "/documentation/layout/section/",
-      "icon": "fa-solid fa-square"
+      "icon": "fas fa-square"
     },
     "layout-footer": {
       "name": "Footer",
       "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
       "path": "/documentation/layout/footer/",
-      "icon": "fa-solid fa-window-minimize"
+      "icon": "fas fa-window-minimize"
     },
     "form": {
       "name": "Form",
       "subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
       "color": "link",
-      "icon": "fa-solid fa-align-left fa-flip-vertical",
+      "icon": "fas fa-align-left fa-flip-vertical",
       "path": "/documentation/form/"
     },
     "form-general": {
       "name": "General",
       "subtitle": "All generic <strong>form controls</strong>, designed for consistency",
       "color": "link",
-      "icon": "fa-solid fa-keyboard",
+      "icon": "fas fa-keyboard",
       "path": "/documentation/form/general/"
     },
     "form-input": {
       "name": "Input",
       "subtitle": "The <strong>text input</strong> and its variations",
       "color": "link",
-      "icon": "fa-solid fa-minus",
+      "icon": "fas fa-minus",
       "path": "/documentation/form/input/"
     },
     "form-textarea": {
       "name": "Textarea",
       "subtitle": "The multiline <strong>textarea</strong> and its variations",
       "color": "link",
-      "icon": "fa-solid fa-square",
+      "icon": "fas fa-square",
       "path": "/documentation/form/textarea/"
     },
     "form-select": {
       "name": "Select",
       "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
       "color": "link",
-      "icon": "fa-solid fa-mouse-pointer",
+      "icon": "fas fa-mouse-pointer",
       "path": "/documentation/form/select/"
     },
     "form-checkbox": {
       "name": "Checkbox",
       "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
       "color": "link",
-      "icon": "fa-solid fa-check-square",
+      "icon": "fas fa-check-square",
       "path": "/documentation/form/checkbox/"
     },
     "form-radio": {
       "name": "Radio",
       "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
       "color": "link",
-      "icon": "fa-solid fa-dot-circle",
+      "icon": "fas fa-dot-circle",
       "path": "/documentation/form/radio/"
     },
     "form-file": {
       "name": "File",
       "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
       "color": "link",
-      "icon": "fa-solid fa-cloud-upload-alt",
+      "icon": "fas fa-cloud-upload-alt",
       "path": "/documentation/form/file/"
     },
     "elements": {
       "name": "Elements",
       "subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
       "color": "orange",
-      "icon": "fa-solid fa-cube",
+      "icon": "fas fa-cube",
       "path": "/documentation/elements/"
     },
     "elements-block": {
       "name": "Block",
       "subtitle": "Bulma's most basic spacer <strong>block</strong>",
       "color": "grey",
-      "icon": "fa-solid fa-arrows-alt-v",
+      "icon": "fas fa-arrows-alt-v",
       "path": "/documentation/elements/block/"
     },
     "elements-box": {
       "name": "Box",
       "subtitle": "A white <strong>box</strong> to contain other elements",
       "color": "grey",
-      "icon": "fa-solid fa-square",
+      "icon": "fas fa-square",
       "path": "/documentation/elements/box/"
     },
     "elements-button": {
       "name": "Button",
       "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
       "color": "success",
-      "icon": "fa-solid fa-hand-pointer",
+      "icon": "fas fa-hand-pointer",
       "path": "/documentation/elements/button/"
     },
     "elements-content": {
       "name": "Content",
       "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
       "color": "primary",
-      "icon": "fa-solid fa-align-left",
+      "icon": "fas fa-align-left",
       "path": "/documentation/elements/content/"
     },
     "elements-delete": {
       "name": "Delete",
       "subtitle": "A versatile <strong>delete</strong> cross",
       "color": "danger",
-      "icon": "fa-solid fa-times-circle",
+      "icon": "fas fa-times-circle",
       "path": "/documentation/elements/delete/"
     },
     "elements-icon": {
       "name": "Icon",
       "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
-      "icon": "fa-solid fa-font-awesome",
+      "icon": "fas fa-font-awesome",
       "path": "/documentation/elements/icon/"
     },
     "elements-image": {
       "name": "Image",
       "subtitle": "A container for <strong>responsive images</strong>",
       "color": "sass",
-      "icon": "fa-solid fa-image",
+      "icon": "fas fa-image",
       "path": "/documentation/elements/image/"
     },
     "elements-notification": {
       "name": "Notification",
       "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
       "color": "orange",
-      "icon": "fa-solid fa-exclamation-triangle",
+      "icon": "fas fa-exclamation-triangle",
       "path": "/documentation/elements/notification/"
     },
     "elements-progress": {
       "name": "Progress bars",
       "subtitle": "Native HTML <strong>progress</strong> bars",
       "color": "warning",
-      "icon": "fa-solid fa-spinner",
+      "icon": "fas fa-spinner",
       "path": "/documentation/elements/progress/"
     },
     "elements-table": {
       "name": "Table",
       "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
       "color": "info",
-      "icon": "fa-solid fa-table",
+      "icon": "fas fa-table",
       "path": "/documentation/elements/table/"
     },
     "elements-tag": {
       "name": "Tag",
       "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
       "color": "success",
-      "icon": "fa-solid fa-tag",
+      "icon": "fas fa-tag",
       "path": "/documentation/elements/tag/"
     },
     "elements-title": {
       "name": "Title",
       "subtitle": "Simple <strong>headings</strong> to add depth to your page",
       "color": "black",
-      "icon": "fa-solid fa-heading",
+      "icon": "fas fa-heading",
       "path": "/documentation/elements/title/"
     },
     "components": {
       "name": "Components",
       "subtitle": "Advanced multi-part components with lots of possibilities",
       "color": "danger",
-      "icon": "fa-solid fa-cubes",
+      "icon": "fas fa-cubes",
       "path": "/documentation/components/"
     },
     "components-breadcrumb": {
       "name": "Breadcrumb",
       "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
       "color": "star",
-      "icon": "fa-solid fa-ellipsis-h",
+      "icon": "fas fa-ellipsis-h",
       "path": "/documentation/components/breadcrumb/"
     },
     "components-card": {
       "name": "Card",
       "subtitle": "An all-around flexible and composable component",
       "color": "success",
-      "icon": "fa-solid fa-id-card",
+      "icon": "fas fa-id-card",
       "path": "/documentation/components/card/"
     },
     "components-dropdown": {
       "name": "Dropdown",
       "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
       "color": "success",
-      "icon": "fa-solid fa-angle-down",
+      "icon": "fas fa-angle-down",
       "path": "/documentation/components/dropdown/"
     },
     "components-menu": {
       "name": "Menu",
       "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
-      "icon": "fa-solid fa-bars",
+      "icon": "fas fa-bars",
       "path": "/documentation/components/menu/"
     },
     "components-message": {
       "name": "Message",
       "subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
       "color": "info",
-      "icon": "fa-solid fa-window-maximize",
+      "icon": "fas fa-window-maximize",
       "path": "/documentation/components/message/"
     },
     "components-modal": {
       "name": "Modal",
       "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
       "color": "danger",
-      "icon": "fa-solid fa-clone",
+      "icon": "fas fa-clone",
       "path": "/documentation/components/modal/"
     },
     "components-navbar": {
       "name": "Navbar",
       "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
       "color": "primary",
-      "icon": "fa-solid fa-minus",
+      "icon": "fas fa-minus",
       "path": "/documentation/components/navbar/"
     },
     "components-pagination": {
       "name": "Pagination",
       "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
       "color": "orange",
-      "icon": "fa-solid fa-caret-square-right",
+      "icon": "fas fa-caret-square-right",
       "path": "/documentation/components/pagination/"
     },
     "components-panel": {
       "name": "Panel",
       "subtitle": "A composable <strong>panel</strong>, for compact controls",
       "color": "grey-dark",
-      "icon": "fa-solid fa-list-alt",
+      "icon": "fas fa-list-alt",
       "path": "/documentation/components/panel/"
     },
     "components-tabs": {
       "name": "Tabs",
       "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
       "color": "sass",
-      "icon": "fa-solid fa-folder",
+      "icon": "fas fa-folder",
       "path": "/documentation/components/tabs/"
     },
     "skeletons": {
       "name": "Skeletons",
       "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
       "color": "success",
-      "icon": "fa-solid fa-border-none",
+      "icon": "fas fa-border-none",
       "path": "/documentation/skeletons/"
     },
     "helpers": {
       "name": "Helpers",
       "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
       "color": "success",
-      "icon": "fa-brands fa-css3",
+      "icon": "fab fa-css3",
       "path": "/documentation/helpers/"
     },
     "helpers-color": {
       "name": "Color",
       "subtitle": "Change the <strong>color</strong> of the text and/or background",
       "color": "success",
-      "icon": "fa-solid fa-tint",
+      "icon": "fas fa-tint",
       "path": "/documentation/helpers/color-helpers/"
     },
     "helpers-palette": {
       "name": "Color Palette",
       "subtitle": "Use a color's <strong>palette</strong> as text color and/or background",
       "color": "success",
-      "icon": "fa-solid fa-swatchbook",
+      "icon": "fas fa-swatchbook",
       "path": "/documentation/helpers/palette-helpers/"
     },
     "helpers-css-grid": {
       "name": "CSS Grid",
       "subtitle": "Change the <strong>color</strong> of the text and/or background",
       "color": "success",
-      "icon": "fa-solid fa-grip",
+      "icon": "fas fa-grip",
       "path": "/documentation/helpers/css-grid-helpers/"
     },
     "helpers-flexbox": {
       "name": "Flexbox",
       "subtitle": "Helpers for all <strong>Flexbox</strong> properties",
       "color": "success",
-      "icon": "fa-solid fa-chart-simple fa-flip-vertical",
+      "icon": "far fa-square",
       "path": "/documentation/helpers/flexbox-helpers/"
     },
     "helpers-positioning": {
       "name": "Positioning",
       "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
       "color": "success-dark",
-      "icon": "fa-solid fa-arrows-up-down-left-right",
+      "icon": "fas fa-mouse-pointer",
       "path": "/documentation/helpers/spacing-helpers/"
     },
     "helpers-sizing": {
       "name": "Sizing",
       "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
       "color": "success-dark",
-      "icon": "fa-solid fa-up-right-and-down-left-from-center",
+      "icon": "fas fa-expand-arrows-alt",
       "path": "/documentation/helpers/spacing-helpers/"
     },
     "helpers-spacing": {
       "name": "Spacing",
       "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
       "color": "success-dark",
-      "icon": "fa-solid fa-arrows-left-right-to-line",
+      "icon": "fas fa-arrows-alt-h",
       "path": "/documentation/helpers/spacing-helpers/"
     },
     "helpers-typography": {
       "name": "Typography",
       "subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
       "color": "success",
-      "icon": "fa-solid fa-font",
+      "icon": "fas fa-font",
       "path": "/documentation/helpers/typography-helpers/"
     },
     "helpers-visibility": {
       "name": "Visibility",
       "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
       "color": "success",
-      "icon": "fa-regular fa-eye",
+      "icon": "far fa-eye",
       "path": "/documentation/helpers/visibility-helpers/"
     },
     "helpers-other": {
       "name": "Other",
       "subtitle": "Other useful Bulma helpers",
       "color": "success",
-      "icon": "fa-solid fa-ellipsis-h",
+      "icon": "fas fa-ellipsis-h",
       "path": "/documentation/helpers/other-helpers/"
     }
   },

docs/_includes/about/author.html

@@ -4,7 +4,7 @@
 
 <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>

docs/_includes/about/share.html

@@ -4,12 +4,12 @@
 
 <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>

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>

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>
 

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>

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>
 

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 %}

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>
 

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

docs/_includes/home/intro.html

@@ -119,7 +119,7 @@
       </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>
 

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>

docs/_layouts/docs.html

@@ -13,7 +13,7 @@ route: documentation
   <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 @@ route: documentation
       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 %}

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);
       }
 

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 {

docs/documentation.html

@@ -5,9 +5,9 @@ title: Official Bulma Documentation
 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 %}
 

docs/documentation/customize/with-sass.html

@@ -133,7 +133,7 @@ Your project folder should look like this:
     <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 @@ Your project folder should look like this:
     <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 @@ Your project folder should look like this:
     <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 @@ Your project folder should look like this:
     <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 @@ Your project folder should look like this:
     <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>