4 files changed, 8 insertions, 4 deletions
diff --git a/docs/layouts/partials/home/hero.html b/docs/layouts/partials/home/hero.html
index b9851b853..1f6e5f996 100644
--- a/docs/layouts/partials/home/hero.html
+++ b/docs/layouts/partials/home/hero.html
@@ -1,5 +1,5 @@
 <div class="hero py-5 text-center text-lg-start">
-  <div class="container">
+  <div class="container-xxl bd-gutter">
     <div class="row flex-lg-row-reverse">
       <div class="col-6 mx-auto col-lg-5 mx-lg-0">
         <img srcset="/assets/img/icons-hero.png, /assets/img/icons-hero@2x.png 2x"
@@ -33,6 +33,8 @@
           <span class="px-1">&#8226;</span>
           <a href="#icons">Icons</a>
           <span class="px-1">&#8226;</span>
+          <a href="/font">Icon Font</a>
+          <span class="px-1">&#8226;</span>
           <a href="#install">Install</a>
           <span class="px-1">&#8226;</span>
           <a href="#usage">Usage</a>
diff --git a/docs/layouts/partials/icons.html b/docs/layouts/partials/icons.html
index bab633c79..438d00433 100644
--- a/docs/layouts/partials/icons.html
+++ b/docs/layouts/partials/icons.html
@@ -13,9 +13,13 @@
       <li class="col mb-4"{{ with .Params.tags }} data-tags="{{ delimit . " " }}"{{ end }}{{ with .Params.categories }} data-categories="{{ delimit . " " | lower }}"{{ end }}>
         <a class="d-block text-dark text-decoration-none" href="{{ .RelPermalink }}">
           <div class="p-3 py-4 mb-2 bg-light text-center rounded">
+            {{ if $.IsHome -}}
             <svg class="bi" width="1em" height="1em" fill="currentColor">
               <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
             </svg>
+            {{- else -}}
+            <i class="bi bi-{{ $filename }}"></i>
+            {{- end }}
           </div>
           <div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>
         </a>
diff --git a/docs/layouts/partials/scripts.html b/docs/layouts/partials/scripts.html
index 2edf5b151..059c1f62a 100644
--- a/docs/layouts/partials/scripts.html
+++ b/docs/layouts/partials/scripts.html
@@ -1,7 +1,7 @@
 {{ $bootstrapJs := resources.Get "/js/bootstrap.min.js" }}
 <script src="{{ $bootstrapJs.Permalink | relURL }}"></script>
 
-{{- if .IsHome }}
+{{- if or .IsHome (eq .Page.Layout "font") }}
 <script src="/assets/js/list.min.js"></script>
 <script>
   new List('icons-body', {
diff --git a/docs/layouts/partials/stylesheet.html b/docs/layouts/partials/stylesheet.html
index 49a612f96..f80dad467 100644
--- a/docs/layouts/partials/stylesheet.html
+++ b/docs/layouts/partials/stylesheet.html
@@ -1,6 +1,4 @@
-{{- if eq .Layout "home" -}}
 <link rel="stylesheet" href="/assets/font/bootstrap-icons.css">
-{{- end -}}
 
 {{- $sassOptions := dict "targetPath" "assets/css/docs.css" "precision" 6 -}}
 {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}