Customization
The Chip component provides options for customizing its look and feel.
Custom Icons
The Chip already implements a large set of icons by default (see List of Font Icons), but you can supply your own icons if you want. You can create the icons or use 3rd party Icon libraries such as Font Awesome.
Create your custom icon CSS class
Telerik Assemblies load an icon font that contains a large set of icons. To use these icons, you will need to create CSS classes that point to the icon by their Unicode.
To create an icon class with the icons from the Telerik embedded fonts, you will need to:
- Create a Custom CSS class and set the
font-size,font-familyproperties. - Set the
contentproperty of the::beforepseudo selector to the icon's Unicode. For the sake of demonstration, we used theaccessibilityicon from the WebComponentsIcons library (List of Font Icons). - Point the
IconClassproperty of the Chip component to the newly created CSS icon class
Example
<style>
.myCustomIcon {
font-family: "WebComponentsIcons";
font-size: 16px;
}
.myCustomIcon::before {
content: "\e14f";
}
</style>
<telerik:RadChip runat="server" ID="RadChip1" Label="Accessibility" IconClass="myCustomIcon"></telerik:RadChip>
In case you have your own icons, you can import/load the Icon library and use that Font instead.
@font-face {
font-family: "Icon Library Name";
src: url(url_to_the_icon/my-icons.woff);
}
.myCustomIcon {
font-family: "Icon Library Name";
font-size: 16px;
}
Using 3rd party Icon Library
If you do have your own icons, you can use 3rd part libraries, such as Font Awesome.
- Import the library provided by Font Awesome
- Point the
IconClassproperty to the pre-defined CSS classes of the Font Awesome Library
Example
<link href="link-to-font-awesome/all.min.css" rel="stylesheet" />
<telerik:RadChip runat="server" ID="RadChip1" Label="Hippo" Size="Large" IconClass="fa-solid fa-hippo"></telerik:RadChip>
Display Avatars
To display Avatars:
- Create the CSS class with a background image
- Assign the CSS class name to the
AvatarClassproperty
Example
<style>
.christina {
background-image: url("https://demos.telerik.com/aspnet-ajax/Img/Northwind/Customers/Thumbs/BERGS.jpg");
}
</style>
<telerik:RadChip runat="server" ID="RadChip1" Label="Christina" AvatarClass="christina" Size="Large"></telerik:RadChip>
To display an avatar, make sure there is no
Icondefined, otherwise, the icon will be displayed instead.