Styling external image

Added new example block with Styling external image with filter
twbs · Oct 3, 2023 · 20a1e8b · 20a1e8b
1 parent 40fcb40
commit 20a1e8b
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/docs/content/_index.md b/docs/content/_index.md
@@ -103,6 +103,18 @@ Copy the Bootstrap Icons SVGs to your directory of choice and reference them lik
   </div>
 </div>
 
+<div class="row my-4">
+  <div class="col-md-4">
+{{< md >}}
+### Styling external image
+The implementation of `filter` properties on the `<img>` element enables dynamic color changes. Users can adjust the image's color using specified filter styles, enhancing visual customization and versatility.
+{{< /md >}}
+  </div>
+  <div class="col-md-8">
+    {{< example >}}<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32" style="filter: invert(24%) sepia(73%) saturate(7469%) hue-rotate(257deg) brightness(94%) contrast(94%);">{{< /example >}}
+  </div>
+</div>
+
 <div class="row my-4">
   <div class="col-md-4">
 {{< md >}}
@@ -113,8 +125,8 @@ Use `font-size` and `color` to change the icon appearance.
 {{< /md >}}
   </div>
   <div class="col-md-8">
-    {{< example >}}<i class="bi-alarm"></i>{{< /example >}}
-    {{< example >}}<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>{{< /example >}}
+    {{<  >}}<i class="bi-alarm"></i>{{< / >}}
+    {{<  >}}<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>{{< / >}}
   </div>
 </div>