From 32930bc06e2a75f05c41948a7e7dff84cc9c9b62 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 6 May 2021 15:51:23 -0700
Subject: [PATCH] Add support for Bootstrap Icons on floating label forms

---
 scss/forms/_floating-labels.scss              | 20 ++++++++++++
 .../content/docs/5.0/forms/floating-labels.md | 31 +++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 8b2e2b8eb6..9154373314 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -59,3 +59,23 @@
   }
   // stylelint-enable no-duplicate-selectors
 }
+
+.form-floating-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem + $form-floating-padding-x;
+
+  ~ label {
+    left: 2.5rem;
+  }
+
+  ~ .form-control,
+  ~ .form-select {
+    padding-left: 2.5rem + $form-floating-padding-x;
+  }
+}
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 9410550898..bc1b58bcb4 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -75,6 +75,37 @@ Other than `.form-control`, floating labels are only available on `.form-select`
 </div>
 {{< /example >}}
 
+## With icons
+
+Add [Bootstrap Icons]({{< param icons >}}) or other SVGs to floating label forms. Depending on your icons and content, you may want to add more utilities or custom styles.
+
+{{< example >}}
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="envelope" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
+  </symbol>
+  <symbol id="key" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+    <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+  </symbol>
+</svg>
+
+<div class="form-floating mb-3">
+  <div class="form-floating-icon">
+    <svg class="bi" width="24" height="24"><use xlink:href="#envelope"/></svg>
+  </div>
+  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+  <label for="floatingInput">Email address</label>
+</div>
+<div class="form-floating">
+  <div class="form-floating-icon">
+    <svg class="bi" width="24" height="24"><use xlink:href="#key"/></svg>
+  </div>
+  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+  <label for="floatingPassword">Password</label>
+</div>
+{{< /example >}}
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.