Bootstrap Snippet TEST: Round Labels Initial Avatar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
pre {
  margin: 20px 0;
  padding: 20px;
  background: #fafafa;
}
.round { border-radius: 50%; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
     * 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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: Round Labels Initial Avatar"
Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Round Labels Initial Avatar" Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Round Labels Initial Avatar"
Bootstrap 3.3.0 Snippet by mrmccormack