Simple Text Avatar Plugin with jQuery and CSS

Simple Text Avatar Plugin with jQuery and CSS

Yet another jQuery 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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
});

Change log:

2017-11-22


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

  • Publication date: 22.11.2017
  • Source