Simple Text Avatar Plugin with jQuery and CSS

File Size: 8.07 KB
Views Total: 4550
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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".


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.

width: 120



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


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