Fontawesome demos update #346

vikramlearning · Sep 26, 2023 · 9347527 · 9347527
1 parent b5d84b9
commit 9347527
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 8 deletions.
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.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>