jQuery Text Avatars Using CSS Like Gmail

Today, We want to share with you jQuery Text Avatars Using CSS Like Gmail.In this post we will show you jQuery Plugin To Create Text Avatars From User Names, hear for jQuery Plugin To Create Text Avatars From User Names – Avatarme we will give you demo and example for implement.In this post, we will learn about jQuery Profile Icon Text Avatars Using CSS Like Gmail with an example.

jQuery Text Avatars Using CSS Like Gmail

There are the Following The simple About jQuery Text Avatars Using CSS Like Gmail Full Information With Example and source code.

As I will cover this Post with live Working example to develop Simple Text Avatar Plugin with jQuery and CSS, so the Canvas-based Letter Avatar Plugin For jQuery for this example is following below.

Google Style Text Avatars using jQuery Example


    <title>How do i set profile image as first letters of first and last name?</title>
    


<h2>generate avatar from name</h2>
<p>Create Default Profile Image Dynamically From First And Last Name In jQuery</p>
<span id="userfname">Jaydeep</span>
<span id="userlname">Gondaliya</span>
<div id="profileAvtar"></div>
<a href="https://www.pakainfo.com/" target="_blank" title="pakainfo">Free Download Example - Pakainfo.com</a>


$(document).ready(function(){
  var userfname = $('#userfname').text();
  var userlname = $('#userlname').text();
  var intials = $('#userfname').text().charAt(0) + $('#userlname').text().charAt(0);
  var profileAvtar = $('#profileAvtar').text(intials);
});


#profileAvtar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #c60000;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 100px;
  margin: 20px 0;
}

Example 2 : CSS place in circle first letter of the name

<p> Gondaliya Jaydeep</p>
<a href="https://www.pakainfo.com/" target="_blank" title="pakainfo">Free Download Example - Pakainfo.com</a>

[data-letters]:before {
  background:red;
  border-radius:50%;
  color:white;
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  height:2.5em;
  line-height:2.5em;
  margin-right:1em;
  text-align:center;
  vertical-align:middle;
  width:2.5em;
  }

Angular 6 CRUD Operations Application Tutorials

Read :

Related search: Create Default Profile Image Dynamically From First And Last Name In PHP,User Profile Icon From Name Using CSS Like Gmail,How to get name initials as an image using jquery,jQuery Plugin To Create Text Avatars From User Names,Canvas-based Letter Avatar Plugin For jQuery,Simple Text Avatar Plugin with jQuery and CSS,Create Gmail Like Text Avatars with jQuery,jQuery Plugin To Generate Text Avatars – Name Badges, jQuery Plugin To Create Text Avatars From User Names – Avatarme, Google Style Text Avatars using PHP Example ,jQuery text avatar

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Text Avatars Using CSS Like Gmail.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article: