Ravamp KB article for Checkbox icon change

[Tsvetomir-Hr]

Related to: https://github.com/telerik/blazor/issues/9852

[github-actions]

Hello @Tsvetomir-Hr,

Check the below option if you would like to automatically generate PR to production. The automation uses the branch for the cherry-pick, and then will delete the branch. Please, do not delete it manually.

• create PR to production

[dimodi]

• Most <link> tag attributes seem unnecessary.
• Use proper clickable checkbox labels when possible.
• Place parameters on separate lines when they are more than 2.
• A CheckBox Value parameter with a name of IndeterminateValue is too hello-world.
• Consider () => instead of _ =>. Currently we rarely use discards in the docs.
• Use ThemeConstants instead of hard-coded strings.
• Use FontAwesome icons that are more different than ours. It's not necessary to have the exact same look.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />

<p>
    <label>
        <TelerikCheckBox @bind-Value="@CheckBoxValue"
                         Size="@ThemeConstants.CheckBox.Size.Large"
                         Indeterminate="@( !CheckBoxValue.HasValue )"
                         Class="custom-icons" />
        Custom CheckBox
    </label>

    <TelerikButton OnClick="@( () => CheckBoxValue = null )">Make Indeterminate</TelerikButton>
</p>

<style>
    /* 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;
    }

    /* Remove the default background image for checked state */
    .custom-icons.k-checkbox:checked {
        background-image: none;
    }

        /* Set the Font Awesome check mark icon for the checked state */
        .custom-icons.k-checkbox:checked:before {
            content: "\f058"; /* Check Circle icon */
        }

    /* Remove the default background image for indeterminate state */
    .custom-icons.k-checkbox:indeterminate {
        background-image: none;
    }

        /* 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; }
}

[github-actions]

Here you are the link to your PR to production: 2339