From f0aa32c121fd9a1bb329c111cafb66b7787eec36 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 30 Sep 2023 14:40:25 +0530 Subject: [PATCH] Icons docs update --- .../Server/Pages/_Host.cshtml | 13 +++--- .../Pages/_Host.cshtml | 2 + docs/docs/03-content/icons.md | 44 ++++++++++++++++++- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml index 1790a78cf..fd2306ffd 100644 --- a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml +++ b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml @@ -21,19 +21,20 @@ + + - - - - + + - + diff --git a/docs/docs/03-content/icons.md b/docs/docs/03-content/icons.md index 163aaf361..c1600be7a 100644 --- 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 `` or `@import` in CSS from CDN. ``` - + ``` ## 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. + +Blazor Bootstrap: Icon Component - Font awesome icons + +```cshtml {} showLineNumbers + + + + + + +``` + ### Colors Blazor Bootstrap: Icon Component - Colors @@ -130,6 +145,31 @@ Inline text ``` [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. + +Blazor Bootstrap: Icon Component - Button with font awesome icon + +```cshtml {} showLineNumbers + + +``` + +### Icon with tooltip + +Blazor Bootstrap: Icon Component - Icon with tooltip + +```cshtml {} showLineNumbers + + + +``` + ### Bootstrap Icons Blazor Bootstrap: Icon Component - Bootstrap Icons