New to Kendo UI for jQuery? Download free 30-day trial

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>

Next Steps

See Also

In this article