If you want to set profile image as first letters of first and last name like gmail? Use first letter of name as profile image in website using jquery and css.
I have assumed that you have access to the first name and last name. Using that, I have written this code which will take the first letter from First name and last name and apply to your profile image.
JavaScript Code
1 2 3 4 5 6 | $(document).ready(function(){ var firstName = $('#firstName').text(); var lastName = $('#lastName').text(); var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0); var profileImage = $('#profileImage').text(intials); }); |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 | #profileImage { width: 150px; height: 150px; border-radius: 50%; background: #512DA8; font-size: 35px; color: #fff; text-align: center; line-height: 150px; margin: 20px 0; } |
HTML Code
1 2 3 4 5 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="firstName">Prem</span> <span id="lastName">Tiwari</span> <div id="profileImage"></div> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
