javascript - Telegram messenger colored box filled with the initials of the contacts -

I am developing a chat website that is similar to telegram (). You can see in the Contact section that the first letter of the contact name has been taken and it is placed in the color box. I am adding this screenshot with this question. I have tried this code, but I failed to implement it. Here's the code that I've written. I am using Bootstrap to do this, I know that I have to add code to the lip tag.

  sortedire = removal duplicate (to be removed) ; Console.log (sortedarray); Sortedarray.sort (); Sort order = sortedray.filter (empty element); For (R = 0; R & lt; sortarde.lamp; R ++) {var contact = $ ('# contact'); Var display = $ ('# display'); Var newcontact = $ ('
 gt; & lt; a href = "#" & gt;' sortedrayray [r] + '& lt; / a & gt; & lt; / li & gt; ); Contact.append (newcontact); }  

You can see in the image below that the drawing of the names are displayed in the colored circle.

  I have resolved Var contact = $ ( '# contact'); Var display = $ ('# display'); Initial = Sortrederere [R] Kslais (0,1) + "+ Sortrdrere [R] Kslais (1,2); var newcontact = $ ( '& lt; / span & gt; & lt; li & gt; & lt; a & gt; '' & lt; div & gt; span class = "peer_initials im_dialog_photo user_bgcolor_8" & gt; & lt '+ Start + + sortedarray [R]' & lt; / a & gt; & lt; / li & gt; & lt; / div & gt; '); contact.append (newcontact);} Div.im_dialog_photo .peer_initials {line-height: 48px; font-size: 18px;} .im_dialog_photo {width: 48px; height : 48px; line-height: 48px; border-radius: 50%; hidden overflow;} {.peer_initials display: block; color: # FFF; text-align: center; text-transform: Aprk C;} {.user_bgcolor_8 background: # fba76f;