Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us

jQuery Text Avatars Using CSS Like Gmail

July 15, 2019 Pakainfo jQuery, JavaScript Leave a comment

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

Contents

  • jQuery Text Avatars Using CSS Like Gmail
    • Google Style Text Avatars using jQuery Example
    • Example 2 CSS place in circle first letter of the name
    • Read
    • Summary
    • Related posts

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

Free Live Chat for Any Issue

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.

Also Read This πŸ‘‰   download csv file in php example

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 :

  • Technology
  • Google Adsense
  • Programming
Also Read This πŸ‘‰   how to fetch image from database in php and display in table?

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.

Pakainfo
Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Also Read This πŸ‘‰   php countdown timer - How To Create a Countdown Timer?

Related posts:

  1. javascript Text Avatar Plugin Like Gmail
  2. Multiple image slider in html source code
  3. jQuery An Animated Scroll To Top Button
  4. jQuery Full screen Navigation Overlay
  5. Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
  6. jQuery Time Range slider Get Value using JavaScript
  7. WordPress Next Previous Article/post using CSS
  8. How To Create Image Hover Overlay Effects?
Canvas-based Letter Avatar Plugin For jQueryCreate Default Profile Image Dynamically From First And Last Name In PHPCreate Gmail Like Text Avatars with jQueryGoogle Style Text Avatars using PHP ExampleHow to get name initials as an image using jqueryjQuery Plugin To Create Text Avatars From User NamesjQuery Plugin To Create Text Avatars From User Names - AvatarmejQuery Plugin To Generate Text Avatars - Name BadgesjQuery text avatarSimple Text Avatar Plugin with jQuery and CSSUser Profile Icon From Name Using CSS Like Gmail

Post navigation

Previous Post:PHP MYSQLi datetime format insert into mysql
Next Post:CodeIgniter JQuery Ajax Request Example

Search

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (58) Ajax (464) AngularJS (377) ASP.NET (61) Bollywood (102) Codeigniter (175) CSS (98) Earn Money (61) Education (56) Entertainment (123) fullform (82) Google Adsense (62) Highcharts (77) Hollywood (103) JavaScript (1356) Jobs (40) jQuery (1422) Laravel (1087) LifeStyle (51) movierulz4 (57) Mysql (1029) Mysqli (890) Node.js (39) php (2117) Programming (2330) Python (96) ReactJS (37) Software (137) Software (83) Stories (94) tamilrockers (98) Tamilrockers kannada (58) Tamilrockers telugu (57) Tech (132) Technology (2378) Tips and Tricks (113) Tools (171) Top10 (393) Trading (69) Trending (63) VueJs (250) Web Technology (95) webtools (176) wordpress (166) World (213)

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here

  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

Β© 2022 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype YouTube Tag Extractor