/
icons.html
68 lines (63 loc) · 7.96 KB
/
icons.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<title>Icons</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- <script src="FaviconAwesome.js"></script> -->
<script>
// var strDataURI1 = "data:image/svg+xml;base64,Cgk8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KCgkJPGRlZnM+CgkJCTxnIGlkPSJiYWNrZ3JvdW5kIj4KPHBhdGggZmlsbD0idXJsKCNiYWNrZ3JvdW5kLWdyYWRpZW50KSIgc3Ryb2tlPSJub25lIiBkPSIgTSA5MC43NSAyMy4wNSBRIDg5LjUgMjMuMDUgODguODUgMjQuMTUgODguMTUgMjUuMjUgODguODUgMjYuMzUgOTcuMjUgNDAuMiA5NS4xNSA1Ni4xNSA5My4wNSA3MS42NSA4MS43NSA4Mi42IDcwLjM1IDkzLjcgNTQuOSA5NS4yNSAzMi45NSA5Ny41NSAxNy42IDgxLjg1IDIuMiA2Ni4yIDQuODUgNDQuMiA2LjYgMzAuMiAxNi4xNSAxOS43IDI1LjY1IDkuMSAzOS4yNSA1LjggNTAuNTUgMyA2MS43IDUuOTUgNjIuODUgNi4zIDYzLjcgNS42NSA2NC42IDUgNjQuNiAzLjg1IDY0LjYgMi4yNSA2Mi45NSAxLjcgNTIuNTUgLTEuMSA0MS42IDAuNjUgMjUuNTUgMy4zIDE0LjQgMTQuODUgMy4xIDI2LjI1IDAuNjUgNDIuNCAtMi45NSA2Ni45IDE0IDg0LjUgMzAuODUgMTAyLjEgNTUuMiA5OS43IDcyLjYgOTcuOSA4NS4yIDg1LjQgOTcuOTUgNzIuOCA5OS43IDU1LjM1IDEwMS40NSAzOC41NSA5Mi43NSAyNC4wNSA5Mi4wNSAyMy4wNSA5MC43NSAyMy4wNSBaIi8+CjwvZz48bWFzayBpZD0ibWFzayI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iIE0gODIuMiA4Mi4xNSBRIDk1LjUgNjguODUgOTUuNSA0OS45NSA5NS41IDMxLjEgODIuMiAxNy44IDY4Ljg1IDQuNSA1MCA0LjUgMzEuMTUgNC41IDE3LjggMTcuOCA0LjUgMzEuMSA0LjUgNDkuOTUgNC41IDY4Ljg1IDE3LjggODIuMTUgMzEuMTUgOTUuNDUgNTAgOTUuNDUgNjguODUgOTUuNDUgODIuMiA4Mi4xNSBaIi8+CjwvbWFzaz4KCQkJCgk8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQtZ3JhZGllbnQiIHgxPSIwIiB5MT0iMCIgeTI9IjEiIHgyPSIwIiA+CgkJPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgb2Zmc2V0PSIwJSIvPgoJCTxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMTAwJSIvPgoJPC9saW5lYXJHcmFkaWVudD4KCgkJCQoJCQkKCQkJPGcgdHJhbnNmb3JtPSJzY2FsZSgxLjIwNTEwOTcyNzAyODAwOTYpIHRyYW5zbGF0ZSgtOS4wMjcwMDQyNDE5NDMzNiAtOSkiIGlkPSJwaWN0dXJlIj48cGF0aCBkPSJNNTAuNTI1IDlDMjcuNjkgOSA5LjA4NSAyNy42MDIgOS4wNSA1MC40N2MtLjAxNiAxMS4yOSA0LjQzNyAyMi4yMzUgMTIuMjIgMzAuMDMgNy4zOTMgNy40MDQgMTcuMjE0IDExLjQ4IDI3LjY1NiAxMS40OC41NTcgMCAxLjExOC0uMDEgMS42ODItLjAzM0M3My44MTggOTAuOTk1IDkyIDcyLjc3NyA5MiA1MC40NzQgOTIgMjcuNjA0IDczLjM5NSA5IDUwLjUyNSA5em0wIDRjOS4xMDcgMCAxNy40NjQgMy4yNjggMjMuOTY1IDguNjlMMjEuNjM3IDc0Ljk0Yy01LjUwNS02Ljc2Ni04LjYtMTUuNDktOC41ODctMjQuNDYzQzEzLjA4MiAyOS44MTIgMjkuODkzIDEzIDUwLjUyNSAxM3ptLS4wODIgNzQuOTVjLTkuODcyLjQxLTE5LjE0LTMuMTk4LTI2LjEwNy0xMC4wNTJMNzcuNDIgMjQuNDE2QzgzLjk2IDMxLjE2NiA4OCA0MC4zNTQgODggNTAuNDc0YzAgMjAuMTUtMTYuNDk3IDM2LjYxMi0zNy41NTcgMzcuNDc2eiIvPjwvZz4KCQkJCgk8bGluZWFyR3JhZGllbnQgaWQ9InBpY3R1cmUtZ3JhZGllbnQiIHgxPSIwIiB5MT0iMCIgeTI9IjEiIHgyPSIwIiA+CgkJPHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDAwMCIgb2Zmc2V0PSIxMDAlIi8+CgkJPHN0b3Agc3RvcC1jb2xvcj0iIzAwMCIgb2Zmc2V0PSIwJSIvPgoJPC9saW5lYXJHcmFkaWVudD4KCgkJPC9kZWZzPgoKCQkKCgkJCTx1c2UgeGxpbms6aHJlZj0iI2JhY2tncm91bmQiIGZpbGw9InVybCgjYmFja2dyb3VuZC1ncmFkaWVudCkiIC8+CgoJCQoKCQkJPGcgbWFzaz0idXJsKCNtYXNrKSI+CgkJCQk8ZyB0cmFuc2Zvcm09IgoJCQkJICAgICAgICB0cmFuc2xhdGUoCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNTAgNTAKKQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNsYXRlKDAgMCkgIHNjYWxlKDAuNzc1MDAwMDAwMDAwMDAwMikgIHNjYWxlKDEgLTEpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0cmFuc2xhdGUoCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgLTUwIC01MAopIj4KCQkJCQkJPHVzZSB4bGluazpocmVmPSIjcGljdHVyZSIgZmlsbD0idXJsKCNwaWN0dXJlLWdyYWRpZW50KSIgIC8+CgkJCQk8L2c+CgkJCTwvZz4KCgkJCgoKCTwvc3ZnPgo="
// var strDataURI2 = "data:image/svg+xml;base64,Cgk8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KCgkJPGRlZnM+CgkJCTxnIGlkPSJiYWNrZ3JvdW5kIj4KPHBhdGggZmlsbD0idXJsKCNiYWNrZ3JvdW5kLWdyYWRpZW50KSIgc3Ryb2tlPSJub25lIiBkPSIgTSA5MC43NSAyMy4wNSBRIDg5LjUgMjMuMDUgODguODUgMjQuMTUgODguMTUgMjUuMjUgODguODUgMjYuMzUgOTcuMjUgNDAuMiA5NS4xNSA1Ni4xNSA5My4wNSA3MS42NSA4MS43NSA4Mi42IDcwLjM1IDkzLjcgNTQuOSA5NS4yNSAzMi45NSA5Ny41NSAxNy42IDgxLjg1IDIuMiA2Ni4yIDQuODUgNDQuMiA2LjYgMzAuMiAxNi4xNSAxOS43IDI1LjY1IDkuMSAzOS4yNSA1LjggNTAuNTUgMyA2MS43IDUuOTUgNjIuODUgNi4zIDYzLjcgNS42NSA2NC42IDUgNjQuNiAzLjg1IDY0LjYgMi4yNSA2Mi45NSAxLjcgNTIuNTUgLTEuMSA0MS42IDAuNjUgMjUuNTUgMy4zIDE0LjQgMTQuODUgMy4xIDI2LjI1IDAuNjUgNDIuNCAtMi45NSA2Ni45IDE0IDg0LjUgMzAuODUgMTAyLjEgNTUuMiA5OS43IDcyLjYgOTcuOSA4NS4yIDg1LjQgOTcuOTUgNzIuOCA5OS43IDU1LjM1IDEwMS40NSAzOC41NSA5Mi43NSAyNC4wNSA5Mi4wNSAyMy4wNSA5MC43NSAyMy4wNSBaIi8+CjwvZz48bWFzayBpZD0ibWFzayI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iIE0gODIuMiA4Mi4xNSBRIDk1LjUgNjguODUgOTUuNSA0OS45NSA5NS41IDMxLjEgODIuMiAxNy44IDY4Ljg1IDQuNSA1MCA0LjUgMzEuMTUgNC41IDE3LjggMTcuOCA0LjUgMzEuMSA0LjUgNDkuOTUgNC41IDY4Ljg1IDE3LjggODIuMTUgMzEuMTUgOTUuNDUgNTAgOTUuNDUgNjguODUgOTUuNDUgODIuMiA4Mi4xNSBaIi8+CjwvbWFzaz4KCQkJCgk8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQtZ3JhZGllbnQiIHgxPSIwIiB5MT0iMCIgeTI9IjEiIHgyPSIwIiA+CgkJPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgb2Zmc2V0PSIxMDAlIi8+CgkJPHN0b3Agc3RvcC1jb2xvcj0iIzAwMCIgb2Zmc2V0PSIwJSIvPgoJPC9saW5lYXJHcmFkaWVudD4KCgkJCQoJCQkKCQkJPGcgdHJhbnNmb3JtPSJzY2FsZSgyLjIzNzU4Njg5MTQ2MTAyMjYpIHRyYW5zbGF0ZSgtNC4xODA0OTcxNjk0OTQ2MjkgLTIuNDM5MDAxMDgzMzc0MDIzNCkiIGlkPSJwaWN0dXJlIj48cGF0aCBkPSJNMjMuODUzIDQuMThjLTEuNjg1LjkxNS0yLjg2NSAyLjEzNy0zLjUxMiAzLjYzNi0uNiAxLjQxLS45IDMuNDAzLS45IDYuMTA4di45MmgtNC4zNTR2OC44aDQuMzU4VjQ3LjEzaDEwLjQ3M1YyMy42NDRoNS44NjV2LTguOGgtNS44NjR2LS43OGMwLTEuNjk1LjM0OC0yLjEyLjM5LTIuMTY3LjIyNi0uMjQyLjc1NC0uMzc1IDEuNDgzLS4zNzUgMS4wNCAwIDIuMTUuMTM2IDMuMjk4LjQxbDEuMzMuMzE4IDEuNTQ1LTcuOTY4LTEuMTItLjM1M2MtNC41NC0xLjQzLTkuNzgtMS40OS0xMi45ODUuMjV6bTEwLjQ5NCA0LjkzMmMtMi40NzctLjQwMy00LjgxMi0uMjQ3LTUuOTcgMS0uNzM3Ljc5LTEuMDk0IDIuMDgtMS4wOTQgMy45NXYzLjQwN2g1Ljg2OHYzLjU1aC01Ljg2M3YyMy40OUgyMi4wNlYyMS4wMmgtNC4zNTZ2LTMuNTVoNC4zNTZ2LTMuNTQ2YzAtMi4zMDUuMjMtNC4wMS42ODgtNS4wNjcuNDE1LS45NiAxLjE4NC0xLjczMyAyLjM1NC0yLjM3QzI3LjQgNS4yNCAzMS4zODggNS4yMiAzNC45MyA2LjExM2wtLjU4MyAzeiIvPjwvZz4KCQkJCgk8bGluZWFyR3JhZGllbnQgaWQ9InBpY3R1cmUtZ3JhZGllbnQiIHgxPSIwIiB5MT0iMCIgeTI9IjEiIHgyPSIwIiA+CgkJPHN0b3Agc3RvcC1jb2xvcj0iIzAwMDBmZiIgb2Zmc2V0PSIxMDAlIi8+CgkJPHN0b3Agc3RvcC1jb2xvcj0iIzAwMCIgb2Zmc2V0PSIwJSIvPgoJPC9saW5lYXJHcmFkaWVudD4KCgkJPC9kZWZzPgoKCQkKCgkJCTx1c2UgeGxpbms6aHJlZj0iI2JhY2tncm91bmQiIGZpbGw9InVybCgjYmFja2dyb3VuZC1ncmFkaWVudCkiIC8+CgoJCQoKCQkJPGcgbWFzaz0idXJsKCNtYXNrKSI+CgkJCQk8ZyB0cmFuc2Zvcm09IgoJCQkJICAgICAgICB0cmFuc2xhdGUoCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNTAgNTAKKQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNsYXRlKDAgMCkgIHNjYWxlKDAuODAwMDAwMDAwMDAwMDAwMykgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNsYXRlKAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC01MCAtNTAKKSI+CgkJCQkJCTx1c2UgeGxpbms6aHJlZj0iI3BpY3R1cmUiIGZpbGw9InVybCgjcGljdHVyZS1ncmFkaWVudCkiICAvPgoJCQkJPC9nPgoJCQk8L2c+CgoJCQoKCgk8L3N2Zz4K"
// var myCanvas = document.getElementById('c');
// var ctx = myCanvas.getContext('2d');
// var img1 = new Image;
// var img2 = new Image;
// img1.onload = function(){
// ctx.drawImage(img1, 0, 0); // Or at whatever offset you like
// ctx.drawImage(img2, 0, 0); // Or at whatever offset you like
// };
// img1.src = strDataURI1;
// img2.src = strDataURI2;
var log = console.log.bind(console)
// log(FaviconAwesome('fa-github', '#000'))
</script>
<style>
span, i {
margin: 50px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<span class="fa-stack fa-1x">
<i class="fa fa-facebook blue fa-stack-1x"></i>
<i class="fa fa-ban red fa-stack-2x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-facebook blue fa-stack-1x"></i>
<i class="fa fa-ban red fa-stack-2x"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-facebook blue fa-stack-1x"></i>
<i class="fa fa-ban red fa-stack-2x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fa fa-facebook blue fa-stack-1x"></i>
<i class="fa fa-ban red fa-stack-2x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-facebook blue fa-stack-1x"></i>
<i class="fa fa-ban red fa-stack-2x"></i>
</span>
<br />
<i class="fa fa-facebook blue fa-1x"></i>
<i class="fa fa-facebook blue fa-2x"></i>
<i class="fa fa-facebook blue fa-3x"></i>
<i class="fa fa-facebook blue fa-4x"></i>
<i class="fa fa-facebook blue fa-5x"></i>
</body>
</html>