-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (93 loc) · 3.82 KB
/
index.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cc-icons</title>
<link href="packages/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/cc-icons.css" rel="stylesheet" />
<style>
.icons {
margin-bottom:40px;
-webkit-column-count:5;
-moz-column-count:5;
column-count:5;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.icons__item,
.icons__item i {
line-height: 2em;
cursor: pointer;
overflow: hidden;
}
.icons__item:hover {
color: #ABB3AC;
}
.icons__item i {
font-size: 2em;
display: inline-block;
text-align: center;
width: 1.2em;
}
.jumbotron {
background-color: #ABB3AC;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>cc-icons</h1>
<p>Yet another cc-icons font.</p>
<p>
<a class="btn btn-default btn-lg" href="https://github.com/openwebicons/cc-icons/archive/gh-pages.zip" role="button">Download</a>
<a class="btn btn-default btn-lg" href="https://github.com/openwebicons/cc-icons" role="button">Fork</a>
</p>
</div>
</div>
<div class="container">
<h2>Icons</h2>
<div class="icons" id="icons">
<div class="icons__item" data-name="by"><i class="cc-icons cc-icons-by"></i> cc-icons-by</div>
<div class="icons__item" data-name="cc"><i class="cc-icons cc-icons-cc"></i> cc-icons-cc</div>
<div class="icons__item" data-name="nc-eu"><i class="cc-icons cc-icons-nc-eu"></i> cc-icons-nc-eu</div>
<div class="icons__item" data-name="nc-jp"><i class="cc-icons cc-icons-nc-jp"></i> cc-icons-nc-jp</div>
<div class="icons__item" data-name="nc"><i class="cc-icons cc-icons-nc"></i> cc-icons-nc</div>
<div class="icons__item" data-name="nd"><i class="cc-icons cc-icons-nd"></i> cc-icons-nd</div>
<div class="icons__item" data-name="pd"><i class="cc-icons cc-icons-pd"></i> cc-icons-pd</div>
<div class="icons__item" data-name="remix"><i class="cc-icons cc-icons-remix"></i> cc-icons-remix</div>
<div class="icons__item" data-name="sa"><i class="cc-icons cc-icons-sa"></i> cc-icons-sa</div>
<div class="icons__item" data-name="sampling-plus"><i class="cc-icons cc-icons-sampling-plus"></i> cc-icons-sampling-plus</div>
<div class="icons__item" data-name="sampling"><i class="cc-icons cc-icons-sampling"></i> cc-icons-sampling</div>
<div class="icons__item" data-name="share"><i class="cc-icons cc-icons-share"></i> cc-icons-share</div>
<div class="icons__item" data-name="zero"><i class="cc-icons cc-icons-zero"></i> cc-icons-zero</div>
</div>
<h2>Usage</h2>
<pre><code><i class="cc-icons cc-icons-<span id="name">name</span>"></i></code></pre>
<h2>Installation</h2>
<p>bower (<a href="http://bower.io/search/?q=cc-icons">bower.io</a>)</p>
<pre><code>$ bower install cc-icons</code></pre>
<p>component</p>
<pre><code>$ component install openwebicons/cc-icons</code></pre>
<p>npm (<a href="https://www.npmjs.org/package/cc-icons">npmjs.org</a>)</p>
<pre><code>$ npm install cc-icons</code></pre>
<p>composer (<a href="https://packagist.org/packages/openwebicons/cc-icons">packagist.org</a>)</p>
<pre><code>$ require openwebicons/cc-icons</code></pre>
<script>
(function() {
document.getElementById('icons').onclick = function(e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
document.getElementById('name2').innerHTML = name;
}
})();
</script>
<hr />
<footer>
<p>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</p>
</footer>
</div>
</body>
</html>