Radio button icon

1 Answer 90 Views
RadioButtonList
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Omar asked on 08 Dec 2022, 01:41 PM

Hi,

How to change the size of the radio button icon. 

 

When I change the size of the font for the radio button the text size increase but not the icon.

 

Note: its not the radio button list, its the radio button control

 

Many thanks,

Omar

1 Answer, 1 is accepted

Sort by
0
Valentin Dragnev
Telerik team
answered on 13 Dec 2022, 11:22 AM

Hi Omar,

You can see how to increase the size of the font icon of the radio button in the example below:

<style>
    .RadButton.rbButton span.rbIcon:before {
        font-size: 25px;
        margin:0 50%;

    }

    .RadButton .rbText {
        margin-left:15px;
        font-size: 20px;
    }
</style>

<div>
    <telerik:RadButton 
        RenderMode="Lightweight" 
        ID="btnIcon" runat="server" 
        Text="Standard Button With Icon"
        GroupName="GroupName1">
        <Icon PrimaryIconCssClass="rbCart" />
    </telerik:RadButton>
</div>

I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

 

Hope this will help to achieve the desired result.

Regards,
Valentin Dragnev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
RadioButtonList
Asked by
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Valentin Dragnev
Telerik team
Share this question
or