font size enhancements (#380)

* IconSize updates #346
vikramlearning · Sep 30, 2023 · a074849 · a074849
1 parent 30eb31e
commit a074849
Show file tree

Hide file tree

Showing 17 changed files with 132 additions and 23 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.RCL/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Icons/IconDocumentation.razor
@@ -15,23 +15,35 @@
 <SectionHeading Size="HeadingSize.H2" Text="Sizes" PageUrl="@pageUrl" HashTagName="sizes" />
 <Demo Type="typeof(Icon_Demo_02_Sizes)" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Font awesome icons" PageUrl="@pageUrl" HashTagName="font-awesome-icons" />
+<div class="mb-3">
+    In the following example, we used <b>Font Awesome 6.4.2</b> free version icons. For Font Awesome setup, please follow the Font Awesome website.
+</div>
+<Demo Type="typeof(Icon_Demo_03_Font_Awesome_Icons)" />
+
 <SectionHeading Size="HeadingSize.H2" Text="Colors" PageUrl="@pageUrl" HashTagName="colors" />
-<Demo Type="typeof(Icon_Demo_03_Colors)" />
+<Demo Type="typeof(Icon_Demo_04_Colors)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Inline text with icon" PageUrl="@pageUrl" HashTagName="inline-text-with-icon" />
-<Demo Type="typeof(Icon_Demo_04_Inline_Text_With_Icon)" />
+<Demo Type="typeof(Icon_Demo_05_Inline_Text_With_Icon)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Link with icon" PageUrl="@pageUrl" HashTagName="link-with-icon" />
-<Demo Type="typeof(Icon_Demo_05_Link_With_Icon)" />
+<Demo Type="typeof(Icon_Demo_06_A_Link_With_Icon)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Link with custom icon" PageUrl="@pageUrl" HashTagName="link-with-custom-icon" />
-<Demo Type="typeof(Icon_Demo_06_Link_With_Custom_Icon)" />
+<Demo Type="typeof(Icon_Demo_06_B_Link_With_Custom_Icon)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Button with icon and text" PageUrl="@pageUrl" HashTagName="button-with-icon-and-text" />
-<Demo Type="typeof(Icon_Demo_07_Button_With_Icon_And_Text)" />
+<Demo Type="typeof(Icon_Demo_07_A_Button_With_Icon_And_Text)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Button with icon only" PageUrl="@pageUrl" HashTagName="button-with-icon-only" />
-<Demo Type="typeof(Icon_Demo_08_Button_With_Icon_Only)" />
+<Demo Type="typeof(Icon_Demo_07_B_Button_With_Icon_Only)" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Button with font awesome icon" PageUrl="@pageUrl" HashTagName="button-with-font-awesome-icon" />
+<div class="mb-3">
+    In the following example, we used <b>Font Awesome 6.4.2</b> free version icons. For Font Awesome setup, please follow the Font Awesome website.
+</div>
+<Demo Type="typeof(Icon_Demo_07_C_Button_With_Font_Awesome_Icon)" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Icon with tooltip" PageUrl="@pageUrl" HashTagName="icon-with-tooltip" />
 <Demo Type="typeof(Icon_Demo_09_Tooltip)" />
@@ -44,4 +56,4 @@
     private string title = "Blazor Icon Component";
     private string description = "Blazor Bootstrap icon component will display an icon from any icon font.";
     private string imageUrl = "https://i.imgur.com/273TamX.png";
-}
+}
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_01_Examples.razor
@@ -1,4 +1,4 @@
 <Icon Name="IconName.Alarm" />
 <Icon Name="IconName.AlarmFill" />
 <Icon Name="IconName.Window" />
-<Icon Name="IconName.Apple" />
+<Icon Name="IconName.Apple" />
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_03_Font_Awesome_Icons.razor b/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_03_Font_Awesome_Icons.razor
@@ -0,0 +1,6 @@
+<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" />
diff --git a/...RCL/Pages/Icons/Icon_Demo_03_Colors.razor → ...RCL/Pages/Icons/Icon_Demo_04_Colors.razor b/...RCL/Pages/Icons/Icon_Demo_03_Colors.razor → ...RCL/Pages/Icons/Icon_Demo_04_Colors.razor
diff --git a/.../Icon_Demo_04_Inline_Text_With_Icon.razor → .../Icon_Demo_05_Inline_Text_With_Icon.razor b/.../Icon_Demo_04_Inline_Text_With_Icon.razor → .../Icon_Demo_05_Inline_Text_With_Icon.razor
diff --git a/...s/Icons/Icon_Demo_05_Link_With_Icon.razor → ...Icons/Icon_Demo_06_A_Link_With_Icon.razor b/...s/Icons/Icon_Demo_05_Link_With_Icon.razor → ...Icons/Icon_Demo_06_A_Link_With_Icon.razor
diff --git a/.../Icon_Demo_06_Link_With_Custom_Icon.razor → ...con_Demo_06_B_Link_With_Custom_Icon.razor b/.../Icon_Demo_06_Link_With_Custom_Icon.razor → ...con_Demo_06_B_Link_With_Custom_Icon.razor
diff --git a/...n_Demo_07_Button_With_Icon_And_Text.razor → ...Demo_07_A_Button_With_Icon_And_Text.razor b/...n_Demo_07_Button_With_Icon_And_Text.razor → ...Demo_07_A_Button_With_Icon_And_Text.razor
diff --git a/.../Icon_Demo_08_Button_With_Icon_Only.razor → ...con_Demo_07_B_Button_With_Icon_Only.razor b/.../Icon_Demo_08_Button_With_Icon_Only.razor → ...con_Demo_07_B_Button_With_Icon_Only.razor
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_07_C_Button_With_Font_Awesome_Icon.razor b/BlazorBootstrap.Demo.RCL/Pages/Icons/Icon_Demo_07_C_Button_With_Font_Awesome_Icon.razor
@@ -0,0 +1,6 @@
+<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>
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/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
@@ -16,6 +16,8 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
     <link href="css/demo.css" rel="stylesheet" />
     <link href="BlazorBootstrap.Demo.WebAssembly.styles.css" rel="stylesheet" />
+    <!-- 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/blazorbootstrap/Enums/IconSize.cs b/blazorbootstrap/Enums/IconSize.cs
@@ -1,32 +1,42 @@
 namespace BlazorBootstrap;
 
 /// <summary>
-/// Defines the size of an <see cref="Icon" /> element.
+/// Represents the size of an <see cref="Icon" /> element.
 /// </summary>
 public enum IconSize
 {
     /// <summary>
-    /// Default icon size will be applied.
+    /// The default icon size.
     /// </summary>
     None,
 
     /// <summary>
-    /// The icon will be size 2em.
+    /// An extra large icon, 2.5rem in size.
+    /// </summary>
+    x1,
+
+    /// <summary>
+    /// A large icon, 2rem in size.
     /// </summary>
     x2,
 
     /// <summary>
-    /// The icon will be size 3em.
+    /// A medium icon, 1.75rem in size.
     /// </summary>
     x3,
 
     /// <summary>
-    /// The icon will be size 4em.
+    /// A small icon, 1.5rem in size.
     /// </summary>
     x4,
 
     /// <summary>
-    /// The icon will be size 5em.
+    /// A very small icon, 1.25rem in size.
+    /// </summary>
+    x5,
+
+    /// <summary>
+    /// The smallest icon, 1rem in size.
     /// </summary>
-    x5
+    x6
 }
diff --git a/blazorbootstrap/Utilities/BootstrapIconProvider.cs b/blazorbootstrap/Utilities/BootstrapIconProvider.cs
@@ -31,10 +31,12 @@ public string IconSize(IconSize iconSize)
     {
         return iconSize switch
                {
+                   BlazorBootstrap.IconSize.x1 => "fs-1",
                    BlazorBootstrap.IconSize.x2 => "fs-2",
                    BlazorBootstrap.IconSize.x3 => "fs-3",
                    BlazorBootstrap.IconSize.x4 => "fs-4",
                    BlazorBootstrap.IconSize.x5 => "fs-5",
+                   BlazorBootstrap.IconSize.x6 => "fs-6",
                    _ => null
                };
     }

diff --git a/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md b/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md
@@ -0,0 +1,28 @@
+---
+title: Blazor Bootstrap v1.10.3
+authors:
+  name: Vikram Reddy
+  title: Creator
+  url: https://github.com/gvreddy04
+  image_url: https://avatars.githubusercontent.com/u/2337067
+tags: [v1.10.3, blazor, bootstrap, bootstrap5, blazorbootstrap, dropdown, blazordropdown, icon, blazoricon, docs]
+---
+
+We are excited to release 1.10.3 with enhancements to dropdown, icons, and others!!!
+
+![image](https://i.imgur.com/HkqLwlx.png "Blazor Bootstrap: Dropdown Component")
+
+<!--truncate-->
+
+## What's changed
+
+- `Dropdown` component
+  - Add feature to disable Dropdown [#373](https://github.com/vikramlearning/blazorbootstrap/issues/352)
+
+- `Icon` component
+  - Sizing for icons in buttons is strange [#346](https://github.com/vikramlearning/blazorbootstrap/issues/346)
+
+## Links
+- [Demo Website - Blazor Server](https://demos.blazorbootstrap.com/)
+- [Demo Website - Blazor WebAssembly](https://demos.getblazorbootstrap.com/)
+- [Blazor Chart Components Documentation](https://getblazorbootstrap.com/docs/components/charts)
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" />