Simple Text Avatar Plugin with jQuery and CSS

Yet another jQuery/JavaScript text avatar plugin that creates CSS based avatars from user names for profile pictures.

How to use it:

1. Use data-name attribute to specify the user name you want to display in the text avatar.

<div class="textavatar" data-name="jQuery Script"></div>

2. Include the jQuery javascript library and the jQuery text avatar plugin at the bottom of the document.

<script src="jquery.min.js"></script>
<script src="jquery.textavatar.js"></script>

3. Call the plugin to generate text avatars from elements which have the class that is assigned to "textavatar".

$('.textavatar').textAvatar();

4. The required CSS to style the text avatars.

.textavatar {
display: table;
}
.textavatar abbr {
display: table-cell;
text-align: center;
vertical-align: middle;
font-weight: bold;
line-height: 1em;
padding-left: .1em;
letter-spacing: .1em;
/* Avoid Bootstrap css */
border-bottom: 0 !important;
cursor: default !important;
}
/* Custom styles */
.textavatar {
border-radius: 4px;
background-color: whitesmoke;
color: #535353;
margin-bottom: 6px;
}

5. The option to set the size of the text avatars.

$('.textavatar').textAvatar({
width: 120
});

Changelog:

2019-04-16

• Refactor to es6
• Added vanilla JS version
• Use CSS flexbox

2017-11-22

• CSS update

---

This awesome jQuery plugin is developed by Knovour. For more Advanced Usages, please check the demo page or visit the official website.