Merge update-checkbox-icon-change-kb-2336 into production (#2339)

* docs(Checkbox): ravamp kb article * docs(Checkbox): apply suggested changes --------- Co-authored-by: Tsvetomir Hristov <[email protected]>
telerik · Aug 12, 2024 · bc19b67 · bc19b67
1 parent 131856c
commit bc19b67
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 50 deletions.
diff --git a/.k-cell-inner b/.k-cell-inner
diff --git a/.k-link b/.k-link
diff --git a/knowledge-base/checkbox-custom-icon.md b/knowledge-base/checkbox-custom-icon.md
@@ -1,8 +1,8 @@
 ---
-title: Change Checkbox Icon
-description: How to change the CheckBox icon to a custom one.
+title: How to Change Checkbox Icons
+description: Learn how to change the Checkbox icon, modify the default check mark and indeterminate icons, and integrate third-party icons.
 type: how-to
-page_title: Custom Checkbox Icon
+page_title: How to Change Checkbox Icons
 slug: checkbox-kb-custom-icon
 position: 
 tags: 
@@ -22,69 +22,69 @@ res_type: kb
 
 ## Description
 
-How do I change the checkbox icon? I want to use another icon, not the default checkmark.
+This knowledge base article answers the following questions:
+
+* How do I change the Checkbox icon?
+* How to change the default check mark icon?
+* How to change the icon of the indeterminate state?
+* How to integrate custom icons from a third-party library into a Telerik Checkbox component?
 
 ## Solution
+1. Set a custom CSS class to the Tooltip through the `Class` parameter. This configuration will allow you to target specific Checkbox instances.
+2. Use the defiend class to [override the theme styles]({%slug themes-override%}) with the following CSS approach.
 
-Add a `Class` to the CheckBox component. [Override the theme styles]({%slug themes-override%}) and change the default font icon glyphs.
+>caption How to change the Checkbox icons
 
-You can replace the icons with different glyphs, even from a different font. You can also change the icon size and color.
+````CSHTML
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
 
-The `k-icon` CSS class applies the custom font, which contains all [built-in Telerik font icons]({%slug common-features-icons%}). If you will use a different font, remove `k-icon`.
+<p>
+    <label>
+        <TelerikCheckBox @bind-Value="@CheckBoxValue"
+                         Size="@ThemeConstants.CheckBox.Size.Large"
+                         Indeterminate="@( !CheckBoxValue.HasValue )"
+                         Class="custom-icons" />
+        Custom CheckBox
+    </label>
 
->caption How to change the checkbox icon
-
-````CSHTML
-<TelerikCheckBox Value="true" Class="k-icon heart-icon" />
-<TelerikCheckBox Value="false" Class="k-icon heart-icon" />
-<TelerikCheckBox Value="false" Indeterminate="true" Class="k-icon heart-icon" />
+    <TelerikButton OnClick="@( () => CheckBoxValue = null )">Make Indeterminate</TelerikButton>
+</p>
 
 <style>
-    /* remove some built-in styles */
-    .heart-icon.k-checkbox,
-    .heart-icon.k-checkbox:focus,
-    .heart-icon.k-checkbox:checked,
-    .heart-icon.k-checkbox:checked:focus {
-        border: none;
-        background: none;
-        box-shadow: none;
+    /* Set the Font Awesome family and weight for custom checkbox icons */
+    .custom-icons.k-checkbox:before {
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
     }
 
-        .heart-icon.k-checkbox::before,
-        .heart-icon.k-checkbox:checked::before,
-        .heart-icon.k-checkbox:indeterminate::before {
-            transform: none;
-            top: 0;
-            left: 0;
-            width: auto;
-            height: auto;
-            font-size: 30px; /* used for dimensions, see the next section */
-        }
-
-    /* set desired dimensions */
-    .heart-icon.k-checkbox {
-        width: 30px;
-        height: 30px;
+    /* Remove the default background image for checked state */
+    .custom-icons.k-checkbox:checked {
+        background-image: none;
     }
 
-        /* change the font icon glyph to a different one - in this case - a heart icon from the Telerik font
-        we also change the colors here to denote states, you can alter this further - like using your own fonts or colors
-        */
-        .heart-icon.k-checkbox:checked::before {
-            content: "\e301";
-            color: #ff6358;
+        /* Set the Font Awesome check mark icon for the checked state */
+        .custom-icons.k-checkbox:checked:before {
+            content: "\f058"; /* Check Circle icon */
         }
 
-        .heart-icon.k-checkbox:indeterminate::before {
-            content: "\e300";
-            color: #ff6358;
-            background: none;
-        }
+    /* Remove the default background image for indeterminate state */
+    .custom-icons.k-checkbox:indeterminate {
+        background-image: none;
+    }
 
-        .heart-icon.k-checkbox::before {
-            content: "\e300";
-            color: #656565;
+        /* Set the Font Awesome question icon for the indeterminate state */
+        .custom-icons.k-checkbox:indeterminate:before {
+            content: "\3f"; /* Question icon */
+            margin-left: 3px;
         }
 </style>
+
+@code {
+    private bool? CheckBoxValue { get; set; }
+}
 ````
 
+## See Also
+* [Built-in Font and SVG Icons]({%slug common-features-icons%})
+* [Checkbox Indeterminate State]({%slug checkbox-indeterminate-state%})
+