JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Avatar Customization in JavaScript Avatar control

23 Mar 2023 / 1 minute to read

Color customization

The avatar comes with default background color (grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS.

Source
Preview
index.html
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
        </div>
    </div>
</body>

</html>

Customize avatar sizes

Even though the avatar comes with five predefined sizes, sometimes it’s not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the font-size of the avatar element, you can change the width and height automatically.

Source
Preview
index.html
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <span class="e-avatar">26px</span>
            <span class="e-avatar">24px</span>
            <span class="e-avatar">22px</span>
            <span class="e-avatar">20px</span>
            <span class="e-avatar">18px</span>
        </div>
    </div>
</body>

</html>

Use various media in avatar

Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. Some of them are given below.

Source
Preview
index.html
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <div class="sample_container avatar-types">
                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle image"></div>
                        </div>
                        <div class="e-card-content">
                            <div>Image</div>
                        </div>
                    </div>
                </div>

                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle">
                                <div class="svg_icons chrome"></div>
                            </div>
                        </div>
                        <div class="e-card-content">
                            <div>SVG</div>
                        </div>
                    </div>
                </div>

                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
                        </div>
                        <div class="e-card-content">
                            <div>Initial</div>
                        </div>
                    </div>
                </div>

                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle">
                                <div class="e-people icons"></div>
                            </div>
                        </div>
                        <div class="e-card-content">
                            <div>FontIcon</div>
                        </div>
                    </div>
                </div>

                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
                        </div>
                        <div class="e-card-content">
                            <div>Word</div>
                        </div>
                    </div>
                </div>

                <div class="avatar-block">
                    <!-- Card Component -->
                    <div class="e-card e-avatar-showcase">
                        <div class="e-card-content">
                            <!-- XLarge Circle Avatar Component -->
                            <div class="e-avatar e-avatar-xlarge e-avatar-circle custom">
                                <div class="e-people icons"></div>
                            </div>
                        </div>
                        <div class="e-card-content">
                            <div>Custom</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Previous
Next