Icons docs update

vikramlearning · Sep 30, 2023 · f0aa32c · f0aa32c
1 parent 9347527
commit f0aa32c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml
@@ -21,19 +21,20 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
     <link href="css/demo.css" rel="stylesheet" asp-append-version="true" />
     <link href="BlazorBootstrap.Demo.Hosted.Client.styles.css" rel="stylesheet" asp-append-version="true" />
+    <!-- Font Awesome -->
+    <script src="https://kit.fontawesome.com/42379982c2.js" crossorigin="anonymous"></script>
 
-    <script>window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }, ga.l = +new Date, ga("create", "UA-214301343-1", "auto"), ga("set", "anonymizeIp", !0), ga("send", "pageview")</script>
-    <script async src="https://www.google-analytics.com/analytics.js"></script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-214301343-1"></script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-60QGZHW8TG"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() { dataLayer.push(arguments); }
         gtag('js', new Date());
-        gtag('config', 'UA-214301343-1');
+
+        gtag('config', 'G-60QGZHW8TG');
     </script>
 
-    <!-- Micorosft Clarity -->
+    <!-- Microsoft Clarity -->
     <script type="text/javascript">
         (function (c, l, a, r, i, t, y) {
             c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };

diff --git a/BlazorBootstrap.Demo.Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Server/Pages/_Host.cshtml
@@ -20,6 +20,8 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
     <link href="css/demo.css" rel="stylesheet" asp-append-version="true" />
     <link href="BlazorBootstrap.Demo.Server.styles.css" rel="stylesheet" asp-append-version="true" />
+    <!-- Font Awesome -->
+    <script src="https://kit.fontawesome.com/42379982c2.js" crossorigin="anonymous"></script>
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-60QGZHW8TG"></script>

diff --git a/docs/docs/03-content/icons.md b/docs/docs/03-content/icons.md
@@ -18,7 +18,7 @@ Blazor Bootstrap icon component will display an icon from any icon font.
 
 - Include the icon fonts stylesheet in your website `<head>` or `@import` in CSS from CDN.
 ```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet" />
 ```
 
 ## Parameters
@@ -31,7 +31,7 @@ Blazor Bootstrap icon component will display an icon from any icon font.
 | Size | `IconSize` | Gets or sets the icon size. | | `IconSize.None` | 1.0.0 |
 
 :::caution NOTE
-Either `Name` or `CustomIconName` parameter is mandatory.
+Either `Name` or `CustomIconName` parameter is mandatory. For **Font Awesome** setup, please follow the **Font Awesome** website.
 :::
 
 ## Examples
@@ -60,6 +60,21 @@ Either `Name` or `CustomIconName` parameter is mandatory.
 ```
 [See icons with different size demo here.](https://demos.blazorbootstrap.com/icons#sizes)
 
+### Font awesome icons
+
+In the following example, we used **Font Awesome 6.4.2** free version icons. For Font Awesome setup, please follow the Font Awesome website.
+
+<img src="https://i.imgur.com/aUuJE34.png" alt="Blazor Bootstrap: Icon Component - Font awesome icons" />
+
+```cshtml {} showLineNumbers
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x1" />
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x2" />
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x3" />
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x4" />
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x5" />
+<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x6" />
+```
+
 ### Colors
 
 <img src="https://i.imgur.com/pUutAt8.png" alt="Blazor Bootstrap: Icon Component - Colors" />
@@ -130,6 +145,31 @@ Inline text <Icon Name="IconName.Alarm" />
 ```
 [See button with icon only demo here.](https://demos.blazorbootstrap.com/icons#button-with-icon-only)
 
+### Button with font awesome icon
+
+In the following example, we used **Font Awesome 6.4.2** free version icons. For Font Awesome setup, please follow the Font Awesome website.
+
+<img src="https://i.imgur.com/GWppafv.png" alt="Blazor Bootstrap: Icon Component - Button with font awesome icon" />
+
+```cshtml {} showLineNumbers
+<Button Color="ButtonColor.Secondary" TooltipTitle="Compare code">
+    <Icon CustomIconName="fa-solid fa-code-compare"/>
+</Button>
+<Button Color="ButtonColor.Secondary" TooltipTitle="Create pull request">
+    <Icon CustomIconName="fa-solid fa-code-pull-request" />
+</Button>
+```
+
+### Icon with tooltip
+
+<img src="https://i.imgur.com/OwfxRXn.png" alt="Blazor Bootstrap: Icon Component - Icon with tooltip" />
+
+```cshtml {} showLineNumbers
+<Tooltip Title="Info Tooltip" role="button">
+    <Icon Name="IconName.InfoCircleFill"></Icon>
+</Tooltip>
+```
+
 ### Bootstrap Icons
 
 <img src="https://i.imgur.com/8HcjpiK.png" alt="Blazor Bootstrap: Icon Component - Bootstrap Icons" />