"TEST: Round Labels Initial Avatar"
Bootstrap 4.1.1 Snippet by maccad

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Letter Avatars</h1> <small><strong>Usage:</strong></small> <pre> <code><img width="60" height="60" avatar="Andy Dandy"></code> </pre> <div> <img width="60" height="60" avatar="Andy Dandy"> <img class="round" width="60" height="60" avatar="Rob McCormack"> <img width="30" height="30" avatar="Rob"> <img class="round" width="30" height="30" avatar="Andy"> </div> <div> <img width="60" height="60" avatar="Bernhard Golf"> </div> <div> <img width="60" height="60" avatar="Carsten Muller"> </div> <div> <img width="60" height="60" avatar="Donald Trump"> </div> <div> <img width="60" height="60" avatar="Eva Kunis"> </div> <div> <img width="60" height="60" avatar="Fritz John"> </div> <div> <img width="60" height="60" avatar="George"> </div> <div> <img width="60" height="60" avatar="Howard"> </div> <div> <img width="60" height="60" avatar="Ingrid"> </div> <div> <img width="60" height="60" avatar="John"> </div> <div> <img width="60" height="60" avatar="Kira"> </div> <div> <img width="60" height="60" avatar="Laura"> </div> <div> <img width="60" height="60" avatar="Michael"> </div> <div> <img width="60" height="60" avatar="Nora"> </div> <div> <img width="60" height="60" avatar="Oscar"> </div> <div> <img width="60" height="60" avatar="Peter"> </div> <div> <img width="60" height="60" avatar="Quentin"> </div> <div> <img width="60" height="60" avatar="Richard"> </div> <div> <img width="60" height="60" avatar="Seinfeld"> </div> <div> <img width="60" height="60" avatar="Tina"> </div> <div> <img width="60" height="60" avatar="Ulf"> </div> <div> <img width="60" height="60" avatar="Viktor"> </div> <div> <img width="60" height="60" avatar="Wilfred"> </div> <div> <img width="60" height="60" avatar="Xavier"> </div> <div> <img width="60" height="60" avatar="Yanne"> </div> <div> <img width="60" height="60" avatar="Zonk"> </div> <div> <img width="60" height="60" avatar=""> </div>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } pre { margin: 20px 0; padding: 20px; background: #fafafa; } .round { border-radius: 50%; }
/* * LetterAvatar * * Artur Heinze * Create Letter avatar based on Initials * based on https://gist.github.com/leecrossley/6027780 */ (function(w, d){ function LetterAvatar (name, size) { name = name || ''; size = size || 60; var colours = [ "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d" ], nameSplit = String(name).toUpperCase().split(' '), initials, charIndex, colourIndex, canvas, context, dataURI; if (nameSplit.length == 1) { initials = nameSplit[0] ? nameSplit[0].charAt(0):'?'; } else { initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0); } if (w.devicePixelRatio) { size = (size * w.devicePixelRatio); } charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64; colourIndex = charIndex % 20; canvas = d.createElement('canvas'); canvas.width = size; canvas.height = size; context = canvas.getContext("2d"); context.fillStyle = colours[colourIndex - 1]; context.fillRect (0, 0, canvas.width, canvas.height); context.font = Math.round(canvas.width/2)+"px Arial"; context.textAlign = "center"; context.fillStyle = "#FFF"; context.fillText(initials, size / 2, size / 1.5); dataURI = canvas.toDataURL(); canvas = null; return dataURI; } LetterAvatar.transform = function() { Array.prototype.forEach.call(d.querySelectorAll('img[avatar]'), function(img, name) { name = img.getAttribute('avatar'); img.src = LetterAvatar(name, img.getAttribute('width')); img.removeAttribute('avatar'); img.setAttribute('alt', name); }); }; // AMD support if (typeof define === 'function' && define.amd) { define(function () { return LetterAvatar; }); // CommonJS and Node.js module support. } else if (typeof exports !== 'undefined') { // Support Node.js specific `module.exports` (which can be a function) if (typeof module != 'undefined' && module.exports) { exports = module.exports = LetterAvatar; } // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) exports.LetterAvatar = LetterAvatar; } else { window.LetterAvatar = LetterAvatar; d.addEventListener('DOMContentLoaded', function(event) { LetterAvatar.transform(); }); } })(window, document);

Related: See More


Questions / Comments: