From dd21290e1eec9bb45bfb420fc2d8f35ba610035d Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Thu, 11 Jan 2024 21:08:05 +0200
Subject: [PATCH 1/2] Add code snippets for usage via CSS variables

---
 docs/layouts/icons/single.html | 45 ++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
index 0d791da886..dbc515f922 100644
--- a/docs/layouts/icons/single.html
+++ b/docs/layouts/icons/single.html
@@ -110,14 +110,6 @@ <h2 class="fs-3">Download</h2>
           <p>Download the SVG to use or edit.</p>
           <a href="{{ $svgPath }}" class="btn btn-bd-primary mb-4" download>Download SVG</a>
 
-          <h2 class="fs-3">Icon font</h2>
-          <p>Using the web font? Copy, paste, and go.</p>
-
-          <div class="mb-4">
-            {{ $iconFontSnippet := printf `<i class="bi bi-%s"></i>` .File.TranslationBaseName -}}
-            {{- highlight $iconFontSnippet "html" "" }}
-          </div>
-
           <h2 class="fs-3">Code point</h2>
           <div class="mb-4">
             {{ $codepoints := getJSON "font/bootstrap-icons.json" -}}
@@ -138,6 +130,43 @@ <h2 class="fs-3">Code point</h2>
             </ul>
           </div>
 
+          <h2 class="fs-3">Icon font</h2>
+          <p>Using the web font? Copy, paste, and go.</p>
+
+          <div class="mb-4">
+            {{ $iconFontSnippet := printf `<i class="bi bi-%s"></i>` .File.TranslationBaseName -}}
+            {{- highlight $iconFontSnippet "html" "" }}
+          </div>
+
+          <p>Don’t want or can’t modify HTML? No problem, you can also use CSS variables! Define via:</p>
+
+          {{ $iconCSSDefSnippet := printf `--bi-%s: "\%s";` .File.TranslationBaseName $hexCodepoint -}}
+          {{- highlight $iconCSSDefSnippet "css" "" }}
+
+          <p><small class="text-body-secondary">
+            <i class="bi bi-lightbulb"></i>
+            <strong>Tip:</strong> Use on <code>:root</code> to make available on the whole page.
+          </small></p>
+
+          <p>Then apply like:</p>
+
+          {{ $iconCSSUseSnippet := printf `content: var(--bi-%s);` .File.TranslationBaseName -}}
+          {{- highlight $iconCSSUseSnippet "css" "" }}
+
+          <details class="mb-4">
+            <summary>See Example</summary>
+            {{ $iconCSSExampleSnippet := printf `:root {
+  %s
+}
+
+.card > footer > a::after {
+  %s
+  font-family: bootstrap-icons;
+}` $iconCSSDefSnippet $iconCSSUseSnippet -}}
+            {{- highlight $iconCSSExampleSnippet "css" "" }}
+          </details>
+
+
           <h2 class="fs-3">Copy HTML</h2>
           <p>Paste the SVG right into your project's code.</p>
 

From f531217292a61a754aa62db7d70e366e4fd6f1b5 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 12 Jan 2024 07:41:58 +0200
Subject: [PATCH 2/2] Update single.html

---
 docs/layouts/icons/single.html | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
index dbc515f922..80c3488dcb 100644
--- a/docs/layouts/icons/single.html
+++ b/docs/layouts/icons/single.html
@@ -143,10 +143,12 @@ <h2 class="fs-3">Icon font</h2>
           {{ $iconCSSDefSnippet := printf `--bi-%s: "\%s";` .File.TranslationBaseName $hexCodepoint -}}
           {{- highlight $iconCSSDefSnippet "css" "" }}
 
-          <p><small class="text-body-secondary">
-            <i class="bi bi-lightbulb"></i>
-            <strong>Tip:</strong> Use on <code>:root</code> to make available on the whole page.
-          </small></p>
+          <p>
+            <small class="text-body-secondary">
+              <i class="bi bi-lightbulb"></i>
+              <strong>Tip:</strong> Use on <code>:root</code> to make available on the whole page.
+            </small>
+          </p>
 
           <p>Then apply like:</p>
 
@@ -166,7 +168,6 @@ <h2 class="fs-3">Icon font</h2>
             {{- highlight $iconCSSExampleSnippet "css" "" }}
           </details>
 
-
           <h2 class="fs-3">Copy HTML</h2>
           <p>Paste the SVG right into your project's code.</p>