Getting Started with the Avatar
This guide demonstrates how to get up and running with the Kendo UI for jQuery Avatar.
After the completion of this guide, you will achieve the following end result:
<div id="avatar-icon"></div>
<script>
$("#avatar-icon").kendoAvatar({
type: "icon",
icon: "user",
size: "large"
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component.
<div id="avatar-icon"></div>
2. Initialize the Avatar
In this step, you will initialize the Avatar from the <div> element.
<div id="avatar-icon"></div>
<script>
$("#avatar-icon").kendoAvatar();
</script>
3. Apply Configuration and Styling Settings
Here, you will apply configuration settings, such as type and icon and styling settings like size.
<div id="avatar-icon"></div>
<script>
$("#avatar-icon").kendoAvatar({
type: "icon", // Specify the type of the component: icon, image, or text (default).
icon: "user", // Specifies an icon name to be used if the avatar type is set to icon.
size: "large" // The size of the component.
});
</script>