-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathicons.html
356 lines (326 loc) · 19.9 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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119769091-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-119769091-1");
</script>
<!-- Hotjar Tracking Code for https://cryptofonts.com/ -->
<script>
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function () {
(h.hj.q = h.hj.q || []).push(arguments);
};
h._hjSettings = { hjid: 1835372, hjsv: 6 };
a = o.getElementsByTagName("head")[0];
r = o.createElement("script");
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
</script>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="A crisp webfont icons and svg logos for your favourite cryptocurrencies." />
<meta name="keywords" content="icons, logos, crypto logo, vector icons, svg icons, free icons, icon font, webfont, desktop icons, svg, font awesome, font awesome free, font awesome pro" />
<meta name="author" content="Fabio Monzani" />
<meta name="theme-color" content="#f2f2f2" />
<meta property="og:site_name" content="Cryptofonts" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.cryptofonts.com/img/card.png" />
<meta property="og:url" content="https://cryptofonts.com" />
<meta property="og:title" content="Cryptofonts" />
<meta property="og:description" content="A crisp webfont icons and svg logos for your favourite cryptocurrencies. Featuring 974 icons." />
<title>CryptoFont - Cryptocurrency API icons and webfont</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png" />
<link rel="manifest" href="favicons/site.webmanifest" />
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="favicons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<!-- Facebook Open Graph -->
<meta property="og:site_name" content="CryptoFonts" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.cryptofonts.com/img/card.png" />
<meta property="og:url" content="https://www.cryptofonts.com/" />
<meta property="og:title" content="CryptoFonts" />
<meta property="og:description" content="We create beautiful and crisp cryptocurrency webfonts, icons and SVG " />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@CryptoFonts" />
<meta property="og:url" content="https://www.cryptofonts.com/" />
<meta property="og:title" content="CryptoFonts" />
<meta property="og:description" content="We create beautiful and crisp cryptocurrency webfonts, icons and SVG " />
<meta property="og:image" content="https://www.cryptofonts.com/img/card.png" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css?v=1.0" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.min.css?v=1.0" />
<!-- Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap" rel="stylesheet" />
<!-- Gumroad script -->
<script src="https://gumroad.com/js/gumroad.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="img/logo-squircle.svg" width="36" height="36" class="d-inline-block align-top mr-2" alt="" loading="lazy" />
<strong class="align-text-top">Cryptofonts</strong>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="api.html">
<img class="me-2" src="img/icon-api.svg" width="24" height="24" alt="" />
API</a
>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="icons.html">
<img class="me-2" src="img/icon-icons.svg" width="24" height="24" alt="" />
Icons</a
>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="brands.html">
<img class="me-2" src="img/icon-brands.svg" width="24" height="24" alt="" />
Brand</a
>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="font.html">
<img class="me-2" src="img/icon-webfont.svg" width="20" height="20" alt="" />
Webfont</a
>
</li>
</ul>
</div>
</div>
</nav>
<div class="section-header py-5">
<div class="container pt-5">
<h1>High Quality Cryptocurrencies Icons</h1>
<p class="m-0" id="totalCount">The complete set of _ SVG icons.</p>
<a class="btn btn-primary mt-3" href="https://cryptofonts.gumroad.com/l/cryptoicons">Buy on Gumroad</a>
<a href="https://github.com/monzanifabio/cryptoicons/releases" target="_blank" class="btn btn-outline-primary mt-3 rounded-1">
<svg width="24" height="24" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_106_1760)">
<path
d="M26.9025 9.87245C27.2082 8.88645 27.3062 7.84781 27.1905 6.82202C27.0747 5.79623 26.7477 4.80556 26.23 3.91245C26.1422 3.7604 26.016 3.63414 25.8639 3.54637C25.7118 3.4586 25.5393 3.41241 25.3638 3.41245C24.199 3.41002 23.0498 3.68003 22.008 4.20093C20.9662 4.72183 20.0607 5.47918 19.3638 6.41245H16.3638C15.6669 5.47918 14.7613 4.72183 13.7195 4.20093C12.6777 3.68003 11.5285 3.41002 10.3638 3.41245C10.1882 3.41241 10.0157 3.4586 9.86364 3.54637C9.71158 3.63414 9.58531 3.7604 9.49752 3.91245C8.97983 4.80556 8.6528 5.79623 8.53706 6.82202C8.42131 7.84781 8.51936 8.88645 8.82502 9.87245C8.20718 10.9508 7.87622 12.1697 7.86377 13.4125V14.4125C7.86587 16.1045 8.48011 17.7386 9.59305 19.013C10.706 20.2875 12.2425 21.1162 13.9188 21.3462C13.2345 22.2218 12.8631 23.3012 12.8638 24.4125V25.4125H9.86377C9.06812 25.4125 8.30506 25.0964 7.74245 24.5338C7.17984 23.9712 6.86377 23.2081 6.86377 22.4125C6.86377 21.7558 6.73444 21.1057 6.48317 20.499C6.23189 19.8924 5.8636 19.3412 5.3993 18.8769C4.93501 18.4126 4.38381 18.0443 3.77719 17.7931C3.17056 17.5418 2.52038 17.4125 1.86377 17.4125C1.59855 17.4125 1.3442 17.5178 1.15666 17.7053C0.969126 17.8929 0.86377 18.1472 0.86377 18.4125C0.86377 18.6777 0.969126 18.932 1.15666 19.1196C1.3442 19.3071 1.59855 19.4125 1.86377 19.4125C2.65942 19.4125 3.42248 19.7285 3.98509 20.2911C4.5477 20.8537 4.86377 21.6168 4.86377 22.4125C4.86377 23.7385 5.39055 25.0103 6.32824 25.948C7.26592 26.8857 8.53769 27.4125 9.86377 27.4125H12.8638V29.4125C12.8638 29.6777 12.9691 29.932 13.1567 30.1196C13.3442 30.3071 13.5986 30.4125 13.8638 30.4125C14.129 30.4125 14.3833 30.3071 14.5709 30.1196C14.7584 29.932 14.8638 29.6777 14.8638 29.4125V24.4125C14.8638 23.6168 15.1798 22.8537 15.7424 22.2911C16.3051 21.7285 17.0681 21.4125 17.8638 21.4125C18.6594 21.4125 19.4225 21.7285 19.9851 22.2911C20.5477 22.8537 20.8638 23.6168 20.8638 24.4125V29.4125C20.8638 29.6777 20.9691 29.932 21.1567 30.1196C21.3442 30.3071 21.5986 30.4125 21.8638 30.4125C22.129 30.4125 22.3833 30.3071 22.5709 30.1196C22.7584 29.932 22.8638 29.6777 22.8638 29.4125V24.4125C22.8644 23.3012 22.493 22.2218 21.8088 21.3462C23.4851 21.1162 25.0216 20.2875 26.1345 19.013C27.2474 17.7386 27.8617 16.1045 27.8638 14.4125V13.4125C27.8513 12.1697 27.5204 10.9508 26.9025 9.87245ZM25.8638 14.4125C25.8638 15.7385 25.337 17.0103 24.3993 17.948C23.4616 18.8857 22.1899 19.4125 20.8638 19.4125H14.8638C13.5377 19.4125 12.2659 18.8857 11.3282 17.948C10.3906 17.0103 9.86377 15.7385 9.86377 14.4125V13.4125C9.87603 12.4125 10.1754 11.4371 10.7263 10.6025C10.829 10.4671 10.8955 10.3078 10.9195 10.1396C10.9436 9.97145 10.9244 9.79991 10.8638 9.6412C10.6033 8.96945 10.4779 8.2529 10.4949 7.53261C10.5118 6.81233 10.6707 6.10247 10.9625 5.4437C11.7809 5.53174 12.569 5.80285 13.2684 6.23692C13.9677 6.67099 14.5604 7.25689 15.0025 7.9512C15.0926 8.09208 15.2166 8.20812 15.3631 8.2887C15.5096 8.36928 15.674 8.41183 15.8413 8.41245H19.885C20.0529 8.41246 20.218 8.37021 20.3653 8.2896C20.5125 8.20899 20.6371 8.09262 20.7275 7.9512C21.1696 7.25683 21.7622 6.67088 22.4616 6.2368C23.161 5.80272 23.9491 5.53166 24.7675 5.4437C25.0589 6.10263 25.2174 6.81258 25.2339 7.53286C25.2504 8.25315 25.1246 8.96961 24.8638 9.6412C24.8033 9.7984 24.7831 9.9682 24.8049 10.1352C24.8268 10.3022 24.89 10.4611 24.9888 10.5975C25.5451 11.4321 25.8489 12.4095 25.8638 13.4125V14.4125Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_106_1760">
<rect width="32" height="32" fill="white" transform="translate(0.86377 0.412453)" />
</clipPath>
</defs>
</svg>
Github</a
>
<a href="https://www.figma.com/community/file/1330118466318746218/token-icons-collection-by-cryptofonts" target="_blank" class="btn btn-outline-primary mt-3 rounded-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M184,96a40,40,0,0,0-24-72H88A40,40,0,0,0,64,96a40,40,0,0,0,1.37,65A44,44,0,1,0,136,196V160a40,40,0,1,0,48-64Zm0-32a24,24,0,0,1-24,24H136V40h24A24,24,0,0,1,184,64ZM64,64A24,24,0,0,1,88,40h32V88H88A24,24,0,0,1,64,64Zm24,88a24,24,0,0,1,0-48h32v48H88Zm32,44a28,28,0,1,1-28-28h28Zm40-44a24,24,0,1,1,24-24A24,24,0,0,1,160,152Z"></path></svg>
Figma</a
>
</div>
</div>
<div class="container input-search">
<div class="d-flex justify-content-end align-items-center position-relative">
<input type="text" id="searchTicker" onkeyup="searchTicker()" class="form-control form-control-lg" placeholder="Search icons..." autofocus autocomplete="off" />
<div class="position-absolute me-2 bg-body-secondary px-2 py-1 rounded text-muted">
<span>⌘</span>
<span>K</span>
</div>
</div>
</div>
<section>
<div class="container">
<div id="loading-spinner" class="d-flex justify-content-center mb-5">
<img src="./img/loading-spinner.svg" alt="" />
</div>
<div class="row" id="list"></div>
<div class="row">
<div class="col-12 text-center">
<p class="lead">Can't find what you were looking for?</p>
<a class="btn btn-primary" href="https://forms.gle/b3LQr8JeTJi7SRdQ6" target="_blank">Request a new icon</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row mb-5">
<div class="col-md-3 text-center mb-4">
<img class="opacity-50" src="img/logo.svg" height="60px" />
</div>
<div class="col-md-3 col-12 text-center text-md-start mb-4">
<ul class="footer-list p-0">
<li>Social</li>
<li><a href="https://twitter.com/cryptofonts?lang=en" target="_blank">Twitter</a></li>
<li><a href="https://t.me/cryptofonts" target="_blank">Telegram</a></li>
</ul>
</div>
<div class="col-md-3 col-12 text-center text-md-start mb-4">
<ul class="footer-list p-0">
<li>Legal</li>
<li><a href="license.html">License</a></li>
</ul>
</div>
<div class="col-md-3 col-12 text-center text-md-start mb-4">
<ul class="footer-list p-0">
<li>Developers</li>
<li><a href="https://docs.cryptofonts.com/" target="_blank">Documentation</a></li>
<li><a href="https://github.com/Cryptofonts" target="_blank">Github</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col text-center">
<p class="small opacity-50">Made by <a class="fabiomonzani" href="https://fabiomonzani.com" target="_blank">Fabio Monzani</a> and other people around the world</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<p class="tiny opacity-50">All product and company names are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.</p>
</div>
</div>
</div>
</footer>
<!-- Donate Modal -->
<div class="modal fade" id="donateModalSmall" tabindex="-1" role="dialog" aria-labelledby="donateModalSmall" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title" id="donateModalSmall">Thank you!</h5>
</div>
<div class="modal-body d-flex flex-column align-items-center">
<img class="qrcode mb-2" src="img/eth-address.svg" width="200" />
<h5>cryptofonts.eth</h5>
<kbd id="copyAddress" class="py-2 px-4 text-center">0xFC72...18b6 📋</kbd>
<p id="copyCheck" class="small m-0" hidden><img class="align-middle" src="img/check.svg" alt="" width="12" /> Copied</p>
</div>
</div>
</div>
</div>
<!-- Detail Modal -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered d-flex flex-column justify-content-evenly" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-uppercase" id="modalTitle"></h5>
<button type="button" class="btn p-0" data-bs-dismiss="modal" aria-label="Close">
<img src="img/icon-close.svg" height="30" alt="icon close" />
</button>
</div>
<div class="modal-body d-flex flex-column align-items-center justify-content-center">
<img class="mb-5" id="iconDetail" src="" height="200" />
<a download="" id="iconDownload" href="" class="btn btn-outline-primary" target="_blank">Download SVG</a>
</div>
</div>
<!-- Ads -->
<div class="modal-content">
<div class="modal-body">
<p class="small">
Cryptofonts is free to use, but it still cost money to create all these beautiful icons.<br />
If you enjoy using it and if you think that my work has any value to you, or you like my icons, a small donation would be really appreciated.<br />
This will help to make Cryptofonts even better, create more icons and keep the project going.
</p>
<div class="d-grid">
<a href="" class="btn btn-primary btn-sm mb-2" data-bs-target="#donateModalSmall" data-bs-toggle="modal">Donate</a>
<a class="btn btn-outline-primary btn-sm" href="https://cryptofonts.gumroad.com/l/cryptoicons">Buy on Gumroad</a>
</div>
</div>
</div>
</div>
</div>
<script src="vendors/bootstrap-5.3.1/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// FETCHING DATA FROM JSON FILE
fetch("json/cryptoicons.json")
.then((response) => response.json())
.then((data) => {
var icon = "";
// Get the total number of icons in the JSON
document.getElementById("totalCount").textContent = "The complete set of " + data.length + " SVG icons.";
// ITERATING THROUGH OBJECTS
data.forEach(function (value) {
// CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
icon += '<div id="' + value.ticker + '" class="col-md-2 col-6 text-center expand mb-5" onclick="getDetails(this)">';
icon += '<img loading="lazy" src="img/SVG/' + value.image + '" height="60" alt="' + value.ticker + '">';
icon += '<p class="text-muted mb-0">' + value.name + "</p>";
icon += '<span class="badge badge-outline text-uppercase">' + value.ticker + "</span>";
icon += "</div>";
});
// INSERTING ROWS INTO TABLE
document.getElementById("list").insertAdjacentHTML("beforeend", icon);
// Remove the loading spinner
document.getElementById("loading-spinner").setAttribute("style", "display: none !important");
});
});
function searchTicker() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById("searchTicker");
filter = input.value.toLowerCase();
ul = document.getElementById("list");
li = ul.getElementsByTagName("div");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("p")[0];
b = li[i].getElementsByTagName("span")[0];
if (a.innerHTML.toLowerCase().indexOf(filter) > -1 || b.innerHTML.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function getDetails(ticker) {
let name = ticker.id;
let newSrc = "img/SVG/" + name + ".svg";
console.log(name);
const detailModal = new bootstrap.Modal(document.getElementById("detailModal"));
detailModal.show();
document.getElementById("modalTitle").innerHTML = `<img class="me-2" src="img/SVG/` + name + `.svg" height="16">` + name;
document.getElementById("iconDetail").src = newSrc;
document.getElementById("iconDownload").setAttribute("href", newSrc);
document.getElementById("iconDownload").setAttribute("download", name);
}
const searchBar = document.getElementById("searchTicker");
document.addEventListener("keydown", (event) => {
if (event.metaKey && event.key === "k") {
// Check for CMD+K on Mac, or CTRL+K on Windows
event.preventDefault(); // Prevent the default behavior of the keypress (e.g., open a new tab)
searchBar.focus(); // Bring the input field into focus
}
});
let copyAddress = document.getElementById("copyAddress");
copyAddress.addEventListener("click", function () {
navigator.clipboard.writeText("0xfc72b32f2f7cafca4d5d99c031f4b8f9579c18b6").then(() => {
console.log("Content copied to clipboard");
document.getElementById("copyCheck").hidden = false;
});
});
</script>
</body>
</html>