Remove intermediate spans

src/pydata_sphinx_theme/assets/styles/base/_base.scss

@@ -7,7 +7,7 @@ body {
   background-color: var(--pst-color-background);
   font-family: var(--pst-font-family-base);
   font-weight: 400;
-  line-height: 1.65;
+  line-height: $line-height-body;
   color: var(--pst-color-text-base);
   min-height: 100vh;
   display: flex;

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

@@ -16,8 +16,11 @@
     border-radius: 0;
     border: none;
     font-size: 1rem;
-    line-height: inherit; // Override Bootstrap, which defines a separate line-height for buttons
-    padding: 0.25rem 0; // Horizontal white space in nav bar between between items is controlled via column gap rule on the container.
+    line-height: $line-height-body; // Override Boostrap, which defines a separate line-height for buttons
+    padding: $navbar-link-padding-y 0; // Horizontal white space in nav bar between items is controlled via column gap rule on the container.
+
+    // Make the navbar icon links have the same size as the navbar text links
+    height: calc(2 * $navbar-link-padding-y + $line-height-body * 1rem);
   }
 }
 

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

@@ -16,8 +16,8 @@ ul.navbar-nav {
       display: flex;
       align-items: center;
       height: 100%;
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
+      padding-top: $navbar-link-padding-y;
+      padding-bottom: $navbar-link-padding-y;
 
       @include link-style-text;
     }

src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

@@ -3,7 +3,7 @@
  */
 
 .theme-switch-button {
-  span {
+  .theme-switch {
     display: none;
 
     &:active {
@@ -18,7 +18,9 @@
 }
 
 @each $mode in auto, light, dark {
-  html[data-mode="#{$mode}"] .theme-switch-button span[data-mode="#{$mode}"] {
+  html[data-mode="#{$mode}"]
+    .theme-switch-button
+    .theme-switch[data-mode="#{$mode}"] {
     display: inline; // inline needed for span height to be calculated using inherited font size and line height
   }
 }

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

@@ -41,3 +41,5 @@ html {
   --pst-font-family-heading: var(--pst-font-family-base-system);
   --pst-font-family-monospace: var(--pst-font-family-monospace-system);
 }
+
+$line-height-body: 1.65;

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

@@ -35,3 +35,5 @@ $admonition-border-radius: 0.25rem;
 // In this theme, some focus rings have rounded corners while others do not.
 // This variable sets the border radius for the rounded focus rings.
 $focus-ring-radius: 0.125rem; // 2px at 100% zoom and 16px base font.
+
+$navbar-link-padding-y: 0.25rem;

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

@@ -13,12 +13,12 @@
           {% set attributeString = attributeString | join(" ") -%}
           <a {{ attributeString }}>
             {%- if type == "fontawesome" -%}
-            <span><i class="{{ icon }} fa-lg" aria-hidden="true"></i></span>
+            <i class="{{ icon }} fa-lg" aria-hidden="true"></i>
             <span class="sr-only">{{ name }}</span>
             {%- elif type == "local" -%}
-            <span><img src="{{ pathto(icon, 1) }}" class="icon-link-image" alt="{{ name }}"/></span>
+            <img src="{{ pathto(icon, 1) }}" class="icon-link-image" alt="{{ name }}"/>
             {%- elif type == "url" -%}
-            <span><img src="{{ icon }}" class="icon-link-image" alt="{{ name }}"/></span>
+            <img src="{{ icon }}" class="icon-link-image" alt="{{ name }}"/>
             {%- else %}
             <span>Incorrectly configured icon link. Type must be `fontawesome`, `url` or `local`.</span>
             {%- endif -%}

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

@@ -3,7 +3,7 @@
 <script>
 document.write(`
   <button class="btn btn-sm pst-navbar-icon search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <span><i class="fa-solid fa-magnifying-glass fa-lg"></i></span>
+    <i class="fa-solid fa-magnifying-glass fa-lg"></i>
   </button>
 `);
 </script>

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

@@ -2,10 +2,10 @@
 {# As the theme switcher will only work when JavaScript is enabled, we add it through JavaScript. #}
 <script>
 document.write(`
-  <button class="btn btn-sm pst-navbar-icon theme-switch-button" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <span class="theme-switch nav-link" data-mode="light"><i class="fa-solid fa-sun fa-lg"></i></span>
-    <span class="theme-switch nav-link" data-mode="dark"><i class="fa-solid fa-moon fa-lg"></i></span>
-    <span class="theme-switch nav-link" data-mode="auto"><i class="fa-solid fa-circle-half-stroke fa-lg"></i></span>
+  <button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
+    <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
+    <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
   </button>
 `);
 </script>