MAINT: update icons to fit Fontawesome 6 (#963)

* setup fontawesome 5 everywhere

* use variable for all css defined icons

* replace all fa5 icons by fa6

* update icon links definition

* set back moon to regular

* load regular fonts

* prettify tests

* add padding to the search icon

* typo

docs/conf.py

@@ -116,7 +116,7 @@
         {
             "name": "PyPI",
             "url": "https://pypi.org/project/pydata-sphinx-theme",
-            "icon": "fas fa-box",
+            "icon": "fa-solid fa-box",
         },
         {
             "name": "PyData",

docs/user_guide/fonts.rst

@@ -2,7 +2,7 @@ Fonts and FontAwesome
 =====================
 
 The theme includes the `FontAwesome 6 Free <https://fontawesome.com/icons?m=free>`__
-icon font (the ``.fa, .far, .fas`` styles, which are used for
+icon font (the ``.fa-solid, .fa-regular, .fa-brands`` styles, which are used for
 :ref:`icon links <icon-links>` and admonitions).
 This is the only *vendored* font, and otherwise the theme by default relies on
 available system fonts for normal body text and headers.

docs/user_guide/header-links.rst

@@ -59,7 +59,7 @@ These links take the following form:
                # URL where the link will redirect
                "url": "https://github.com/<your-org>/<your-repo>",  # required
                # Icon class (if "type": "fontawesome"), or path to local image (if "type": "local")
-               "icon": "fab fa-github-square",
+               "icon": "fa-brands fa-square-github",
                # The type of image to be used (see below for details)
                "type": "fontawesome",
            }
@@ -91,7 +91,7 @@ specifying a FontAwesome class in the ``icon`` value.
 The value of ``icon`` can be any full
 `FontAwesome 6 Free <https://fontawesome.com/icons?d=gallery&m=free>`__ icon.
 In addition to the main icon class, e.g. ``fa-cat``, the "style" class must
-also be provided e.g. `fab` for *branding*, or `fas` for *solid*.
+also be provided e.g. `fa-brands` for *branding*, or `fa-solid` for *solid*.
 
 Here are several examples:
 
@@ -103,25 +103,25 @@ Here are several examples:
            {
                "name": "GitHub",
                "url": "https://github.com/<your-org>/<your-repo>",
-               "icon": "fab fa-github-square",
+               "icon": "fa-brands fa-square-github",
                "type": "fontawesome",
            },
            {
                "name": "GitLab",
                "url": "https://gitlab.com/<your-org>/<your-repo>",
-               "icon": "fab fa-gitlab",
+               "icon": "fa-brands fa-square-gitlab",
                "type": "fontawesome",
            },
            {
                "name": "Twitter",
                "url": "https://twitter.com/<your-handle>",
-               "icon": "fab fa-twitter-square",
+               "icon": "fa-brands fa-square-twitter",
                # The default for `type` is `fontawesome` so it is not actually required in any of the above examples as it is shown here
            },
            {
                "name": "Mastodon",
                "url": "https://<your-host>@<your-handle>",
-               "icon": "fab fa-mastodon",
+               "icon": "fa-brands fa-mastodon",
            },
        ],
        ...

src/pydata_sphinx_theme/__init__.py

@@ -270,7 +270,7 @@ def generate_header_nav_html(n_links_before_dropdown=5):
             links_html.append(
                 f"""
             <li class="nav-item">
-                <a class="nav-link nav-external" href="{ external_link["url"] }">{ external_link["name"] }<i class="fas fa-external-link-alt"></i></a>
+                <a class="nav-link nav-external" href="{ external_link["url"] }">{ external_link["name"] }<i class="fa-solid fa-up-right-from-square"></i></a>
             </li>"""  # noqa
             )
 
@@ -510,7 +510,7 @@ def _add_collapse_checkboxes(soup):
         label = soup.new_tag(
             "label", attrs={"for": checkbox_name, "class": "toctree-toggle"}
         )
-        label.append(soup.new_tag("i", attrs={"class": "fas fa-chevron-down"}))
+        label.append(soup.new_tag("i", attrs={"class": "fa-solid fa-chevron-down"}))
         if "toctree-l0" in classes:
             # making label cover the whole caption text with css
             label["class"] = "label-parts"

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

@@ -4,21 +4,20 @@
 
 #navbar-icon-links {
   i {
-    &.fa,
-    &.fab,
-    &.far,
-    &.fas {
+    &.fa-brands,
+    &.fa-regular,
+    &.fa-solid {
       vertical-align: middle;
       font-style: normal;
       font-size: var(--pst-font-size-icon);
     }
 
     /* Social media buttons */
-    &.fa-twitter-square:before {
+    &.fa-square-twitter:before {
       color: #55acee;
     }
 
-    &.fa-gitlab:before {
+    &.fa-square-gitlab:before {
       color: #548;
     }
 

src/pydata_sphinx_theme/assets/styles/components/_search.scss

@@ -13,6 +13,10 @@
     left: 25px;
   }
 
+  i.fa-solid.fa-magnifying-glass {
+    padding-right: 0.5rem;
+  }
+
   input {
     background-color: var(--pst-color-background);
     border-radius: $admonition-border-radius;
@@ -86,6 +90,10 @@
     margin-top: 0.5rem;
     width: 90%;
     max-width: 800px;
+
+    i.fa-solid.fa-magnifying-glass {
+      padding-right: 0.5rem;
+    }
   }
 
   .search-button__overlay {

src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss

@@ -53,7 +53,7 @@ span.versionmodified {
     font-style: normal;
     margin-right: 0.6rem;
     color: var(--pst-color-info);
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 6 Free";
     font-weight: 900;
     content: var(--pst-icon-versionmodified-default);
   }

src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss

@@ -45,7 +45,7 @@ div.admonition,
       width: 1rem;
       height: 1rem;
       color: var(--pst-color-info);
-      font-family: "Font Awesome 5 Free";
+      font-family: "Font Awesome 6 Free";
       font-weight: 900;
       content: var(--pst-icon-admonition-default);
       opacity: 1;

src/pydata_sphinx_theme/assets/styles/content/_spans.scss

@@ -16,8 +16,8 @@ span.guilabel {
 }
 
 a.reference.download:before {
-  content: "\f019";
-  font-family: "Font Awesome 5 Free";
+  content: var(--pst-icon-download);
+  font-family: "Font Awesome 6 Free";
   font-size: 0.8em;
   font-weight: 600;
   padding: 0 0.25em;

src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss

@@ -31,14 +31,14 @@ article.bd-article > section + div.section {
   font-size: 1.2em;
 
   span:first-child:before {
-    content: "\f104";
-    font-family: "Font Awesome 5 Free";
+    content: var(--pst-icon-angle-left);
+    font-family: "Font Awesome 6 Free";
     font-weight: 800;
   }
 
   span:last-child:after {
-    content: "\f105";
-    font-family: "Font Awesome 5 Free";
+    content: var(--pst-icon-angle-right);
+    font-family: "Font Awesome 6 Free";
     font-weight: 800;
   }
 }

src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss

@@ -185,9 +185,9 @@ nav.bd-links {
 
     &.reference.external {
       &:after {
-        font-family: "Font Awesome 5 Free";
+        font-family: "Font Awesome 6 Free";
         font-weight: 900;
-        content: "\f35d";
+        content: var(--pst-icon-external-link);
         font-size: 0.75em;
         margin-left: 0.3em;
       }

src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss

@@ -64,8 +64,8 @@ div#searchbox {
       // match padding to .toc-item > i above
       // f010 is magnifying glass minus
       &:before {
-        content: "\f010";
-        font-family: FontAwesome;
+        content: var(--pst-icon-search-minus);
+        font-family: "Font Awesome 6 Free";
         padding-right: 0.5rem;
       }
     }

src/pydata_sphinx_theme/assets/styles/variables/_icons.scss

@@ -7,10 +7,15 @@
   --pst-font-size-icon: 1.5rem;
 
   // Font Awesome default icons
-  --pst-icon-check-circle: "\f058"; // fas fa-check-circle
-  --pst-icon-info-circle: "\f05a"; // fas fa-info-circle
-  --pst-icon-exclamation-triangle: "\f071"; // fas fa-exclamation-triangle
-  --pst-icon-exclamation-circle: "\f06a"; // fas fa-exclamation-circle
-  --pst-icon-times-circle: "\f057"; // fas fa-times-circle
-  --pst-icon-lightbulb: "\f0eb"; // fas fa-lightbulb
+  --pst-icon-check-circle: "\f058"; // fa-solid fa-circle-check
+  --pst-icon-info-circle: "\f05a"; // fa-solid fa-circle-info
+  --pst-icon-exclamation-triangle: "\f071"; // fa-solid fa-triangle-exclamation
+  --pst-icon-exclamation-circle: "\f06a"; // fa-solid fa-circle-exclamation
+  --pst-icon-times-circle: "\f057"; // fa-solid fa-circle-xmark
+  --pst-icon-lightbulb: "\f0eb"; // fa-solid fa-lightbulb
+  --pst-icon-download: "\f019"; // fa-solid fa-download
+  --pst-icon-angle-left: "\f104"; // fa-solid fa-angle-left
+  --pst-icon-angle-right: "\f105"; // fa-solid fa-angle-right
+  --pst-icon-external-link: "\f35d"; // fa-solid fa-up-right-from-square
+  --pst-icon-search-minus: "\f010"; // fa-solid fa-magnifying-glass-minus
 }

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html

@@ -2,7 +2,7 @@
 {% set src = sourcename.split('.') %}
 <div class="tocsection editthispage">
     <a href="{{ get_edit_url() }}">
-        <i class="fas fa-pencil-alt"></i> {{ _("Edit this page") }}
+        <i class="fa-solid fa-pencil"></i> {{ _("Edit this page") }}
     </a>
 </div>
 {% endif %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html

@@ -2,7 +2,7 @@
 <div class='prev-next-area'>
   {%- if prev %}
   <a class='left-prev' id="prev-link" href="{{ prev.link|e }}" title="{{ _('previous') }} {{ _('page') }}">
-      <i class="fas fa-angle-left"></i>
+      <i class="fa-solid fa-angle-left"></i>
       <div class="prev-next-info">
           <p class="prev-next-subtitle">{{ _("previous") }}</p>
           <p class="prev-next-title">{{ prev_title or prev.title }}</p>
@@ -15,7 +15,7 @@
       <p class="prev-next-subtitle">{{ _("next") }}</p>
       <p class="prev-next-title">{{ next_title or next.title }}</p>
   </div>
-  <i class="fas fa-angle-right"></i>
+  <i class="fa-solid fa-angle-right"></i>
   </a>
   {%- endif %}
 </div>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html

@@ -28,10 +28,10 @@
 
       <ul id="navbar-icon-links" class="navbar-nav" aria-label="{{ _(theme_icon_links_label) }}">
         {%- block icon_link_shortcuts -%}
-        {{ icon_link_nav_item(theme_github_url, "fab fa-github-square", "GitHub", "fontawesome") -}}
-        {{ icon_link_nav_item(theme_gitlab_url, "fab fa-gitlab", "GitLab", "fontawesome") -}}
-        {{ icon_link_nav_item(theme_bitbucket_url, "fab fa-bitbucket", "Bitbucket", "fontawesome") -}}
-        {{ icon_link_nav_item(theme_twitter_url, "fab fa-twitter-square", "Twitter", "fontawesome") -}}
+        {{ icon_link_nav_item(theme_github_url, "fa-brands fa-square-github", "GitHub", "fontawesome") -}}
+        {{ icon_link_nav_item(theme_gitlab_url, "fa-brands fa-square-gitlab", "GitLab", "fontawesome") -}}
+        {{ icon_link_nav_item(theme_bitbucket_url, "fa-brands fa-bitbucket", "Bitbucket", "fontawesome") -}}
+        {{ icon_link_nav_item(theme_twitter_url, "fa-brands fa-square-twitter", "Twitter", "fontawesome") -}}
         {% endblock -%}
         {%- for icon_link in theme_icon_links -%}
         {{ icon_link_nav_item(icon_link["url"], icon_link["icon"], icon_link["name"], icon_link.get("type", "fontawesome"), icon_link.get("attributes", {})) -}}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html

@@ -2,7 +2,7 @@
 
 {%- if page_toc | length >= 1 %}
 <div class="tocsection onthispage">
-    <i class="fas fa-list"></i> {{ _("On this page") }}
+    <i class="fa-solid fa-list"></i> {{ _("On this page") }}
 </div>
 <nav id="bd-toc-nav" class="page-toc">
     {{ page_toc }}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html

@@ -1,4 +1,4 @@
 {# A button that, when clicked, will trigger a search popup overlay #}
 <button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" data-toggle="tooltip">
-  <i class="fas fa-search"></i>
+  <i class="fa-solid fa-magnifying-glass"></i>
 </button>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-field.html

@@ -1,6 +1,6 @@
 {# A bootstrap-styled field that will direct to the `search.html` page when submitted #}
 <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-  <i class="icon fas fa-search"></i>
+  <i class="fa-solid fa-magnifying-glass"></i>
   <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ _(theme_search_bar_text) }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
   <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
 </form>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sourcelink.html

@@ -1,7 +1,7 @@
 {% if show_source and has_source and sourcename %}
 <div class="tocsection sourcelink">
     <a href="{{ pathto('_sources/' + sourcename, true)|e }}">
-        <i class="fas fa-file-alt"></i> {{ _("Show Source") }}
+        <i class="fa-solid fa-file-lines"></i> {{ _("Show Source") }}
     </a>
 </div>
 {% endif %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -1,5 +1,5 @@
 <span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="{{ _('light/dark') }}" data-toggle="tooltip">
-    <a class="theme-switch" data-mode="light"><i class="fas fa-sun"></i></a>
-    <a class="theme-switch" data-mode="dark"><i class="far fa-moon"></i></a>
-    <a class="theme-switch" data-mode="auto"><i class="fas fa-adjust"></i></a>
+    <a class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></a>
+    <a class="theme-switch" data-mode="dark"><i class="fa-regular fa-moon"></i></a>
+    <a class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></a>
 </span>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html

@@ -1,6 +1,6 @@
 <div class="bd-header__inner bd-page-width">
   <label class="sidebar-toggle primary-toggle" for="__primary">
-      <span class="fas fa-bars"></span>
+      <span class="fa-solid fa-bars"></span>
   </label>
   <div id="navbar-start">
     {% for navbar_item in theme_navbar_start %}
@@ -38,7 +38,7 @@
 
   {% if not remove_sidebar_secondary %}
   <label class="sidebar-toggle secondary-toggle" for="__secondary">
-      <span class="fas fa-outdent"></span>
+      <span class="fa-solid fa-outdent"></span>
   </label>
   {% endif %}
 

tests/test_build/navbar_theme.html

@@ -1,14 +1,14 @@
 <span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" data-toggle="tooltip" title="light/dark">
  <a class="theme-switch" data-mode="light">
-  <i class="fas fa-sun">
+  <i class="fa-solid fa-sun">
   </i>
  </a>
  <a class="theme-switch" data-mode="dark">
-  <i class="far fa-moon">
+  <i class="fa-regular fa-moon">
   </i>
  </a>
  <a class="theme-switch" data-mode="auto">
-  <i class="fas fa-adjust">
+  <i class="fa-solid fa-circle-half-stroke">
   </i>
  </a>
 </span>

tests/test_build/sidebar_subpage.html

@@ -30,15 +30,15 @@
    <div class="navbar-end-item">
     <span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" data-toggle="tooltip" title="light/dark">
      <a class="theme-switch" data-mode="light">
-      <i class="fas fa-sun">
+      <i class="fa-solid fa-sun">
       </i>
      </a>
      <a class="theme-switch" data-mode="dark">
-      <i class="far fa-moon">
+      <i class="fa-regular fa-moon">
       </i>
      </a>
      <a class="theme-switch" data-mode="auto">
-      <i class="fas fa-adjust">
+      <i class="fa-solid fa-circle-half-stroke">
       </i>
      </a>
     </span>

tests/test_build/test_sidebars_captions.html

@@ -15,7 +15,7 @@
     </a>
     <input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
      <label class="toctree-toggle" for="toctree-checkbox-1">
-      <i class="fas fa-chevron-down">
+      <i class="fa-solid fa-chevron-down">
       </i>
      </label>
      <ul>

tests/test_build/test_sidebars_nested_page.html

@@ -15,7 +15,7 @@
     </a>
     <input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
      <label class="toctree-toggle" for="toctree-checkbox-1">
-      <i class="fas fa-chevron-down">
+      <i class="fa-solid fa-chevron-down">
       </i>
      </label>
      <ul class="current">

webpack.config.js

@@ -75,6 +75,10 @@ function macroTemplate({ compilation }) {
         href="{{ pathto('_static/vendor/fontawesome/${
           vendorVersions.fontAwesome
         }/webfonts/fa-brands-400.woff2', 1) }}">
+      <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="{{ pathto('_static/vendor/fontawesome/${
+          vendorVersions.fontAwesome
+        }/webfonts/fa-regular-400.woff2', 1) }}">
     {% endmacro %}
 
     {% macro head_pre_assets() %}