@mc-markets/ui 1.0.79 → 1.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/components/Tabs/TabPane.vue.d.ts +42 -1
  2. package/dist/components/Tabs/TabPane.vue.d.ts.map +1 -1
  3. package/dist/components/Tabs/Tabs.vue.d.ts +49 -1
  4. package/dist/components/Tabs/Tabs.vue.d.ts.map +1 -1
  5. package/dist/components/Tag/Tag.vue.d.ts +12 -1
  6. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  7. package/dist/index.cjs +1 -1
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.mjs +700 -542
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/style.css +1 -1
  12. package/dist/styles/colorfont/iconfont.d.ts +1 -0
  13. package/dist/styles/colorfont/iconfont.d.ts.map +1 -0
  14. package/package.json +1 -1
  15. package/packages/components/Radio/Radio.vue +25 -88
  16. package/packages/components/Tabs/TabPane.vue +72 -12
  17. package/packages/components/Tabs/Tabs.vue +220 -12
  18. package/packages/components/Tag/Tag.vue +70 -1
  19. package/packages/styles/colorfont/demo.css +539 -0
  20. package/packages/styles/colorfont/demo_index.html +214 -0
  21. package/packages/styles/colorfont/iconfont.css +21 -0
  22. package/packages/styles/colorfont/iconfont.js +1 -0
  23. package/packages/styles/colorfont/iconfont.json +16 -0
  24. package/packages/styles/colorfont/iconfont.ttf +0 -0
  25. package/packages/styles/colorfont/iconfont.woff +0 -0
  26. package/packages/styles/colorfont/iconfont.woff2 +0 -0
  27. package/packages/styles/components/checkbox.scss +12 -8
  28. package/packages/styles/components/tabs.scss +73 -5
  29. package/packages/styles/components/tag.scss +39 -0
  30. package/packages/styles/font/demo.css +539 -539
  31. package/packages/styles/font/demo_index.html +2419 -2189
  32. package/packages/styles/font/iconfont.css +403 -363
  33. package/packages/styles/font/iconfont.js +1 -1
  34. package/packages/styles/font/iconfont.json +688 -618
  35. package/packages/styles/font/iconfont.ttf +0 -0
  36. package/packages/styles/font/iconfont.woff +0 -0
  37. package/packages/styles/font/iconfont.woff2 +0 -0
  38. package/packages/styles/index.scss +0 -2
package/packages/styles/font/demo_index.html CHANGED
@@ -1,2189 +1,2419 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8"/>
5
- <title>iconfont Demo</title>
6
- <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
- <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
- <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
- <link rel="stylesheet" href="demo.css">
10
- <link rel="stylesheet" href="iconfont.css">
11
- <script src="iconfont.js"></script>
12
- <!-- jQuery -->
13
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
- <!-- 代码高亮 -->
15
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
- <style>
17
- .main .logo {
18
- margin-top: 0;
19
- height: auto;
20
- }
21
-
22
- .main .logo a {
23
- display: flex;
24
- align-items: center;
25
- }
26
-
27
- .main .logo .sub-title {
28
- margin-left: 0.5em;
29
- font-size: 22px;
30
- color: #fff;
31
- background: linear-gradient(-45deg, #3967FF, #B500FE);
32
- -webkit-background-clip: text;
33
- -webkit-text-fill-color: transparent;
34
- }
35
- </style>
36
- </head>
37
- <body>
38
- <div class="main">
39
- <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
- <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
-
42
- </a></h1>
43
- <div class="nav-tabs">
44
- <ul id="tabs" class="dib-box">
45
- <li class="dib active"><span>Unicode</span></li>
46
- <li class="dib"><span>Font class</span></li>
47
- <li class="dib"><span>Symbol</span></li>
48
- </ul>
49
-
50
- <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=5007157" target="_blank" class="nav-more">查看项目</a>
51
-
52
- </div>
53
- <div class="tab-container">
54
- <div class="content unicode" style="display: block;">
55
- <ul class="icon_lists dib-box">
56
-
57
- <li class="dib">
58
- <span class="icon iconfont">&#xe7df;</span>
59
- <div class="name">withdraw</div>
60
- <div class="code-name">&amp;#xe7df;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon iconfont">&#xe7e7;</span>
65
- <div class="name">deposit</div>
66
- <div class="code-name">&amp;#xe7e7;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon iconfont">&#xe7e9;</span>
71
- <div class="name">switch-camera</div>
72
- <div class="code-name">&amp;#xe7e9;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon iconfont">&#xe7e8;</span>
77
- <div class="name">receipt</div>
78
- <div class="code-name">&amp;#xe7e8;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon iconfont">&#xe7e0;</span>
83
- <div class="name">shield-check</div>
84
- <div class="code-name">&amp;#xe7e0;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon iconfont">&#xe7e1;</span>
89
- <div class="name">id-card</div>
90
- <div class="code-name">&amp;#xe7e1;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon iconfont">&#xe7e2;</span>
95
- <div class="name">user-round</div>
96
- <div class="code-name">&amp;#xe7e2;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon iconfont">&#xe7e3;</span>
101
- <div class="name">log-out</div>
102
- <div class="code-name">&amp;#xe7e3;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon iconfont">&#xe7e4;</span>
107
- <div class="name">arrow-right-left</div>
108
- <div class="code-name">&amp;#xe7e4;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon iconfont">&#xe7e5;</span>
113
- <div class="name">clipboard-minus</div>
114
- <div class="code-name">&amp;#xe7e5;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon iconfont">&#xe7e6;</span>
119
- <div class="name">chart-pie</div>
120
- <div class="code-name">&amp;#xe7e6;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon iconfont">&#xe7de;</span>
125
- <div class="name">receipt-text</div>
126
- <div class="code-name">&amp;#xe7de;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon iconfont">&#xe7dc;</span>
131
- <div class="name">brush-cleaning</div>
132
- <div class="code-name">&amp;#xe7dc;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon iconfont">&#xe7db;</span>
137
- <div class="name">arrow-down-to-line</div>
138
- <div class="code-name">&amp;#xe7db;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon iconfont">&#xe7da;</span>
143
- <div class="name">circle-check-filled</div>
144
- <div class="code-name">&amp;#xe7da;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon iconfont">&#xe7d9;</span>
149
- <div class="name">square-check</div>
150
- <div class="code-name">&amp;#xe7d9;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon iconfont">&#xe7d8;</span>
155
- <div class="name">square-check-empty</div>
156
- <div class="code-name">&amp;#xe7d8;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon iconfont">&#xe7d7;</span>
161
- <div class="name">photosolid</div>
162
- <div class="code-name">&amp;#xe7d7;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon iconfont">&#xe7d6;</span>
167
- <div class="name">customized</div>
168
- <div class="code-name">&amp;#xe7d6;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon iconfont">&#xe7d5;</span>
173
- <div class="name">customize-newspaper</div>
174
- <div class="code-name">&amp;#xe7d5;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon iconfont">&#xe7d4;</span>
179
- <div class="name">bell-ring</div>
180
- <div class="code-name">&amp;#xe7d4;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon iconfont">&#xe7d3;</span>
185
- <div class="name">eye</div>
186
- <div class="code-name">&amp;#xe7d3;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon iconfont">&#xe7c7;</span>
191
- <div class="name">bitcoin-convert</div>
192
- <div class="code-name">&amp;#xe7c7;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon iconfont">&#xe7cd;</span>
197
- <div class="name">ellipsis-vertical</div>
198
- <div class="code-name">&amp;#xe7cd;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon iconfont">&#xe7ce;</span>
203
- <div class="name">circle-help</div>
204
- <div class="code-name">&amp;#xe7ce;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon iconfont">&#xe7cf;</span>
209
- <div class="name">gift</div>
210
- <div class="code-name">&amp;#xe7cf;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon iconfont">&#xe7d0;</span>
215
- <div class="name">circle</div>
216
- <div class="code-name">&amp;#xe7d0;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon iconfont">&#xe7d1;</span>
221
- <div class="name">circle-dollar-sign</div>
222
- <div class="code-name">&amp;#xe7d1;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon iconfont">&#xe7d2;</span>
227
- <div class="name">chrome</div>
228
- <div class="code-name">&amp;#xe7d2;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon iconfont">&#xe7b3;</span>
233
- <div class="name">alarm</div>
234
- <div class="code-name">&amp;#xe7b3;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon iconfont">&#xe7b4;</span>
239
- <div class="name">refresh-cw</div>
240
- <div class="code-name">&amp;#xe7b4;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon iconfont">&#xe7b5;</span>
245
- <div class="name">search</div>
246
- <div class="code-name">&amp;#xe7b5;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon iconfont">&#xe7b6;</span>
251
- <div class="name">alert-circle</div>
252
- <div class="code-name">&amp;#xe7b6;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon iconfont">&#xe7b7;</span>
257
- <div class="name">graph-filled</div>
258
- <div class="code-name">&amp;#xe7b7;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon iconfont">&#xe7b8;</span>
263
- <div class="name">star-filled</div>
264
- <div class="code-name">&amp;#xe7b8;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon iconfont">&#xe7b9;</span>
269
- <div class="name">lucide-x</div>
270
- <div class="code-name">&amp;#xe7b9;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon iconfont">&#xe7ba;</span>
275
- <div class="name">plus</div>
276
- <div class="code-name">&amp;#xe7ba;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon iconfont">&#xe7bb;</span>
281
- <div class="name">map-pin</div>
282
- <div class="code-name">&amp;#xe7bb;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon iconfont">&#xe7bc;</span>
287
- <div class="name">loader-circle</div>
288
- <div class="code-name">&amp;#xe7bc;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon iconfont">&#xe7bd;</span>
293
- <div class="name">image</div>
294
- <div class="code-name">&amp;#xe7bd;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon iconfont">&#xe7be;</span>
299
- <div class="name">lucide-image</div>
300
- <div class="code-name">&amp;#xe7be;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon iconfont">&#xe7bf;</span>
305
- <div class="name">lucide-history</div>
306
- <div class="code-name">&amp;#xe7bf;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon iconfont">&#xe7c0;</span>
311
- <div class="name">key-round</div>
312
- <div class="code-name">&amp;#xe7c0;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon iconfont">&#xe7c1;</span>
317
- <div class="name">copy</div>
318
- <div class="code-name">&amp;#xe7c1;</div>
319
- </li>
320
-
321
- <li class="dib">
322
- <span class="icon iconfont">&#xe7c2;</span>
323
- <div class="name">headset</div>
324
- <div class="code-name">&amp;#xe7c2;</div>
325
- </li>
326
-
327
- <li class="dib">
328
- <span class="icon iconfont">&#xe7c3;</span>
329
- <div class="name">circle-x</div>
330
- <div class="code-name">&amp;#xe7c3;</div>
331
- </li>
332
-
333
- <li class="dib">
334
- <span class="icon iconfont">&#xe7c4;</span>
335
- <div class="name">circle-user</div>
336
- <div class="code-name">&amp;#xe7c4;</div>
337
- </li>
338
-
339
- <li class="dib">
340
- <span class="icon iconfont">&#xe7c5;</span>
341
- <div class="name">globe</div>
342
- <div class="code-name">&amp;#xe7c5;</div>
343
- </li>
344
-
345
- <li class="dib">
346
- <span class="icon iconfont">&#xe7c6;</span>
347
- <div class="name">compass</div>
348
- <div class="code-name">&amp;#xe7c6;</div>
349
- </li>
350
-
351
- <li class="dib">
352
- <span class="icon iconfont">&#xe7c8;</span>
353
- <div class="name">eye-off</div>
354
- <div class="code-name">&amp;#xe7c8;</div>
355
- </li>
356
-
357
- <li class="dib">
358
- <span class="icon iconfont">&#xe7c9;</span>
359
- <div class="name">layout-grid</div>
360
- <div class="code-name">&amp;#xe7c9;</div>
361
- </li>
362
-
363
- <li class="dib">
364
- <span class="icon iconfont">&#xe7ca;</span>
365
- <div class="name">heart-handshake</div>
366
- <div class="code-name">&amp;#xe7ca;</div>
367
- </li>
368
-
369
- <li class="dib">
370
- <span class="icon iconfont">&#xe7cb;</span>
371
- <div class="name">credit-card</div>
372
- <div class="code-name">&amp;#xe7cb;</div>
373
- </li>
374
-
375
- <li class="dib">
376
- <span class="icon iconfont">&#xe7cc;</span>
377
- <div class="name">earth</div>
378
- <div class="code-name">&amp;#xe7cc;</div>
379
- </li>
380
-
381
- <li class="dib">
382
- <span class="icon iconfont">&#xe7a3;</span>
383
- <div class="name">linear-trash</div>
384
- <div class="code-name">&amp;#xe7a3;</div>
385
- </li>
386
-
387
- <li class="dib">
388
- <span class="icon iconfont">&#xe7a4;</span>
389
- <div class="name">icon-kfckfc</div>
390
- <div class="code-name">&amp;#xe7a4;</div>
391
- </li>
392
-
393
- <li class="dib">
394
- <span class="icon iconfont">&#xe7a5;</span>
395
- <div class="name">pig-money</div>
396
- <div class="code-name">&amp;#xe7a5;</div>
397
- </li>
398
-
399
- <li class="dib">
400
- <span class="icon iconfont">&#xe7a6;</span>
401
- <div class="name">wallet-filled</div>
402
- <div class="code-name">&amp;#xe7a6;</div>
403
- </li>
404
-
405
- <li class="dib">
406
- <span class="icon iconfont">&#xe7a7;</span>
407
- <div class="name">star-outline</div>
408
- <div class="code-name">&amp;#xe7a7;</div>
409
- </li>
410
-
411
- <li class="dib">
412
- <span class="icon iconfont">&#xe7a8;</span>
413
- <div class="name">trending-up-down</div>
414
- <div class="code-name">&amp;#xe7a8;</div>
415
- </li>
416
-
417
- <li class="dib">
418
- <span class="icon iconfont">&#xe7a9;</span>
419
- <div class="name">monitor</div>
420
- <div class="code-name">&amp;#xe7a9;</div>
421
- </li>
422
-
423
- <li class="dib">
424
- <span class="icon iconfont">&#xe7aa;</span>
425
- <div class="name">graph-outline</div>
426
- <div class="code-name">&amp;#xe7aa;</div>
427
- </li>
428
-
429
- <li class="dib">
430
- <span class="icon iconfont">&#xe7ab;</span>
431
- <div class="name">home-filled</div>
432
- <div class="code-name">&amp;#xe7ab;</div>
433
- </li>
434
-
435
- <li class="dib">
436
- <span class="icon iconfont">&#xe7ac;</span>
437
- <div class="name">lucidecoins</div>
438
- <div class="code-name">&amp;#xe7ac;</div>
439
- </li>
440
-
441
- <li class="dib">
442
- <span class="icon iconfont">&#xe7ad;</span>
443
- <div class="name">square-pen</div>
444
- <div class="code-name">&amp;#xe7ad;</div>
445
- </li>
446
-
447
- <li class="dib">
448
- <span class="icon iconfont">&#xe7ae;</span>
449
- <div class="name">adjustments-horizontal</div>
450
- <div class="code-name">&amp;#xe7ae;</div>
451
- </li>
452
-
453
- <li class="dib">
454
- <span class="icon iconfont">&#xe7af;</span>
455
- <div class="name">home-outline</div>
456
- <div class="code-name">&amp;#xe7af;</div>
457
- </li>
458
-
459
- <li class="dib">
460
- <span class="icon iconfont">&#xe7b0;</span>
461
- <div class="name">user-cog</div>
462
- <div class="code-name">&amp;#xe7b0;</div>
463
- </li>
464
-
465
- <li class="dib">
466
- <span class="icon iconfont">&#xe7b1;</span>
467
- <div class="name">minus</div>
468
- <div class="code-name">&amp;#xe7b1;</div>
469
- </li>
470
-
471
- <li class="dib">
472
- <span class="icon iconfont">&#xe7b2;</span>
473
- <div class="name">circle-check</div>
474
- <div class="code-name">&amp;#xe7b2;</div>
475
- </li>
476
-
477
- <li class="dib">
478
- <span class="icon iconfont">&#xe7a2;</span>
479
- <div class="name">customize-speakerphone</div>
480
- <div class="code-name">&amp;#xe7a2;</div>
481
- </li>
482
-
483
- <li class="dib">
484
- <span class="icon iconfont">&#xe797;</span>
485
- <div class="name">book-open-text</div>
486
- <div class="code-name">&amp;#xe797;</div>
487
- </li>
488
-
489
- <li class="dib">
490
- <span class="icon iconfont">&#xe798;</span>
491
- <div class="name">bitcoin-convert-filled</div>
492
- <div class="code-name">&amp;#xe798;</div>
493
- </li>
494
-
495
- <li class="dib">
496
- <span class="icon iconfont">&#xe799;</span>
497
- <div class="name">calendar-clock</div>
498
- <div class="code-name">&amp;#xe799;</div>
499
- </li>
500
-
501
- <li class="dib">
502
- <span class="icon iconfont">&#xe79a;</span>
503
- <div class="name">check</div>
504
- <div class="code-name">&amp;#xe79a;</div>
505
- </li>
506
-
507
- <li class="dib">
508
- <span class="icon iconfont">&#xe79b;</span>
509
- <div class="name">repeat-circle</div>
510
- <div class="code-name">&amp;#xe79b;</div>
511
- </li>
512
-
513
- <li class="dib">
514
- <span class="icon iconfont">&#xe79c;</span>
515
- <div class="name">chevron-up</div>
516
- <div class="code-name">&amp;#xe79c;</div>
517
- </li>
518
-
519
- <li class="dib">
520
- <span class="icon iconfont">&#xe790;</span>
521
- <div class="name">customize-safe</div>
522
- <div class="code-name">&amp;#xe790;</div>
523
- </li>
524
-
525
- <li class="dib">
526
- <span class="icon iconfont">&#xe79d;</span>
527
- <div class="name">chevron-right</div>
528
- <div class="code-name">&amp;#xe79d;</div>
529
- </li>
530
-
531
- <li class="dib">
532
- <span class="icon iconfont">&#xe79e;</span>
533
- <div class="name">bitcoin-convert-utline</div>
534
- <div class="code-name">&amp;#xe79e;</div>
535
- </li>
536
-
537
- <li class="dib">
538
- <span class="icon iconfont">&#xe7a0;</span>
539
- <div class="name">arrow-left-right</div>
540
- <div class="code-name">&amp;#xe7a0;</div>
541
- </li>
542
-
543
- <li class="dib">
544
- <span class="icon iconfont">&#xe7a1;</span>
545
- <div class="name">customize</div>
546
- <div class="code-name">&amp;#xe7a1;</div>
547
- </li>
548
-
549
- <li class="dib">
550
- <span class="icon iconfont">&#xe794;</span>
551
- <div class="name">lucide-check</div>
552
- <div class="code-name">&amp;#xe794;</div>
553
- </li>
554
-
555
- <li class="dib">
556
- <span class="icon iconfont">&#xe793;</span>
557
- <div class="name">arrow-down-narrow-wide</div>
558
- <div class="code-name">&amp;#xe793;</div>
559
- </li>
560
-
561
- <li class="dib">
562
- <span class="icon iconfont">&#xe791;</span>
563
- <div class="name">money-send</div>
564
- <div class="code-name">&amp;#xe791;</div>
565
- </li>
566
-
567
- <li class="dib">
568
- <span class="icon iconfont">&#xe792;</span>
569
- <div class="name">chevron-left</div>
570
- <div class="code-name">&amp;#xe792;</div>
571
- </li>
572
-
573
- <li class="dib">
574
- <span class="icon iconfont">&#xe796;</span>
575
- <div class="name">chevron-down</div>
576
- <div class="code-name">&amp;#xe796;</div>
577
- </li>
578
-
579
- </ul>
580
- <div class="article markdown">
581
- <h2 id="unicode-">Unicode 引用</h2>
582
- <hr>
583
-
584
- <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
585
- <ul>
586
- <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
587
- <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
588
- </ul>
589
- <blockquote>
590
- <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
591
- </blockquote>
592
- <p>Unicode 使用步骤如下：</p>
593
- <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
594
- <pre><code class="language-css"
595
- >@font-face {
596
- font-family: 'iconfont';
597
- src: url('iconfont.woff2?t=1757404792101') format('woff2'),
598
- url('iconfont.woff?t=1757404792101') format('woff'),
599
- url('iconfont.ttf?t=1757404792101') format('truetype');
600
- }
601
- </code></pre>
602
- <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
603
- <pre><code class="language-css"
604
- >.iconfont {
605
- font-family: "iconfont" !important;
606
- font-size: 16px;
607
- font-style: normal;
608
- -webkit-font-smoothing: antialiased;
609
- -moz-osx-font-smoothing: grayscale;
610
- }
611
- </code></pre>
612
- <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
613
- <pre>
614
- <code class="language-html"
615
- >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
616
- </code></pre>
617
- <blockquote>
618
- <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
619
- </blockquote>
620
- </div>
621
- </div>
622
- <div class="content font-class">
623
- <ul class="icon_lists dib-box">
624
-
625
- <li class="dib">
626
- <span class="icon iconfont icon-withdraw"></span>
627
- <div class="name">
628
- withdraw
629
- </div>
630
- <div class="code-name">.icon-withdraw
631
- </div>
632
- </li>
633
-
634
- <li class="dib">
635
- <span class="icon iconfont icon-deposit"></span>
636
- <div class="name">
637
- deposit
638
- </div>
639
- <div class="code-name">.icon-deposit
640
- </div>
641
- </li>
642
-
643
- <li class="dib">
644
- <span class="icon iconfont icon-switch-camera"></span>
645
- <div class="name">
646
- switch-camera
647
- </div>
648
- <div class="code-name">.icon-switch-camera
649
- </div>
650
- </li>
651
-
652
- <li class="dib">
653
- <span class="icon iconfont icon-receipt"></span>
654
- <div class="name">
655
- receipt
656
- </div>
657
- <div class="code-name">.icon-receipt
658
- </div>
659
- </li>
660
-
661
- <li class="dib">
662
- <span class="icon iconfont icon-shield-check"></span>
663
- <div class="name">
664
- shield-check
665
- </div>
666
- <div class="code-name">.icon-shield-check
667
- </div>
668
- </li>
669
-
670
- <li class="dib">
671
- <span class="icon iconfont icon-id-card"></span>
672
- <div class="name">
673
- id-card
674
- </div>
675
- <div class="code-name">.icon-id-card
676
- </div>
677
- </li>
678
-
679
- <li class="dib">
680
- <span class="icon iconfont icon-user-round"></span>
681
- <div class="name">
682
- user-round
683
- </div>
684
- <div class="code-name">.icon-user-round
685
- </div>
686
- </li>
687
-
688
- <li class="dib">
689
- <span class="icon iconfont icon-log-out"></span>
690
- <div class="name">
691
- log-out
692
- </div>
693
- <div class="code-name">.icon-log-out
694
- </div>
695
- </li>
696
-
697
- <li class="dib">
698
- <span class="icon iconfont icon-arrow-right-left"></span>
699
- <div class="name">
700
- arrow-right-left
701
- </div>
702
- <div class="code-name">.icon-arrow-right-left
703
- </div>
704
- </li>
705
-
706
- <li class="dib">
707
- <span class="icon iconfont icon-clipboard-minus"></span>
708
- <div class="name">
709
- clipboard-minus
710
- </div>
711
- <div class="code-name">.icon-clipboard-minus
712
- </div>
713
- </li>
714
-
715
- <li class="dib">
716
- <span class="icon iconfont icon-chart-pie"></span>
717
- <div class="name">
718
- chart-pie
719
- </div>
720
- <div class="code-name">.icon-chart-pie
721
- </div>
722
- </li>
723
-
724
- <li class="dib">
725
- <span class="icon iconfont icon-receipt-text"></span>
726
- <div class="name">
727
- receipt-text
728
- </div>
729
- <div class="code-name">.icon-receipt-text
730
- </div>
731
- </li>
732
-
733
- <li class="dib">
734
- <span class="icon iconfont icon-brush-cleaning"></span>
735
- <div class="name">
736
- brush-cleaning
737
- </div>
738
- <div class="code-name">.icon-brush-cleaning
739
- </div>
740
- </li>
741
-
742
- <li class="dib">
743
- <span class="icon iconfont icon-arrow-down-to-line"></span>
744
- <div class="name">
745
- arrow-down-to-line
746
- </div>
747
- <div class="code-name">.icon-arrow-down-to-line
748
- </div>
749
- </li>
750
-
751
- <li class="dib">
752
- <span class="icon iconfont icon-circle-check-filled"></span>
753
- <div class="name">
754
- circle-check-filled
755
- </div>
756
- <div class="code-name">.icon-circle-check-filled
757
- </div>
758
- </li>
759
-
760
- <li class="dib">
761
- <span class="icon iconfont icon-square-check"></span>
762
- <div class="name">
763
- square-check
764
- </div>
765
- <div class="code-name">.icon-square-check
766
- </div>
767
- </li>
768
-
769
- <li class="dib">
770
- <span class="icon iconfont icon-square-check-empty"></span>
771
- <div class="name">
772
- square-check-empty
773
- </div>
774
- <div class="code-name">.icon-square-check-empty
775
- </div>
776
- </li>
777
-
778
- <li class="dib">
779
- <span class="icon iconfont icon-photosolid"></span>
780
- <div class="name">
781
- photosolid
782
- </div>
783
- <div class="code-name">.icon-photosolid
784
- </div>
785
- </li>
786
-
787
- <li class="dib">
788
- <span class="icon iconfont icon-customized"></span>
789
- <div class="name">
790
- customized
791
- </div>
792
- <div class="code-name">.icon-customized
793
- </div>
794
- </li>
795
-
796
- <li class="dib">
797
- <span class="icon iconfont icon-customize-newspaper"></span>
798
- <div class="name">
799
- customize-newspaper
800
- </div>
801
- <div class="code-name">.icon-customize-newspaper
802
- </div>
803
- </li>
804
-
805
- <li class="dib">
806
- <span class="icon iconfont icon-bell-ring"></span>
807
- <div class="name">
808
- bell-ring
809
- </div>
810
- <div class="code-name">.icon-bell-ring
811
- </div>
812
- </li>
813
-
814
- <li class="dib">
815
- <span class="icon iconfont icon-eye"></span>
816
- <div class="name">
817
- eye
818
- </div>
819
- <div class="code-name">.icon-eye
820
- </div>
821
- </li>
822
-
823
- <li class="dib">
824
- <span class="icon iconfont icon-bitcoin-convert"></span>
825
- <div class="name">
826
- bitcoin-convert
827
- </div>
828
- <div class="code-name">.icon-bitcoin-convert
829
- </div>
830
- </li>
831
-
832
- <li class="dib">
833
- <span class="icon iconfont icon-ellipsis-vertical"></span>
834
- <div class="name">
835
- ellipsis-vertical
836
- </div>
837
- <div class="code-name">.icon-ellipsis-vertical
838
- </div>
839
- </li>
840
-
841
- <li class="dib">
842
- <span class="icon iconfont icon-circle-help"></span>
843
- <div class="name">
844
- circle-help
845
- </div>
846
- <div class="code-name">.icon-circle-help
847
- </div>
848
- </li>
849
-
850
- <li class="dib">
851
- <span class="icon iconfont icon-gift"></span>
852
- <div class="name">
853
- gift
854
- </div>
855
- <div class="code-name">.icon-gift
856
- </div>
857
- </li>
858
-
859
- <li class="dib">
860
- <span class="icon iconfont icon-circle"></span>
861
- <div class="name">
862
- circle
863
- </div>
864
- <div class="code-name">.icon-circle
865
- </div>
866
- </li>
867
-
868
- <li class="dib">
869
- <span class="icon iconfont icon-circle-dollar-sign"></span>
870
- <div class="name">
871
- circle-dollar-sign
872
- </div>
873
- <div class="code-name">.icon-circle-dollar-sign
874
- </div>
875
- </li>
876
-
877
- <li class="dib">
878
- <span class="icon iconfont icon-chrome"></span>
879
- <div class="name">
880
- chrome
881
- </div>
882
- <div class="code-name">.icon-chrome
883
- </div>
884
- </li>
885
-
886
- <li class="dib">
887
- <span class="icon iconfont icon-alarm"></span>
888
- <div class="name">
889
- alarm
890
- </div>
891
- <div class="code-name">.icon-alarm
892
- </div>
893
- </li>
894
-
895
- <li class="dib">
896
- <span class="icon iconfont icon-refresh-cw"></span>
897
- <div class="name">
898
- refresh-cw
899
- </div>
900
- <div class="code-name">.icon-refresh-cw
901
- </div>
902
- </li>
903
-
904
- <li class="dib">
905
- <span class="icon iconfont icon-search"></span>
906
- <div class="name">
907
- search
908
- </div>
909
- <div class="code-name">.icon-search
910
- </div>
911
- </li>
912
-
913
- <li class="dib">
914
- <span class="icon iconfont icon-alert-circle"></span>
915
- <div class="name">
916
- alert-circle
917
- </div>
918
- <div class="code-name">.icon-alert-circle
919
- </div>
920
- </li>
921
-
922
- <li class="dib">
923
- <span class="icon iconfont icon-graph-filled"></span>
924
- <div class="name">
925
- graph-filled
926
- </div>
927
- <div class="code-name">.icon-graph-filled
928
- </div>
929
- </li>
930
-
931
- <li class="dib">
932
- <span class="icon iconfont icon-star-filled"></span>
933
- <div class="name">
934
- star-filled
935
- </div>
936
- <div class="code-name">.icon-star-filled
937
- </div>
938
- </li>
939
-
940
- <li class="dib">
941
- <span class="icon iconfont icon-lucide-x"></span>
942
- <div class="name">
943
- lucide-x
944
- </div>
945
- <div class="code-name">.icon-lucide-x
946
- </div>
947
- </li>
948
-
949
- <li class="dib">
950
- <span class="icon iconfont icon-plus"></span>
951
- <div class="name">
952
- plus
953
- </div>
954
- <div class="code-name">.icon-plus
955
- </div>
956
- </li>
957
-
958
- <li class="dib">
959
- <span class="icon iconfont icon-map-pin"></span>
960
- <div class="name">
961
- map-pin
962
- </div>
963
- <div class="code-name">.icon-map-pin
964
- </div>
965
- </li>
966
-
967
- <li class="dib">
968
- <span class="icon iconfont icon-loader-circle"></span>
969
- <div class="name">
970
- loader-circle
971
- </div>
972
- <div class="code-name">.icon-loader-circle
973
- </div>
974
- </li>
975
-
976
- <li class="dib">
977
- <span class="icon iconfont icon-image"></span>
978
- <div class="name">
979
- image
980
- </div>
981
- <div class="code-name">.icon-image
982
- </div>
983
- </li>
984
-
985
- <li class="dib">
986
- <span class="icon iconfont icon-lucide-image"></span>
987
- <div class="name">
988
- lucide-image
989
- </div>
990
- <div class="code-name">.icon-lucide-image
991
- </div>
992
- </li>
993
-
994
- <li class="dib">
995
- <span class="icon iconfont icon-lucide-history"></span>
996
- <div class="name">
997
- lucide-history
998
- </div>
999
- <div class="code-name">.icon-lucide-history
1000
- </div>
1001
- </li>
1002
-
1003
- <li class="dib">
1004
- <span class="icon iconfont icon-key-round"></span>
1005
- <div class="name">
1006
- key-round
1007
- </div>
1008
- <div class="code-name">.icon-key-round
1009
- </div>
1010
- </li>
1011
-
1012
- <li class="dib">
1013
- <span class="icon iconfont icon-copy"></span>
1014
- <div class="name">
1015
- copy
1016
- </div>
1017
- <div class="code-name">.icon-copy
1018
- </div>
1019
- </li>
1020
-
1021
- <li class="dib">
1022
- <span class="icon iconfont icon-headset"></span>
1023
- <div class="name">
1024
- headset
1025
- </div>
1026
- <div class="code-name">.icon-headset
1027
- </div>
1028
- </li>
1029
-
1030
- <li class="dib">
1031
- <span class="icon iconfont icon-circle-x"></span>
1032
- <div class="name">
1033
- circle-x
1034
- </div>
1035
- <div class="code-name">.icon-circle-x
1036
- </div>
1037
- </li>
1038
-
1039
- <li class="dib">
1040
- <span class="icon iconfont icon-circle-user"></span>
1041
- <div class="name">
1042
- circle-user
1043
- </div>
1044
- <div class="code-name">.icon-circle-user
1045
- </div>
1046
- </li>
1047
-
1048
- <li class="dib">
1049
- <span class="icon iconfont icon-globe"></span>
1050
- <div class="name">
1051
- globe
1052
- </div>
1053
- <div class="code-name">.icon-globe
1054
- </div>
1055
- </li>
1056
-
1057
- <li class="dib">
1058
- <span class="icon iconfont icon-compass"></span>
1059
- <div class="name">
1060
- compass
1061
- </div>
1062
- <div class="code-name">.icon-compass
1063
- </div>
1064
- </li>
1065
-
1066
- <li class="dib">
1067
- <span class="icon iconfont icon-eye-off"></span>
1068
- <div class="name">
1069
- eye-off
1070
- </div>
1071
- <div class="code-name">.icon-eye-off
1072
- </div>
1073
- </li>
1074
-
1075
- <li class="dib">
1076
- <span class="icon iconfont icon-layout-grid"></span>
1077
- <div class="name">
1078
- layout-grid
1079
- </div>
1080
- <div class="code-name">.icon-layout-grid
1081
- </div>
1082
- </li>
1083
-
1084
- <li class="dib">
1085
- <span class="icon iconfont icon-heart-handshake"></span>
1086
- <div class="name">
1087
- heart-handshake
1088
- </div>
1089
- <div class="code-name">.icon-heart-handshake
1090
- </div>
1091
- </li>
1092
-
1093
- <li class="dib">
1094
- <span class="icon iconfont icon-credit-card"></span>
1095
- <div class="name">
1096
- credit-card
1097
- </div>
1098
- <div class="code-name">.icon-credit-card
1099
- </div>
1100
- </li>
1101
-
1102
- <li class="dib">
1103
- <span class="icon iconfont icon-earth"></span>
1104
- <div class="name">
1105
- earth
1106
- </div>
1107
- <div class="code-name">.icon-earth
1108
- </div>
1109
- </li>
1110
-
1111
- <li class="dib">
1112
- <span class="icon iconfont icon-linear-trash"></span>
1113
- <div class="name">
1114
- linear-trash
1115
- </div>
1116
- <div class="code-name">.icon-linear-trash
1117
- </div>
1118
- </li>
1119
-
1120
- <li class="dib">
1121
- <span class="icon iconfont icon-tabler_wallet_outline"></span>
1122
- <div class="name">
1123
- icon-kfckfc
1124
- </div>
1125
- <div class="code-name">.icon-tabler_wallet_outline
1126
- </div>
1127
- </li>
1128
-
1129
- <li class="dib">
1130
- <span class="icon iconfont icon-pig-money"></span>
1131
- <div class="name">
1132
- pig-money
1133
- </div>
1134
- <div class="code-name">.icon-pig-money
1135
- </div>
1136
- </li>
1137
-
1138
- <li class="dib">
1139
- <span class="icon iconfont icon-wallet-filled"></span>
1140
- <div class="name">
1141
- wallet-filled
1142
- </div>
1143
- <div class="code-name">.icon-wallet-filled
1144
- </div>
1145
- </li>
1146
-
1147
- <li class="dib">
1148
- <span class="icon iconfont icon-star-outline"></span>
1149
- <div class="name">
1150
- star-outline
1151
- </div>
1152
- <div class="code-name">.icon-star-outline
1153
- </div>
1154
- </li>
1155
-
1156
- <li class="dib">
1157
- <span class="icon iconfont icon-trending-up-down"></span>
1158
- <div class="name">
1159
- trending-up-down
1160
- </div>
1161
- <div class="code-name">.icon-trending-up-down
1162
- </div>
1163
- </li>
1164
-
1165
- <li class="dib">
1166
- <span class="icon iconfont icon-monitor"></span>
1167
- <div class="name">
1168
- monitor
1169
- </div>
1170
- <div class="code-name">.icon-monitor
1171
- </div>
1172
- </li>
1173
-
1174
- <li class="dib">
1175
- <span class="icon iconfont icon-graph-outline"></span>
1176
- <div class="name">
1177
- graph-outline
1178
- </div>
1179
- <div class="code-name">.icon-graph-outline
1180
- </div>
1181
- </li>
1182
-
1183
- <li class="dib">
1184
- <span class="icon iconfont icon-home-filled"></span>
1185
- <div class="name">
1186
- home-filled
1187
- </div>
1188
- <div class="code-name">.icon-home-filled
1189
- </div>
1190
- </li>
1191
-
1192
- <li class="dib">
1193
- <span class="icon iconfont icon-lucidecoins"></span>
1194
- <div class="name">
1195
- lucidecoins
1196
- </div>
1197
- <div class="code-name">.icon-lucidecoins
1198
- </div>
1199
- </li>
1200
-
1201
- <li class="dib">
1202
- <span class="icon iconfont icon-square-pen"></span>
1203
- <div class="name">
1204
- square-pen
1205
- </div>
1206
- <div class="code-name">.icon-square-pen
1207
- </div>
1208
- </li>
1209
-
1210
- <li class="dib">
1211
- <span class="icon iconfont icon-adjustments-horizontal"></span>
1212
- <div class="name">
1213
- adjustments-horizontal
1214
- </div>
1215
- <div class="code-name">.icon-adjustments-horizontal
1216
- </div>
1217
- </li>
1218
-
1219
- <li class="dib">
1220
- <span class="icon iconfont icon-home-outline"></span>
1221
- <div class="name">
1222
- home-outline
1223
- </div>
1224
- <div class="code-name">.icon-home-outline
1225
- </div>
1226
- </li>
1227
-
1228
- <li class="dib">
1229
- <span class="icon iconfont icon-user-cog"></span>
1230
- <div class="name">
1231
- user-cog
1232
- </div>
1233
- <div class="code-name">.icon-user-cog
1234
- </div>
1235
- </li>
1236
-
1237
- <li class="dib">
1238
- <span class="icon iconfont icon-minus"></span>
1239
- <div class="name">
1240
- minus
1241
- </div>
1242
- <div class="code-name">.icon-minus
1243
- </div>
1244
- </li>
1245
-
1246
- <li class="dib">
1247
- <span class="icon iconfont icon-circle-check"></span>
1248
- <div class="name">
1249
- circle-check
1250
- </div>
1251
- <div class="code-name">.icon-circle-check
1252
- </div>
1253
- </li>
1254
-
1255
- <li class="dib">
1256
- <span class="icon iconfont icon-customize-speakerphone"></span>
1257
- <div class="name">
1258
- customize-speakerphone
1259
- </div>
1260
- <div class="code-name">.icon-customize-speakerphone
1261
- </div>
1262
- </li>
1263
-
1264
- <li class="dib">
1265
- <span class="icon iconfont icon-book-open-text"></span>
1266
- <div class="name">
1267
- book-open-text
1268
- </div>
1269
- <div class="code-name">.icon-book-open-text
1270
- </div>
1271
- </li>
1272
-
1273
- <li class="dib">
1274
- <span class="icon iconfont icon-bitcoin-convert-filled"></span>
1275
- <div class="name">
1276
- bitcoin-convert-filled
1277
- </div>
1278
- <div class="code-name">.icon-bitcoin-convert-filled
1279
- </div>
1280
- </li>
1281
-
1282
- <li class="dib">
1283
- <span class="icon iconfont icon-calendar-clock"></span>
1284
- <div class="name">
1285
- calendar-clock
1286
- </div>
1287
- <div class="code-name">.icon-calendar-clock
1288
- </div>
1289
- </li>
1290
-
1291
- <li class="dib">
1292
- <span class="icon iconfont icon-check"></span>
1293
- <div class="name">
1294
- check
1295
- </div>
1296
- <div class="code-name">.icon-check
1297
- </div>
1298
- </li>
1299
-
1300
- <li class="dib">
1301
- <span class="icon iconfont icon-repeat-circle"></span>
1302
- <div class="name">
1303
- repeat-circle
1304
- </div>
1305
- <div class="code-name">.icon-repeat-circle
1306
- </div>
1307
- </li>
1308
-
1309
- <li class="dib">
1310
- <span class="icon iconfont icon-chevron-up"></span>
1311
- <div class="name">
1312
- chevron-up
1313
- </div>
1314
- <div class="code-name">.icon-chevron-up
1315
- </div>
1316
- </li>
1317
-
1318
- <li class="dib">
1319
- <span class="icon iconfont icon-customize-safe"></span>
1320
- <div class="name">
1321
- customize-safe
1322
- </div>
1323
- <div class="code-name">.icon-customize-safe
1324
- </div>
1325
- </li>
1326
-
1327
- <li class="dib">
1328
- <span class="icon iconfont icon-chevron-right"></span>
1329
- <div class="name">
1330
- chevron-right
1331
- </div>
1332
- <div class="code-name">.icon-chevron-right
1333
- </div>
1334
- </li>
1335
-
1336
- <li class="dib">
1337
- <span class="icon iconfont icon-bitcoin-convert-utline"></span>
1338
- <div class="name">
1339
- bitcoin-convert-utline
1340
- </div>
1341
- <div class="code-name">.icon-bitcoin-convert-utline
1342
- </div>
1343
- </li>
1344
-
1345
- <li class="dib">
1346
- <span class="icon iconfont icon-arrow-left-right"></span>
1347
- <div class="name">
1348
- arrow-left-right
1349
- </div>
1350
- <div class="code-name">.icon-arrow-left-right
1351
- </div>
1352
- </li>
1353
-
1354
- <li class="dib">
1355
- <span class="icon iconfont icon-customize"></span>
1356
- <div class="name">
1357
- customize
1358
- </div>
1359
- <div class="code-name">.icon-customize
1360
- </div>
1361
- </li>
1362
-
1363
- <li class="dib">
1364
- <span class="icon iconfont icon-lucide-check"></span>
1365
- <div class="name">
1366
- lucide-check
1367
- </div>
1368
- <div class="code-name">.icon-lucide-check
1369
- </div>
1370
- </li>
1371
-
1372
- <li class="dib">
1373
- <span class="icon iconfont icon-arrow-down-narrow-wide"></span>
1374
- <div class="name">
1375
- arrow-down-narrow-wide
1376
- </div>
1377
- <div class="code-name">.icon-arrow-down-narrow-wide
1378
- </div>
1379
- </li>
1380
-
1381
- <li class="dib">
1382
- <span class="icon iconfont icon-money-send"></span>
1383
- <div class="name">
1384
- money-send
1385
- </div>
1386
- <div class="code-name">.icon-money-send
1387
- </div>
1388
- </li>
1389
-
1390
- <li class="dib">
1391
- <span class="icon iconfont icon-chevron-left"></span>
1392
- <div class="name">
1393
- chevron-left
1394
- </div>
1395
- <div class="code-name">.icon-chevron-left
1396
- </div>
1397
- </li>
1398
-
1399
- <li class="dib">
1400
- <span class="icon iconfont icon-chevron-down"></span>
1401
- <div class="name">
1402
- chevron-down
1403
- </div>
1404
- <div class="code-name">.icon-chevron-down
1405
- </div>
1406
- </li>
1407
-
1408
- </ul>
1409
- <div class="article markdown">
1410
- <h2 id="font-class-">font-class 引用</h2>
1411
- <hr>
1412
-
1413
- <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
1414
- <p>与 Unicode 使用方式相比，具有如下特点：</p>
1415
- <ul>
1416
- <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
1417
- <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
1418
- </ul>
1419
- <p>使用步骤如下：</p>
1420
- <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
1421
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1422
- </code></pre>
1423
- <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1424
- <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
1425
- </code></pre>
1426
- <blockquote>
1427
- <p>"
1428
- iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
1429
- </blockquote>
1430
- </div>
1431
- </div>
1432
- <div class="content symbol">
1433
- <ul class="icon_lists dib-box">
1434
-
1435
- <li class="dib">
1436
- <svg class="icon svg-icon" aria-hidden="true">
1437
- <use xlink:href="#icon-withdraw"></use>
1438
- </svg>
1439
- <div class="name">withdraw</div>
1440
- <div class="code-name">#icon-withdraw</div>
1441
- </li>
1442
-
1443
- <li class="dib">
1444
- <svg class="icon svg-icon" aria-hidden="true">
1445
- <use xlink:href="#icon-deposit"></use>
1446
- </svg>
1447
- <div class="name">deposit</div>
1448
- <div class="code-name">#icon-deposit</div>
1449
- </li>
1450
-
1451
- <li class="dib">
1452
- <svg class="icon svg-icon" aria-hidden="true">
1453
- <use xlink:href="#icon-switch-camera"></use>
1454
- </svg>
1455
- <div class="name">switch-camera</div>
1456
- <div class="code-name">#icon-switch-camera</div>
1457
- </li>
1458
-
1459
- <li class="dib">
1460
- <svg class="icon svg-icon" aria-hidden="true">
1461
- <use xlink:href="#icon-receipt"></use>
1462
- </svg>
1463
- <div class="name">receipt</div>
1464
- <div class="code-name">#icon-receipt</div>
1465
- </li>
1466
-
1467
- <li class="dib">
1468
- <svg class="icon svg-icon" aria-hidden="true">
1469
- <use xlink:href="#icon-shield-check"></use>
1470
- </svg>
1471
- <div class="name">shield-check</div>
1472
- <div class="code-name">#icon-shield-check</div>
1473
- </li>
1474
-
1475
- <li class="dib">
1476
- <svg class="icon svg-icon" aria-hidden="true">
1477
- <use xlink:href="#icon-id-card"></use>
1478
- </svg>
1479
- <div class="name">id-card</div>
1480
- <div class="code-name">#icon-id-card</div>
1481
- </li>
1482
-
1483
- <li class="dib">
1484
- <svg class="icon svg-icon" aria-hidden="true">
1485
- <use xlink:href="#icon-user-round"></use>
1486
- </svg>
1487
- <div class="name">user-round</div>
1488
- <div class="code-name">#icon-user-round</div>
1489
- </li>
1490
-
1491
- <li class="dib">
1492
- <svg class="icon svg-icon" aria-hidden="true">
1493
- <use xlink:href="#icon-log-out"></use>
1494
- </svg>
1495
- <div class="name">log-out</div>
1496
- <div class="code-name">#icon-log-out</div>
1497
- </li>
1498
-
1499
- <li class="dib">
1500
- <svg class="icon svg-icon" aria-hidden="true">
1501
- <use xlink:href="#icon-arrow-right-left"></use>
1502
- </svg>
1503
- <div class="name">arrow-right-left</div>
1504
- <div class="code-name">#icon-arrow-right-left</div>
1505
- </li>
1506
-
1507
- <li class="dib">
1508
- <svg class="icon svg-icon" aria-hidden="true">
1509
- <use xlink:href="#icon-clipboard-minus"></use>
1510
- </svg>
1511
- <div class="name">clipboard-minus</div>
1512
- <div class="code-name">#icon-clipboard-minus</div>
1513
- </li>
1514
-
1515
- <li class="dib">
1516
- <svg class="icon svg-icon" aria-hidden="true">
1517
- <use xlink:href="#icon-chart-pie"></use>
1518
- </svg>
1519
- <div class="name">chart-pie</div>
1520
- <div class="code-name">#icon-chart-pie</div>
1521
- </li>
1522
-
1523
- <li class="dib">
1524
- <svg class="icon svg-icon" aria-hidden="true">
1525
- <use xlink:href="#icon-receipt-text"></use>
1526
- </svg>
1527
- <div class="name">receipt-text</div>
1528
- <div class="code-name">#icon-receipt-text</div>
1529
- </li>
1530
-
1531
- <li class="dib">
1532
- <svg class="icon svg-icon" aria-hidden="true">
1533
- <use xlink:href="#icon-brush-cleaning"></use>
1534
- </svg>
1535
- <div class="name">brush-cleaning</div>
1536
- <div class="code-name">#icon-brush-cleaning</div>
1537
- </li>
1538
-
1539
- <li class="dib">
1540
- <svg class="icon svg-icon" aria-hidden="true">
1541
- <use xlink:href="#icon-arrow-down-to-line"></use>
1542
- </svg>
1543
- <div class="name">arrow-down-to-line</div>
1544
- <div class="code-name">#icon-arrow-down-to-line</div>
1545
- </li>
1546
-
1547
- <li class="dib">
1548
- <svg class="icon svg-icon" aria-hidden="true">
1549
- <use xlink:href="#icon-circle-check-filled"></use>
1550
- </svg>
1551
- <div class="name">circle-check-filled</div>
1552
- <div class="code-name">#icon-circle-check-filled</div>
1553
- </li>
1554
-
1555
- <li class="dib">
1556
- <svg class="icon svg-icon" aria-hidden="true">
1557
- <use xlink:href="#icon-square-check"></use>
1558
- </svg>
1559
- <div class="name">square-check</div>
1560
- <div class="code-name">#icon-square-check</div>
1561
- </li>
1562
-
1563
- <li class="dib">
1564
- <svg class="icon svg-icon" aria-hidden="true">
1565
- <use xlink:href="#icon-square-check-empty"></use>
1566
- </svg>
1567
- <div class="name">square-check-empty</div>
1568
- <div class="code-name">#icon-square-check-empty</div>
1569
- </li>
1570
-
1571
- <li class="dib">
1572
- <svg class="icon svg-icon" aria-hidden="true">
1573
- <use xlink:href="#icon-photosolid"></use>
1574
- </svg>
1575
- <div class="name">photosolid</div>
1576
- <div class="code-name">#icon-photosolid</div>
1577
- </li>
1578
-
1579
- <li class="dib">
1580
- <svg class="icon svg-icon" aria-hidden="true">
1581
- <use xlink:href="#icon-customized"></use>
1582
- </svg>
1583
- <div class="name">customized</div>
1584
- <div class="code-name">#icon-customized</div>
1585
- </li>
1586
-
1587
- <li class="dib">
1588
- <svg class="icon svg-icon" aria-hidden="true">
1589
- <use xlink:href="#icon-customize-newspaper"></use>
1590
- </svg>
1591
- <div class="name">customize-newspaper</div>
1592
- <div class="code-name">#icon-customize-newspaper</div>
1593
- </li>
1594
-
1595
- <li class="dib">
1596
- <svg class="icon svg-icon" aria-hidden="true">
1597
- <use xlink:href="#icon-bell-ring"></use>
1598
- </svg>
1599
- <div class="name">bell-ring</div>
1600
- <div class="code-name">#icon-bell-ring</div>
1601
- </li>
1602
-
1603
- <li class="dib">
1604
- <svg class="icon svg-icon" aria-hidden="true">
1605
- <use xlink:href="#icon-eye"></use>
1606
- </svg>
1607
- <div class="name">eye</div>
1608
- <div class="code-name">#icon-eye</div>
1609
- </li>
1610
-
1611
- <li class="dib">
1612
- <svg class="icon svg-icon" aria-hidden="true">
1613
- <use xlink:href="#icon-bitcoin-convert"></use>
1614
- </svg>
1615
- <div class="name">bitcoin-convert</div>
1616
- <div class="code-name">#icon-bitcoin-convert</div>
1617
- </li>
1618
-
1619
- <li class="dib">
1620
- <svg class="icon svg-icon" aria-hidden="true">
1621
- <use xlink:href="#icon-ellipsis-vertical"></use>
1622
- </svg>
1623
- <div class="name">ellipsis-vertical</div>
1624
- <div class="code-name">#icon-ellipsis-vertical</div>
1625
- </li>
1626
-
1627
- <li class="dib">
1628
- <svg class="icon svg-icon" aria-hidden="true">
1629
- <use xlink:href="#icon-circle-help"></use>
1630
- </svg>
1631
- <div class="name">circle-help</div>
1632
- <div class="code-name">#icon-circle-help</div>
1633
- </li>
1634
-
1635
- <li class="dib">
1636
- <svg class="icon svg-icon" aria-hidden="true">
1637
- <use xlink:href="#icon-gift"></use>
1638
- </svg>
1639
- <div class="name">gift</div>
1640
- <div class="code-name">#icon-gift</div>
1641
- </li>
1642
-
1643
- <li class="dib">
1644
- <svg class="icon svg-icon" aria-hidden="true">
1645
- <use xlink:href="#icon-circle"></use>
1646
- </svg>
1647
- <div class="name">circle</div>
1648
- <div class="code-name">#icon-circle</div>
1649
- </li>
1650
-
1651
- <li class="dib">
1652
- <svg class="icon svg-icon" aria-hidden="true">
1653
- <use xlink:href="#icon-circle-dollar-sign"></use>
1654
- </svg>
1655
- <div class="name">circle-dollar-sign</div>
1656
- <div class="code-name">#icon-circle-dollar-sign</div>
1657
- </li>
1658
-
1659
- <li class="dib">
1660
- <svg class="icon svg-icon" aria-hidden="true">
1661
- <use xlink:href="#icon-chrome"></use>
1662
- </svg>
1663
- <div class="name">chrome</div>
1664
- <div class="code-name">#icon-chrome</div>
1665
- </li>
1666
-
1667
- <li class="dib">
1668
- <svg class="icon svg-icon" aria-hidden="true">
1669
- <use xlink:href="#icon-alarm"></use>
1670
- </svg>
1671
- <div class="name">alarm</div>
1672
- <div class="code-name">#icon-alarm</div>
1673
- </li>
1674
-
1675
- <li class="dib">
1676
- <svg class="icon svg-icon" aria-hidden="true">
1677
- <use xlink:href="#icon-refresh-cw"></use>
1678
- </svg>
1679
- <div class="name">refresh-cw</div>
1680
- <div class="code-name">#icon-refresh-cw</div>
1681
- </li>
1682
-
1683
- <li class="dib">
1684
- <svg class="icon svg-icon" aria-hidden="true">
1685
- <use xlink:href="#icon-search"></use>
1686
- </svg>
1687
- <div class="name">search</div>
1688
- <div class="code-name">#icon-search</div>
1689
- </li>
1690
-
1691
- <li class="dib">
1692
- <svg class="icon svg-icon" aria-hidden="true">
1693
- <use xlink:href="#icon-alert-circle"></use>
1694
- </svg>
1695
- <div class="name">alert-circle</div>
1696
- <div class="code-name">#icon-alert-circle</div>
1697
- </li>
1698
-
1699
- <li class="dib">
1700
- <svg class="icon svg-icon" aria-hidden="true">
1701
- <use xlink:href="#icon-graph-filled"></use>
1702
- </svg>
1703
- <div class="name">graph-filled</div>
1704
- <div class="code-name">#icon-graph-filled</div>
1705
- </li>
1706
-
1707
- <li class="dib">
1708
- <svg class="icon svg-icon" aria-hidden="true">
1709
- <use xlink:href="#icon-star-filled"></use>
1710
- </svg>
1711
- <div class="name">star-filled</div>
1712
- <div class="code-name">#icon-star-filled</div>
1713
- </li>
1714
-
1715
- <li class="dib">
1716
- <svg class="icon svg-icon" aria-hidden="true">
1717
- <use xlink:href="#icon-lucide-x"></use>
1718
- </svg>
1719
- <div class="name">lucide-x</div>
1720
- <div class="code-name">#icon-lucide-x</div>
1721
- </li>
1722
-
1723
- <li class="dib">
1724
- <svg class="icon svg-icon" aria-hidden="true">
1725
- <use xlink:href="#icon-plus"></use>
1726
- </svg>
1727
- <div class="name">plus</div>
1728
- <div class="code-name">#icon-plus</div>
1729
- </li>
1730
-
1731
- <li class="dib">
1732
- <svg class="icon svg-icon" aria-hidden="true">
1733
- <use xlink:href="#icon-map-pin"></use>
1734
- </svg>
1735
- <div class="name">map-pin</div>
1736
- <div class="code-name">#icon-map-pin</div>
1737
- </li>
1738
-
1739
- <li class="dib">
1740
- <svg class="icon svg-icon" aria-hidden="true">
1741
- <use xlink:href="#icon-loader-circle"></use>
1742
- </svg>
1743
- <div class="name">loader-circle</div>
1744
- <div class="code-name">#icon-loader-circle</div>
1745
- </li>
1746
-
1747
- <li class="dib">
1748
- <svg class="icon svg-icon" aria-hidden="true">
1749
- <use xlink:href="#icon-image"></use>
1750
- </svg>
1751
- <div class="name">image</div>
1752
- <div class="code-name">#icon-image</div>
1753
- </li>
1754
-
1755
- <li class="dib">
1756
- <svg class="icon svg-icon" aria-hidden="true">
1757
- <use xlink:href="#icon-lucide-image"></use>
1758
- </svg>
1759
- <div class="name">lucide-image</div>
1760
- <div class="code-name">#icon-lucide-image</div>
1761
- </li>
1762
-
1763
- <li class="dib">
1764
- <svg class="icon svg-icon" aria-hidden="true">
1765
- <use xlink:href="#icon-lucide-history"></use>
1766
- </svg>
1767
- <div class="name">lucide-history</div>
1768
- <div class="code-name">#icon-lucide-history</div>
1769
- </li>
1770
-
1771
- <li class="dib">
1772
- <svg class="icon svg-icon" aria-hidden="true">
1773
- <use xlink:href="#icon-key-round"></use>
1774
- </svg>
1775
- <div class="name">key-round</div>
1776
- <div class="code-name">#icon-key-round</div>
1777
- </li>
1778
-
1779
- <li class="dib">
1780
- <svg class="icon svg-icon" aria-hidden="true">
1781
- <use xlink:href="#icon-copy"></use>
1782
- </svg>
1783
- <div class="name">copy</div>
1784
- <div class="code-name">#icon-copy</div>
1785
- </li>
1786
-
1787
- <li class="dib">
1788
- <svg class="icon svg-icon" aria-hidden="true">
1789
- <use xlink:href="#icon-headset"></use>
1790
- </svg>
1791
- <div class="name">headset</div>
1792
- <div class="code-name">#icon-headset</div>
1793
- </li>
1794
-
1795
- <li class="dib">
1796
- <svg class="icon svg-icon" aria-hidden="true">
1797
- <use xlink:href="#icon-circle-x"></use>
1798
- </svg>
1799
- <div class="name">circle-x</div>
1800
- <div class="code-name">#icon-circle-x</div>
1801
- </li>
1802
-
1803
- <li class="dib">
1804
- <svg class="icon svg-icon" aria-hidden="true">
1805
- <use xlink:href="#icon-circle-user"></use>
1806
- </svg>
1807
- <div class="name">circle-user</div>
1808
- <div class="code-name">#icon-circle-user</div>
1809
- </li>
1810
-
1811
- <li class="dib">
1812
- <svg class="icon svg-icon" aria-hidden="true">
1813
- <use xlink:href="#icon-globe"></use>
1814
- </svg>
1815
- <div class="name">globe</div>
1816
- <div class="code-name">#icon-globe</div>
1817
- </li>
1818
-
1819
- <li class="dib">
1820
- <svg class="icon svg-icon" aria-hidden="true">
1821
- <use xlink:href="#icon-compass"></use>
1822
- </svg>
1823
- <div class="name">compass</div>
1824
- <div class="code-name">#icon-compass</div>
1825
- </li>
1826
-
1827
- <li class="dib">
1828
- <svg class="icon svg-icon" aria-hidden="true">
1829
- <use xlink:href="#icon-eye-off"></use>
1830
- </svg>
1831
- <div class="name">eye-off</div>
1832
- <div class="code-name">#icon-eye-off</div>
1833
- </li>
1834
-
1835
- <li class="dib">
1836
- <svg class="icon svg-icon" aria-hidden="true">
1837
- <use xlink:href="#icon-layout-grid"></use>
1838
- </svg>
1839
- <div class="name">layout-grid</div>
1840
- <div class="code-name">#icon-layout-grid</div>
1841
- </li>
1842
-
1843
- <li class="dib">
1844
- <svg class="icon svg-icon" aria-hidden="true">
1845
- <use xlink:href="#icon-heart-handshake"></use>
1846
- </svg>
1847
- <div class="name">heart-handshake</div>
1848
- <div class="code-name">#icon-heart-handshake</div>
1849
- </li>
1850
-
1851
- <li class="dib">
1852
- <svg class="icon svg-icon" aria-hidden="true">
1853
- <use xlink:href="#icon-credit-card"></use>
1854
- </svg>
1855
- <div class="name">credit-card</div>
1856
- <div class="code-name">#icon-credit-card</div>
1857
- </li>
1858
-
1859
- <li class="dib">
1860
- <svg class="icon svg-icon" aria-hidden="true">
1861
- <use xlink:href="#icon-earth"></use>
1862
- </svg>
1863
- <div class="name">earth</div>
1864
- <div class="code-name">#icon-earth</div>
1865
- </li>
1866
-
1867
- <li class="dib">
1868
- <svg class="icon svg-icon" aria-hidden="true">
1869
- <use xlink:href="#icon-linear-trash"></use>
1870
- </svg>
1871
- <div class="name">linear-trash</div>
1872
- <div class="code-name">#icon-linear-trash</div>
1873
- </li>
1874
-
1875
- <li class="dib">
1876
- <svg class="icon svg-icon" aria-hidden="true">
1877
- <use xlink:href="#icon-tabler_wallet_outline"></use>
1878
- </svg>
1879
- <div class="name">icon-kfckfc</div>
1880
- <div class="code-name">#icon-tabler_wallet_outline</div>
1881
- </li>
1882
-
1883
- <li class="dib">
1884
- <svg class="icon svg-icon" aria-hidden="true">
1885
- <use xlink:href="#icon-pig-money"></use>
1886
- </svg>
1887
- <div class="name">pig-money</div>
1888
- <div class="code-name">#icon-pig-money</div>
1889
- </li>
1890
-
1891
- <li class="dib">
1892
- <svg class="icon svg-icon" aria-hidden="true">
1893
- <use xlink:href="#icon-wallet-filled"></use>
1894
- </svg>
1895
- <div class="name">wallet-filled</div>
1896
- <div class="code-name">#icon-wallet-filled</div>
1897
- </li>
1898
-
1899
- <li class="dib">
1900
- <svg class="icon svg-icon" aria-hidden="true">
1901
- <use xlink:href="#icon-star-outline"></use>
1902
- </svg>
1903
- <div class="name">star-outline</div>
1904
- <div class="code-name">#icon-star-outline</div>
1905
- </li>
1906
-
1907
- <li class="dib">
1908
- <svg class="icon svg-icon" aria-hidden="true">
1909
- <use xlink:href="#icon-trending-up-down"></use>
1910
- </svg>
1911
- <div class="name">trending-up-down</div>
1912
- <div class="code-name">#icon-trending-up-down</div>
1913
- </li>
1914
-
1915
- <li class="dib">
1916
- <svg class="icon svg-icon" aria-hidden="true">
1917
- <use xlink:href="#icon-monitor"></use>
1918
- </svg>
1919
- <div class="name">monitor</div>
1920
- <div class="code-name">#icon-monitor</div>
1921
- </li>
1922
-
1923
- <li class="dib">
1924
- <svg class="icon svg-icon" aria-hidden="true">
1925
- <use xlink:href="#icon-graph-outline"></use>
1926
- </svg>
1927
- <div class="name">graph-outline</div>
1928
- <div class="code-name">#icon-graph-outline</div>
1929
- </li>
1930
-
1931
- <li class="dib">
1932
- <svg class="icon svg-icon" aria-hidden="true">
1933
- <use xlink:href="#icon-home-filled"></use>
1934
- </svg>
1935
- <div class="name">home-filled</div>
1936
- <div class="code-name">#icon-home-filled</div>
1937
- </li>
1938
-
1939
- <li class="dib">
1940
- <svg class="icon svg-icon" aria-hidden="true">
1941
- <use xlink:href="#icon-lucidecoins"></use>
1942
- </svg>
1943
- <div class="name">lucidecoins</div>
1944
- <div class="code-name">#icon-lucidecoins</div>
1945
- </li>
1946
-
1947
- <li class="dib">
1948
- <svg class="icon svg-icon" aria-hidden="true">
1949
- <use xlink:href="#icon-square-pen"></use>
1950
- </svg>
1951
- <div class="name">square-pen</div>
1952
- <div class="code-name">#icon-square-pen</div>
1953
- </li>
1954
-
1955
- <li class="dib">
1956
- <svg class="icon svg-icon" aria-hidden="true">
1957
- <use xlink:href="#icon-adjustments-horizontal"></use>
1958
- </svg>
1959
- <div class="name">adjustments-horizontal</div>
1960
- <div class="code-name">#icon-adjustments-horizontal</div>
1961
- </li>
1962
-
1963
- <li class="dib">
1964
- <svg class="icon svg-icon" aria-hidden="true">
1965
- <use xlink:href="#icon-home-outline"></use>
1966
- </svg>
1967
- <div class="name">home-outline</div>
1968
- <div class="code-name">#icon-home-outline</div>
1969
- </li>
1970
-
1971
- <li class="dib">
1972
- <svg class="icon svg-icon" aria-hidden="true">
1973
- <use xlink:href="#icon-user-cog"></use>
1974
- </svg>
1975
- <div class="name">user-cog</div>
1976
- <div class="code-name">#icon-user-cog</div>
1977
- </li>
1978
-
1979
- <li class="dib">
1980
- <svg class="icon svg-icon" aria-hidden="true">
1981
- <use xlink:href="#icon-minus"></use>
1982
- </svg>
1983
- <div class="name">minus</div>
1984
- <div class="code-name">#icon-minus</div>
1985
- </li>
1986
-
1987
- <li class="dib">
1988
- <svg class="icon svg-icon" aria-hidden="true">
1989
- <use xlink:href="#icon-circle-check"></use>
1990
- </svg>
1991
- <div class="name">circle-check</div>
1992
- <div class="code-name">#icon-circle-check</div>
1993
- </li>
1994
-
1995
- <li class="dib">
1996
- <svg class="icon svg-icon" aria-hidden="true">
1997
- <use xlink:href="#icon-customize-speakerphone"></use>
1998
- </svg>
1999
- <div class="name">customize-speakerphone</div>
2000
- <div class="code-name">#icon-customize-speakerphone</div>
2001
- </li>
2002
-
2003
- <li class="dib">
2004
- <svg class="icon svg-icon" aria-hidden="true">
2005
- <use xlink:href="#icon-book-open-text"></use>
2006
- </svg>
2007
- <div class="name">book-open-text</div>
2008
- <div class="code-name">#icon-book-open-text</div>
2009
- </li>
2010
-
2011
- <li class="dib">
2012
- <svg class="icon svg-icon" aria-hidden="true">
2013
- <use xlink:href="#icon-bitcoin-convert-filled"></use>
2014
- </svg>
2015
- <div class="name">bitcoin-convert-filled</div>
2016
- <div class="code-name">#icon-bitcoin-convert-filled</div>
2017
- </li>
2018
-
2019
- <li class="dib">
2020
- <svg class="icon svg-icon" aria-hidden="true">
2021
- <use xlink:href="#icon-calendar-clock"></use>
2022
- </svg>
2023
- <div class="name">calendar-clock</div>
2024
- <div class="code-name">#icon-calendar-clock</div>
2025
- </li>
2026
-
2027
- <li class="dib">
2028
- <svg class="icon svg-icon" aria-hidden="true">
2029
- <use xlink:href="#icon-check"></use>
2030
- </svg>
2031
- <div class="name">check</div>
2032
- <div class="code-name">#icon-check</div>
2033
- </li>
2034
-
2035
- <li class="dib">
2036
- <svg class="icon svg-icon" aria-hidden="true">
2037
- <use xlink:href="#icon-repeat-circle"></use>
2038
- </svg>
2039
- <div class="name">repeat-circle</div>
2040
- <div class="code-name">#icon-repeat-circle</div>
2041
- </li>
2042
-
2043
- <li class="dib">
2044
- <svg class="icon svg-icon" aria-hidden="true">
2045
- <use xlink:href="#icon-chevron-up"></use>
2046
- </svg>
2047
- <div class="name">chevron-up</div>
2048
- <div class="code-name">#icon-chevron-up</div>
2049
- </li>
2050
-
2051
- <li class="dib">
2052
- <svg class="icon svg-icon" aria-hidden="true">
2053
- <use xlink:href="#icon-customize-safe"></use>
2054
- </svg>
2055
- <div class="name">customize-safe</div>
2056
- <div class="code-name">#icon-customize-safe</div>
2057
- </li>
2058
-
2059
- <li class="dib">
2060
- <svg class="icon svg-icon" aria-hidden="true">
2061
- <use xlink:href="#icon-chevron-right"></use>
2062
- </svg>
2063
- <div class="name">chevron-right</div>
2064
- <div class="code-name">#icon-chevron-right</div>
2065
- </li>
2066
-
2067
- <li class="dib">
2068
- <svg class="icon svg-icon" aria-hidden="true">
2069
- <use xlink:href="#icon-bitcoin-convert-utline"></use>
2070
- </svg>
2071
- <div class="name">bitcoin-convert-utline</div>
2072
- <div class="code-name">#icon-bitcoin-convert-utline</div>
2073
- </li>
2074
-
2075
- <li class="dib">
2076
- <svg class="icon svg-icon" aria-hidden="true">
2077
- <use xlink:href="#icon-arrow-left-right"></use>
2078
- </svg>
2079
- <div class="name">arrow-left-right</div>
2080
- <div class="code-name">#icon-arrow-left-right</div>
2081
- </li>
2082
-
2083
- <li class="dib">
2084
- <svg class="icon svg-icon" aria-hidden="true">
2085
- <use xlink:href="#icon-customize"></use>
2086
- </svg>
2087
- <div class="name">customize</div>
2088
- <div class="code-name">#icon-customize</div>
2089
- </li>
2090
-
2091
- <li class="dib">
2092
- <svg class="icon svg-icon" aria-hidden="true">
2093
- <use xlink:href="#icon-lucide-check"></use>
2094
- </svg>
2095
- <div class="name">lucide-check</div>
2096
- <div class="code-name">#icon-lucide-check</div>
2097
- </li>
2098
-
2099
- <li class="dib">
2100
- <svg class="icon svg-icon" aria-hidden="true">
2101
- <use xlink:href="#icon-arrow-down-narrow-wide"></use>
2102
- </svg>
2103
- <div class="name">arrow-down-narrow-wide</div>
2104
- <div class="code-name">#icon-arrow-down-narrow-wide</div>
2105
- </li>
2106
-
2107
- <li class="dib">
2108
- <svg class="icon svg-icon" aria-hidden="true">
2109
- <use xlink:href="#icon-money-send"></use>
2110
- </svg>
2111
- <div class="name">money-send</div>
2112
- <div class="code-name">#icon-money-send</div>
2113
- </li>
2114
-
2115
- <li class="dib">
2116
- <svg class="icon svg-icon" aria-hidden="true">
2117
- <use xlink:href="#icon-chevron-left"></use>
2118
- </svg>
2119
- <div class="name">chevron-left</div>
2120
- <div class="code-name">#icon-chevron-left</div>
2121
- </li>
2122
-
2123
- <li class="dib">
2124
- <svg class="icon svg-icon" aria-hidden="true">
2125
- <use xlink:href="#icon-chevron-down"></use>
2126
- </svg>
2127
- <div class="name">chevron-down</div>
2128
- <div class="code-name">#icon-chevron-down</div>
2129
- </li>
2130
-
2131
- </ul>
2132
- <div class="article markdown">
2133
- <h2 id="symbol-">Symbol 引用</h2>
2134
- <hr>
2135
-
2136
- <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
2137
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
2138
- <ul>
2139
- <li>支持多色图标了，不再受单色限制。</li>
2140
- <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
2141
- <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
2142
- <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
2143
- </ul>
2144
- <p>使用步骤如下：</p>
2145
- <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
2146
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
2147
- </code></pre>
2148
- <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
2149
- <pre><code class="language-html">&lt;style&gt;
2150
- .icon {
2151
- width: 1em;
2152
- height: 1em;
2153
- vertical-align: -0.15em;
2154
- fill: currentColor;
2155
- overflow: hidden;
2156
- }
2157
- &lt;/style&gt;
2158
- </code></pre>
2159
- <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
2160
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
2161
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
2162
- &lt;/svg&gt;
2163
- </code></pre>
2164
- </div>
2165
- </div>
2166
-
2167
- </div>
2168
- </div>
2169
- <script>
2170
- $(document).ready(function () {
2171
- $('.tab-container .content:first').show()
2172
-
2173
- $('#tabs li').click(function (e) {
2174
- var tabContent = $('.tab-container .content')
2175
- var index = $(this).index()
2176
-
2177
- if ($(this).hasClass('active')) {
2178
- return
2179
- } else {
2180
- $('#tabs li').removeClass('active')
2181
- $(this).addClass('active')
2182
-
2183
- tabContent.hide().eq(index).fadeIn()
2184
- }
2185
- })
2186
- })
2187
- </script>
2188
- </body>
2189
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>iconfont Demo</title>
6
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
+ <link rel="stylesheet" href="demo.css">
10
+ <link rel="stylesheet" href="iconfont.css">
11
+ <script src="iconfont.js"></script>
12
+ <!-- jQuery -->
13
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
+ <!-- 代码高亮 -->
15
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
+ <style>
17
+ .main .logo {
18
+ margin-top: 0;
19
+ height: auto;
20
+ }
21
+
22
+ .main .logo a {
23
+ display: flex;
24
+ align-items: center;
25
+ }
26
+
27
+ .main .logo .sub-title {
28
+ margin-left: 0.5em;
29
+ font-size: 22px;
30
+ color: #fff;
31
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="main">
39
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
+ <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
+
42
+ </a></h1>
43
+ <div class="nav-tabs">
44
+ <ul id="tabs" class="dib-box">
45
+ <li class="dib active"><span>Unicode</span></li>
46
+ <li class="dib"><span>Font class</span></li>
47
+ <li class="dib"><span>Symbol</span></li>
48
+ </ul>
49
+
50
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=5007157" target="_blank" class="nav-more">查看项目</a>
51
+
52
+ </div>
53
+ <div class="tab-container">
54
+ <div class="content unicode" style="display: block;">
55
+ <ul class="icon_lists dib-box">
56
+
57
+ <li class="dib">
58
+ <span class="icon iconfont">&#xe7f2;</span>
59
+ <div class="name">lucide_loader 1</div>
60
+ <div class="code-name">&amp;#xe7f2;</div>
61
+ </li>
62
+
63
+ <li class="dib">
64
+ <span class="icon iconfont">&#xe7f1;</span>
65
+ <div class="name">lucide_circle-x-filled</div>
66
+ <div class="code-name">&amp;#xe7f1;</div>
67
+ </li>
68
+
69
+ <li class="dib">
70
+ <span class="icon iconfont">&#xe7f0;</span>
71
+ <div class="name">lucide_user-round-plus 1</div>
72
+ <div class="code-name">&amp;#xe7f0;</div>
73
+ </li>
74
+
75
+ <li class="dib">
76
+ <span class="icon iconfont">&#xe7ef;</span>
77
+ <div class="name">lucide_file-check 1</div>
78
+ <div class="code-name">&amp;#xe7ef;</div>
79
+ </li>
80
+
81
+ <li class="dib">
82
+ <span class="icon iconfont">&#xe7ee;</span>
83
+ <div class="name">lucide_external-link 1</div>
84
+ <div class="code-name">&amp;#xe7ee;</div>
85
+ </li>
86
+
87
+ <li class="dib">
88
+ <span class="icon iconfont">&#xe7dd;</span>
89
+ <div class="name">iconsax_google 1</div>
90
+ <div class="code-name">&amp;#xe7dd;</div>
91
+ </li>
92
+
93
+ <li class="dib">
94
+ <span class="icon iconfont">&#xe7ea;</span>
95
+ <div class="name">lucide_megaphone</div>
96
+ <div class="code-name">&amp;#xe7ea;</div>
97
+ </li>
98
+
99
+ <li class="dib">
100
+ <span class="icon iconfont">&#xe7eb;</span>
101
+ <div class="name">lucide_mail</div>
102
+ <div class="code-name">&amp;#xe7eb;</div>
103
+ </li>
104
+
105
+ <li class="dib">
106
+ <span class="icon iconfont">&#xe7ec;</span>
107
+ <div class="name">lucide_smartphone</div>
108
+ <div class="code-name">&amp;#xe7ec;</div>
109
+ </li>
110
+
111
+ <li class="dib">
112
+ <span class="icon iconfont">&#xe7ed;</span>
113
+ <div class="name">lucide_user</div>
114
+ <div class="code-name">&amp;#xe7ed;</div>
115
+ </li>
116
+
117
+ <li class="dib">
118
+ <span class="icon iconfont">&#xe7df;</span>
119
+ <div class="name">withdraw</div>
120
+ <div class="code-name">&amp;#xe7df;</div>
121
+ </li>
122
+
123
+ <li class="dib">
124
+ <span class="icon iconfont">&#xe7e7;</span>
125
+ <div class="name">deposit</div>
126
+ <div class="code-name">&amp;#xe7e7;</div>
127
+ </li>
128
+
129
+ <li class="dib">
130
+ <span class="icon iconfont">&#xe7e9;</span>
131
+ <div class="name">switch-camera</div>
132
+ <div class="code-name">&amp;#xe7e9;</div>
133
+ </li>
134
+
135
+ <li class="dib">
136
+ <span class="icon iconfont">&#xe7e8;</span>
137
+ <div class="name">receipt</div>
138
+ <div class="code-name">&amp;#xe7e8;</div>
139
+ </li>
140
+
141
+ <li class="dib">
142
+ <span class="icon iconfont">&#xe7e0;</span>
143
+ <div class="name">shield-check</div>
144
+ <div class="code-name">&amp;#xe7e0;</div>
145
+ </li>
146
+
147
+ <li class="dib">
148
+ <span class="icon iconfont">&#xe7e1;</span>
149
+ <div class="name">id-card</div>
150
+ <div class="code-name">&amp;#xe7e1;</div>
151
+ </li>
152
+
153
+ <li class="dib">
154
+ <span class="icon iconfont">&#xe7e2;</span>
155
+ <div class="name">user-round</div>
156
+ <div class="code-name">&amp;#xe7e2;</div>
157
+ </li>
158
+
159
+ <li class="dib">
160
+ <span class="icon iconfont">&#xe7e3;</span>
161
+ <div class="name">log-out</div>
162
+ <div class="code-name">&amp;#xe7e3;</div>
163
+ </li>
164
+
165
+ <li class="dib">
166
+ <span class="icon iconfont">&#xe7e4;</span>
167
+ <div class="name">arrow-right-left</div>
168
+ <div class="code-name">&amp;#xe7e4;</div>
169
+ </li>
170
+
171
+ <li class="dib">
172
+ <span class="icon iconfont">&#xe7e5;</span>
173
+ <div class="name">clipboard-minus</div>
174
+ <div class="code-name">&amp;#xe7e5;</div>
175
+ </li>
176
+
177
+ <li class="dib">
178
+ <span class="icon iconfont">&#xe7e6;</span>
179
+ <div class="name">chart-pie</div>
180
+ <div class="code-name">&amp;#xe7e6;</div>
181
+ </li>
182
+
183
+ <li class="dib">
184
+ <span class="icon iconfont">&#xe7de;</span>
185
+ <div class="name">receipt-text</div>
186
+ <div class="code-name">&amp;#xe7de;</div>
187
+ </li>
188
+
189
+ <li class="dib">
190
+ <span class="icon iconfont">&#xe7dc;</span>
191
+ <div class="name">brush-cleaning</div>
192
+ <div class="code-name">&amp;#xe7dc;</div>
193
+ </li>
194
+
195
+ <li class="dib">
196
+ <span class="icon iconfont">&#xe7db;</span>
197
+ <div class="name">arrow-down-to-line</div>
198
+ <div class="code-name">&amp;#xe7db;</div>
199
+ </li>
200
+
201
+ <li class="dib">
202
+ <span class="icon iconfont">&#xe7da;</span>
203
+ <div class="name">circle-check-filled</div>
204
+ <div class="code-name">&amp;#xe7da;</div>
205
+ </li>
206
+
207
+ <li class="dib">
208
+ <span class="icon iconfont">&#xe7d9;</span>
209
+ <div class="name">square-check</div>
210
+ <div class="code-name">&amp;#xe7d9;</div>
211
+ </li>
212
+
213
+ <li class="dib">
214
+ <span class="icon iconfont">&#xe7d8;</span>
215
+ <div class="name">square-check-empty</div>
216
+ <div class="code-name">&amp;#xe7d8;</div>
217
+ </li>
218
+
219
+ <li class="dib">
220
+ <span class="icon iconfont">&#xe7d7;</span>
221
+ <div class="name">photosolid</div>
222
+ <div class="code-name">&amp;#xe7d7;</div>
223
+ </li>
224
+
225
+ <li class="dib">
226
+ <span class="icon iconfont">&#xe7d6;</span>
227
+ <div class="name">customized</div>
228
+ <div class="code-name">&amp;#xe7d6;</div>
229
+ </li>
230
+
231
+ <li class="dib">
232
+ <span class="icon iconfont">&#xe7d5;</span>
233
+ <div class="name">customize-newspaper</div>
234
+ <div class="code-name">&amp;#xe7d5;</div>
235
+ </li>
236
+
237
+ <li class="dib">
238
+ <span class="icon iconfont">&#xe7d4;</span>
239
+ <div class="name">bell-ring</div>
240
+ <div class="code-name">&amp;#xe7d4;</div>
241
+ </li>
242
+
243
+ <li class="dib">
244
+ <span class="icon iconfont">&#xe7d3;</span>
245
+ <div class="name">eye</div>
246
+ <div class="code-name">&amp;#xe7d3;</div>
247
+ </li>
248
+
249
+ <li class="dib">
250
+ <span class="icon iconfont">&#xe7c7;</span>
251
+ <div class="name">bitcoin-convert</div>
252
+ <div class="code-name">&amp;#xe7c7;</div>
253
+ </li>
254
+
255
+ <li class="dib">
256
+ <span class="icon iconfont">&#xe7cd;</span>
257
+ <div class="name">ellipsis-vertical</div>
258
+ <div class="code-name">&amp;#xe7cd;</div>
259
+ </li>
260
+
261
+ <li class="dib">
262
+ <span class="icon iconfont">&#xe7ce;</span>
263
+ <div class="name">circle-help</div>
264
+ <div class="code-name">&amp;#xe7ce;</div>
265
+ </li>
266
+
267
+ <li class="dib">
268
+ <span class="icon iconfont">&#xe7cf;</span>
269
+ <div class="name">gift</div>
270
+ <div class="code-name">&amp;#xe7cf;</div>
271
+ </li>
272
+
273
+ <li class="dib">
274
+ <span class="icon iconfont">&#xe7d0;</span>
275
+ <div class="name">circle</div>
276
+ <div class="code-name">&amp;#xe7d0;</div>
277
+ </li>
278
+
279
+ <li class="dib">
280
+ <span class="icon iconfont">&#xe7d1;</span>
281
+ <div class="name">circle-dollar-sign</div>
282
+ <div class="code-name">&amp;#xe7d1;</div>
283
+ </li>
284
+
285
+ <li class="dib">
286
+ <span class="icon iconfont">&#xe7d2;</span>
287
+ <div class="name">chrome</div>
288
+ <div class="code-name">&amp;#xe7d2;</div>
289
+ </li>
290
+
291
+ <li class="dib">
292
+ <span class="icon iconfont">&#xe7b3;</span>
293
+ <div class="name">alarm</div>
294
+ <div class="code-name">&amp;#xe7b3;</div>
295
+ </li>
296
+
297
+ <li class="dib">
298
+ <span class="icon iconfont">&#xe7b4;</span>
299
+ <div class="name">refresh-cw</div>
300
+ <div class="code-name">&amp;#xe7b4;</div>
301
+ </li>
302
+
303
+ <li class="dib">
304
+ <span class="icon iconfont">&#xe7b5;</span>
305
+ <div class="name">search</div>
306
+ <div class="code-name">&amp;#xe7b5;</div>
307
+ </li>
308
+
309
+ <li class="dib">
310
+ <span class="icon iconfont">&#xe7b6;</span>
311
+ <div class="name">alert-circle</div>
312
+ <div class="code-name">&amp;#xe7b6;</div>
313
+ </li>
314
+
315
+ <li class="dib">
316
+ <span class="icon iconfont">&#xe7b7;</span>
317
+ <div class="name">graph-filled</div>
318
+ <div class="code-name">&amp;#xe7b7;</div>
319
+ </li>
320
+
321
+ <li class="dib">
322
+ <span class="icon iconfont">&#xe7b8;</span>
323
+ <div class="name">star-filled</div>
324
+ <div class="code-name">&amp;#xe7b8;</div>
325
+ </li>
326
+
327
+ <li class="dib">
328
+ <span class="icon iconfont">&#xe7b9;</span>
329
+ <div class="name">lucide-x</div>
330
+ <div class="code-name">&amp;#xe7b9;</div>
331
+ </li>
332
+
333
+ <li class="dib">
334
+ <span class="icon iconfont">&#xe7ba;</span>
335
+ <div class="name">plus</div>
336
+ <div class="code-name">&amp;#xe7ba;</div>
337
+ </li>
338
+
339
+ <li class="dib">
340
+ <span class="icon iconfont">&#xe7bb;</span>
341
+ <div class="name">map-pin</div>
342
+ <div class="code-name">&amp;#xe7bb;</div>
343
+ </li>
344
+
345
+ <li class="dib">
346
+ <span class="icon iconfont">&#xe7bc;</span>
347
+ <div class="name">loader-circle</div>
348
+ <div class="code-name">&amp;#xe7bc;</div>
349
+ </li>
350
+
351
+ <li class="dib">
352
+ <span class="icon iconfont">&#xe7bd;</span>
353
+ <div class="name">image</div>
354
+ <div class="code-name">&amp;#xe7bd;</div>
355
+ </li>
356
+
357
+ <li class="dib">
358
+ <span class="icon iconfont">&#xe7be;</span>
359
+ <div class="name">lucide-image</div>
360
+ <div class="code-name">&amp;#xe7be;</div>
361
+ </li>
362
+
363
+ <li class="dib">
364
+ <span class="icon iconfont">&#xe7bf;</span>
365
+ <div class="name">lucide-history</div>
366
+ <div class="code-name">&amp;#xe7bf;</div>
367
+ </li>
368
+
369
+ <li class="dib">
370
+ <span class="icon iconfont">&#xe7c0;</span>
371
+ <div class="name">key-round</div>
372
+ <div class="code-name">&amp;#xe7c0;</div>
373
+ </li>
374
+
375
+ <li class="dib">
376
+ <span class="icon iconfont">&#xe7c1;</span>
377
+ <div class="name">copy</div>
378
+ <div class="code-name">&amp;#xe7c1;</div>
379
+ </li>
380
+
381
+ <li class="dib">
382
+ <span class="icon iconfont">&#xe7c2;</span>
383
+ <div class="name">headset</div>
384
+ <div class="code-name">&amp;#xe7c2;</div>
385
+ </li>
386
+
387
+ <li class="dib">
388
+ <span class="icon iconfont">&#xe7c3;</span>
389
+ <div class="name">circle-x</div>
390
+ <div class="code-name">&amp;#xe7c3;</div>
391
+ </li>
392
+
393
+ <li class="dib">
394
+ <span class="icon iconfont">&#xe7c4;</span>
395
+ <div class="name">circle-user</div>
396
+ <div class="code-name">&amp;#xe7c4;</div>
397
+ </li>
398
+
399
+ <li class="dib">
400
+ <span class="icon iconfont">&#xe7c5;</span>
401
+ <div class="name">globe</div>
402
+ <div class="code-name">&amp;#xe7c5;</div>
403
+ </li>
404
+
405
+ <li class="dib">
406
+ <span class="icon iconfont">&#xe7c6;</span>
407
+ <div class="name">compass</div>
408
+ <div class="code-name">&amp;#xe7c6;</div>
409
+ </li>
410
+
411
+ <li class="dib">
412
+ <span class="icon iconfont">&#xe7c8;</span>
413
+ <div class="name">eye-off</div>
414
+ <div class="code-name">&amp;#xe7c8;</div>
415
+ </li>
416
+
417
+ <li class="dib">
418
+ <span class="icon iconfont">&#xe7c9;</span>
419
+ <div class="name">layout-grid</div>
420
+ <div class="code-name">&amp;#xe7c9;</div>
421
+ </li>
422
+
423
+ <li class="dib">
424
+ <span class="icon iconfont">&#xe7ca;</span>
425
+ <div class="name">heart-handshake</div>
426
+ <div class="code-name">&amp;#xe7ca;</div>
427
+ </li>
428
+
429
+ <li class="dib">
430
+ <span class="icon iconfont">&#xe7cb;</span>
431
+ <div class="name">credit-card</div>
432
+ <div class="code-name">&amp;#xe7cb;</div>
433
+ </li>
434
+
435
+ <li class="dib">
436
+ <span class="icon iconfont">&#xe7cc;</span>
437
+ <div class="name">earth</div>
438
+ <div class="code-name">&amp;#xe7cc;</div>
439
+ </li>
440
+
441
+ <li class="dib">
442
+ <span class="icon iconfont">&#xe7a3;</span>
443
+ <div class="name">linear-trash</div>
444
+ <div class="code-name">&amp;#xe7a3;</div>
445
+ </li>
446
+
447
+ <li class="dib">
448
+ <span class="icon iconfont">&#xe7a4;</span>
449
+ <div class="name">icon-kfckfc</div>
450
+ <div class="code-name">&amp;#xe7a4;</div>
451
+ </li>
452
+
453
+ <li class="dib">
454
+ <span class="icon iconfont">&#xe7a5;</span>
455
+ <div class="name">pig-money</div>
456
+ <div class="code-name">&amp;#xe7a5;</div>
457
+ </li>
458
+
459
+ <li class="dib">
460
+ <span class="icon iconfont">&#xe7a6;</span>
461
+ <div class="name">wallet-filled</div>
462
+ <div class="code-name">&amp;#xe7a6;</div>
463
+ </li>
464
+
465
+ <li class="dib">
466
+ <span class="icon iconfont">&#xe7a7;</span>
467
+ <div class="name">star-outline</div>
468
+ <div class="code-name">&amp;#xe7a7;</div>
469
+ </li>
470
+
471
+ <li class="dib">
472
+ <span class="icon iconfont">&#xe7a8;</span>
473
+ <div class="name">trending-up-down</div>
474
+ <div class="code-name">&amp;#xe7a8;</div>
475
+ </li>
476
+
477
+ <li class="dib">
478
+ <span class="icon iconfont">&#xe7a9;</span>
479
+ <div class="name">monitor</div>
480
+ <div class="code-name">&amp;#xe7a9;</div>
481
+ </li>
482
+
483
+ <li class="dib">
484
+ <span class="icon iconfont">&#xe7aa;</span>
485
+ <div class="name">graph-outline</div>
486
+ <div class="code-name">&amp;#xe7aa;</div>
487
+ </li>
488
+
489
+ <li class="dib">
490
+ <span class="icon iconfont">&#xe7ab;</span>
491
+ <div class="name">home-filled</div>
492
+ <div class="code-name">&amp;#xe7ab;</div>
493
+ </li>
494
+
495
+ <li class="dib">
496
+ <span class="icon iconfont">&#xe7ac;</span>
497
+ <div class="name">lucidecoins</div>
498
+ <div class="code-name">&amp;#xe7ac;</div>
499
+ </li>
500
+
501
+ <li class="dib">
502
+ <span class="icon iconfont">&#xe7ad;</span>
503
+ <div class="name">square-pen</div>
504
+ <div class="code-name">&amp;#xe7ad;</div>
505
+ </li>
506
+
507
+ <li class="dib">
508
+ <span class="icon iconfont">&#xe7ae;</span>
509
+ <div class="name">adjustments-horizontal</div>
510
+ <div class="code-name">&amp;#xe7ae;</div>
511
+ </li>
512
+
513
+ <li class="dib">
514
+ <span class="icon iconfont">&#xe7af;</span>
515
+ <div class="name">home-outline</div>
516
+ <div class="code-name">&amp;#xe7af;</div>
517
+ </li>
518
+
519
+ <li class="dib">
520
+ <span class="icon iconfont">&#xe7b0;</span>
521
+ <div class="name">user-cog</div>
522
+ <div class="code-name">&amp;#xe7b0;</div>
523
+ </li>
524
+
525
+ <li class="dib">
526
+ <span class="icon iconfont">&#xe7b1;</span>
527
+ <div class="name">minus</div>
528
+ <div class="code-name">&amp;#xe7b1;</div>
529
+ </li>
530
+
531
+ <li class="dib">
532
+ <span class="icon iconfont">&#xe7b2;</span>
533
+ <div class="name">circle-check</div>
534
+ <div class="code-name">&amp;#xe7b2;</div>
535
+ </li>
536
+
537
+ <li class="dib">
538
+ <span class="icon iconfont">&#xe7a2;</span>
539
+ <div class="name">customize-speakerphone</div>
540
+ <div class="code-name">&amp;#xe7a2;</div>
541
+ </li>
542
+
543
+ <li class="dib">
544
+ <span class="icon iconfont">&#xe797;</span>
545
+ <div class="name">book-open-text</div>
546
+ <div class="code-name">&amp;#xe797;</div>
547
+ </li>
548
+
549
+ <li class="dib">
550
+ <span class="icon iconfont">&#xe798;</span>
551
+ <div class="name">bitcoin-convert-filled</div>
552
+ <div class="code-name">&amp;#xe798;</div>
553
+ </li>
554
+
555
+ <li class="dib">
556
+ <span class="icon iconfont">&#xe799;</span>
557
+ <div class="name">calendar-clock</div>
558
+ <div class="code-name">&amp;#xe799;</div>
559
+ </li>
560
+
561
+ <li class="dib">
562
+ <span class="icon iconfont">&#xe79a;</span>
563
+ <div class="name">check</div>
564
+ <div class="code-name">&amp;#xe79a;</div>
565
+ </li>
566
+
567
+ <li class="dib">
568
+ <span class="icon iconfont">&#xe79b;</span>
569
+ <div class="name">repeat-circle</div>
570
+ <div class="code-name">&amp;#xe79b;</div>
571
+ </li>
572
+
573
+ <li class="dib">
574
+ <span class="icon iconfont">&#xe79c;</span>
575
+ <div class="name">chevron-up</div>
576
+ <div class="code-name">&amp;#xe79c;</div>
577
+ </li>
578
+
579
+ <li class="dib">
580
+ <span class="icon iconfont">&#xe790;</span>
581
+ <div class="name">customize-safe</div>
582
+ <div class="code-name">&amp;#xe790;</div>
583
+ </li>
584
+
585
+ <li class="dib">
586
+ <span class="icon iconfont">&#xe79d;</span>
587
+ <div class="name">chevron-right</div>
588
+ <div class="code-name">&amp;#xe79d;</div>
589
+ </li>
590
+
591
+ <li class="dib">
592
+ <span class="icon iconfont">&#xe79e;</span>
593
+ <div class="name">bitcoin-convert-utline</div>
594
+ <div class="code-name">&amp;#xe79e;</div>
595
+ </li>
596
+
597
+ <li class="dib">
598
+ <span class="icon iconfont">&#xe7a0;</span>
599
+ <div class="name">arrow-left-right</div>
600
+ <div class="code-name">&amp;#xe7a0;</div>
601
+ </li>
602
+
603
+ <li class="dib">
604
+ <span class="icon iconfont">&#xe7a1;</span>
605
+ <div class="name">customize</div>
606
+ <div class="code-name">&amp;#xe7a1;</div>
607
+ </li>
608
+
609
+ <li class="dib">
610
+ <span class="icon iconfont">&#xe794;</span>
611
+ <div class="name">lucide-check</div>
612
+ <div class="code-name">&amp;#xe794;</div>
613
+ </li>
614
+
615
+ <li class="dib">
616
+ <span class="icon iconfont">&#xe793;</span>
617
+ <div class="name">arrow-down-narrow-wide</div>
618
+ <div class="code-name">&amp;#xe793;</div>
619
+ </li>
620
+
621
+ <li class="dib">
622
+ <span class="icon iconfont">&#xe791;</span>
623
+ <div class="name">money-send</div>
624
+ <div class="code-name">&amp;#xe791;</div>
625
+ </li>
626
+
627
+ <li class="dib">
628
+ <span class="icon iconfont">&#xe792;</span>
629
+ <div class="name">chevron-left</div>
630
+ <div class="code-name">&amp;#xe792;</div>
631
+ </li>
632
+
633
+ <li class="dib">
634
+ <span class="icon iconfont">&#xe796;</span>
635
+ <div class="name">chevron-down</div>
636
+ <div class="code-name">&amp;#xe796;</div>
637
+ </li>
638
+
639
+ </ul>
640
+ <div class="article markdown">
641
+ <h2 id="unicode-">Unicode 引用</h2>
642
+ <hr>
643
+
644
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
645
+ <ul>
646
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
647
+ <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
648
+ </ul>
649
+ <blockquote>
650
+ <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
651
+ </blockquote>
652
+ <p>Unicode 使用步骤如下：</p>
653
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
654
+ <pre><code class="language-css"
655
+ >@font-face {
656
+ font-family: 'iconfont';
657
+ src: url('iconfont.woff2?t=1759047647370') format('woff2'),
658
+ url('iconfont.woff?t=1759047647370') format('woff'),
659
+ url('iconfont.ttf?t=1759047647370') format('truetype');
660
+ }
661
+ </code></pre>
662
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
663
+ <pre><code class="language-css"
664
+ >.iconfont {
665
+ font-family: "iconfont" !important;
666
+ font-size: 16px;
667
+ font-style: normal;
668
+ -webkit-font-smoothing: antialiased;
669
+ -moz-osx-font-smoothing: grayscale;
670
+ }
671
+ </code></pre>
672
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
673
+ <pre>
674
+ <code class="language-html"
675
+ >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
676
+ </code></pre>
677
+ <blockquote>
678
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
679
+ </blockquote>
680
+ </div>
681
+ </div>
682
+ <div class="content font-class">
683
+ <ul class="icon_lists dib-box">
684
+
685
+ <li class="dib">
686
+ <span class="icon iconfont icon-a-lucide_loader1"></span>
687
+ <div class="name">
688
+ lucide_loader 1
689
+ </div>
690
+ <div class="code-name">.icon-a-lucide_loader1
691
+ </div>
692
+ </li>
693
+
694
+ <li class="dib">
695
+ <span class="icon iconfont icon-lucide_circle-x-filled"></span>
696
+ <div class="name">
697
+ lucide_circle-x-filled
698
+ </div>
699
+ <div class="code-name">.icon-lucide_circle-x-filled
700
+ </div>
701
+ </li>
702
+
703
+ <li class="dib">
704
+ <span class="icon iconfont icon-a-lucide_user-round-plus1"></span>
705
+ <div class="name">
706
+ lucide_user-round-plus 1
707
+ </div>
708
+ <div class="code-name">.icon-a-lucide_user-round-plus1
709
+ </div>
710
+ </li>
711
+
712
+ <li class="dib">
713
+ <span class="icon iconfont icon-a-lucide_file-check1"></span>
714
+ <div class="name">
715
+ lucide_file-check 1
716
+ </div>
717
+ <div class="code-name">.icon-a-lucide_file-check1
718
+ </div>
719
+ </li>
720
+
721
+ <li class="dib">
722
+ <span class="icon iconfont icon-a-lucide_external-link1"></span>
723
+ <div class="name">
724
+ lucide_external-link 1
725
+ </div>
726
+ <div class="code-name">.icon-a-lucide_external-link1
727
+ </div>
728
+ </li>
729
+
730
+ <li class="dib">
731
+ <span class="icon iconfont icon-a-iconsax_google1"></span>
732
+ <div class="name">
733
+ iconsax_google 1
734
+ </div>
735
+ <div class="code-name">.icon-a-iconsax_google1
736
+ </div>
737
+ </li>
738
+
739
+ <li class="dib">
740
+ <span class="icon iconfont icon-lucide_megaphone"></span>
741
+ <div class="name">
742
+ lucide_megaphone
743
+ </div>
744
+ <div class="code-name">.icon-lucide_megaphone
745
+ </div>
746
+ </li>
747
+
748
+ <li class="dib">
749
+ <span class="icon iconfont icon-lucide_mail"></span>
750
+ <div class="name">
751
+ lucide_mail
752
+ </div>
753
+ <div class="code-name">.icon-lucide_mail
754
+ </div>
755
+ </li>
756
+
757
+ <li class="dib">
758
+ <span class="icon iconfont icon-lucide_smartphone"></span>
759
+ <div class="name">
760
+ lucide_smartphone
761
+ </div>
762
+ <div class="code-name">.icon-lucide_smartphone
763
+ </div>
764
+ </li>
765
+
766
+ <li class="dib">
767
+ <span class="icon iconfont icon-lucide_user"></span>
768
+ <div class="name">
769
+ lucide_user
770
+ </div>
771
+ <div class="code-name">.icon-lucide_user
772
+ </div>
773
+ </li>
774
+
775
+ <li class="dib">
776
+ <span class="icon iconfont icon-withdraw"></span>
777
+ <div class="name">
778
+ withdraw
779
+ </div>
780
+ <div class="code-name">.icon-withdraw
781
+ </div>
782
+ </li>
783
+
784
+ <li class="dib">
785
+ <span class="icon iconfont icon-deposit"></span>
786
+ <div class="name">
787
+ deposit
788
+ </div>
789
+ <div class="code-name">.icon-deposit
790
+ </div>
791
+ </li>
792
+
793
+ <li class="dib">
794
+ <span class="icon iconfont icon-switch-camera"></span>
795
+ <div class="name">
796
+ switch-camera
797
+ </div>
798
+ <div class="code-name">.icon-switch-camera
799
+ </div>
800
+ </li>
801
+
802
+ <li class="dib">
803
+ <span class="icon iconfont icon-receipt"></span>
804
+ <div class="name">
805
+ receipt
806
+ </div>
807
+ <div class="code-name">.icon-receipt
808
+ </div>
809
+ </li>
810
+
811
+ <li class="dib">
812
+ <span class="icon iconfont icon-shield-check"></span>
813
+ <div class="name">
814
+ shield-check
815
+ </div>
816
+ <div class="code-name">.icon-shield-check
817
+ </div>
818
+ </li>
819
+
820
+ <li class="dib">
821
+ <span class="icon iconfont icon-id-card"></span>
822
+ <div class="name">
823
+ id-card
824
+ </div>
825
+ <div class="code-name">.icon-id-card
826
+ </div>
827
+ </li>
828
+
829
+ <li class="dib">
830
+ <span class="icon iconfont icon-user-round"></span>
831
+ <div class="name">
832
+ user-round
833
+ </div>
834
+ <div class="code-name">.icon-user-round
835
+ </div>
836
+ </li>
837
+
838
+ <li class="dib">
839
+ <span class="icon iconfont icon-log-out"></span>
840
+ <div class="name">
841
+ log-out
842
+ </div>
843
+ <div class="code-name">.icon-log-out
844
+ </div>
845
+ </li>
846
+
847
+ <li class="dib">
848
+ <span class="icon iconfont icon-arrow-right-left"></span>
849
+ <div class="name">
850
+ arrow-right-left
851
+ </div>
852
+ <div class="code-name">.icon-arrow-right-left
853
+ </div>
854
+ </li>
855
+
856
+ <li class="dib">
857
+ <span class="icon iconfont icon-clipboard-minus"></span>
858
+ <div class="name">
859
+ clipboard-minus
860
+ </div>
861
+ <div class="code-name">.icon-clipboard-minus
862
+ </div>
863
+ </li>
864
+
865
+ <li class="dib">
866
+ <span class="icon iconfont icon-chart-pie"></span>
867
+ <div class="name">
868
+ chart-pie
869
+ </div>
870
+ <div class="code-name">.icon-chart-pie
871
+ </div>
872
+ </li>
873
+
874
+ <li class="dib">
875
+ <span class="icon iconfont icon-receipt-text"></span>
876
+ <div class="name">
877
+ receipt-text
878
+ </div>
879
+ <div class="code-name">.icon-receipt-text
880
+ </div>
881
+ </li>
882
+
883
+ <li class="dib">
884
+ <span class="icon iconfont icon-brush-cleaning"></span>
885
+ <div class="name">
886
+ brush-cleaning
887
+ </div>
888
+ <div class="code-name">.icon-brush-cleaning
889
+ </div>
890
+ </li>
891
+
892
+ <li class="dib">
893
+ <span class="icon iconfont icon-arrow-down-to-line"></span>
894
+ <div class="name">
895
+ arrow-down-to-line
896
+ </div>
897
+ <div class="code-name">.icon-arrow-down-to-line
898
+ </div>
899
+ </li>
900
+
901
+ <li class="dib">
902
+ <span class="icon iconfont icon-circle-check-filled"></span>
903
+ <div class="name">
904
+ circle-check-filled
905
+ </div>
906
+ <div class="code-name">.icon-circle-check-filled
907
+ </div>
908
+ </li>
909
+
910
+ <li class="dib">
911
+ <span class="icon iconfont icon-square-check"></span>
912
+ <div class="name">
913
+ square-check
914
+ </div>
915
+ <div class="code-name">.icon-square-check
916
+ </div>
917
+ </li>
918
+
919
+ <li class="dib">
920
+ <span class="icon iconfont icon-square-check-empty"></span>
921
+ <div class="name">
922
+ square-check-empty
923
+ </div>
924
+ <div class="code-name">.icon-square-check-empty
925
+ </div>
926
+ </li>
927
+
928
+ <li class="dib">
929
+ <span class="icon iconfont icon-photosolid"></span>
930
+ <div class="name">
931
+ photosolid
932
+ </div>
933
+ <div class="code-name">.icon-photosolid
934
+ </div>
935
+ </li>
936
+
937
+ <li class="dib">
938
+ <span class="icon iconfont icon-customized"></span>
939
+ <div class="name">
940
+ customized
941
+ </div>
942
+ <div class="code-name">.icon-customized
943
+ </div>
944
+ </li>
945
+
946
+ <li class="dib">
947
+ <span class="icon iconfont icon-customize-newspaper"></span>
948
+ <div class="name">
949
+ customize-newspaper
950
+ </div>
951
+ <div class="code-name">.icon-customize-newspaper
952
+ </div>
953
+ </li>
954
+
955
+ <li class="dib">
956
+ <span class="icon iconfont icon-bell-ring"></span>
957
+ <div class="name">
958
+ bell-ring
959
+ </div>
960
+ <div class="code-name">.icon-bell-ring
961
+ </div>
962
+ </li>
963
+
964
+ <li class="dib">
965
+ <span class="icon iconfont icon-eye"></span>
966
+ <div class="name">
967
+ eye
968
+ </div>
969
+ <div class="code-name">.icon-eye
970
+ </div>
971
+ </li>
972
+
973
+ <li class="dib">
974
+ <span class="icon iconfont icon-bitcoin-convert"></span>
975
+ <div class="name">
976
+ bitcoin-convert
977
+ </div>
978
+ <div class="code-name">.icon-bitcoin-convert
979
+ </div>
980
+ </li>
981
+
982
+ <li class="dib">
983
+ <span class="icon iconfont icon-ellipsis-vertical"></span>
984
+ <div class="name">
985
+ ellipsis-vertical
986
+ </div>
987
+ <div class="code-name">.icon-ellipsis-vertical
988
+ </div>
989
+ </li>
990
+
991
+ <li class="dib">
992
+ <span class="icon iconfont icon-circle-help"></span>
993
+ <div class="name">
994
+ circle-help
995
+ </div>
996
+ <div class="code-name">.icon-circle-help
997
+ </div>
998
+ </li>
999
+
1000
+ <li class="dib">
1001
+ <span class="icon iconfont icon-gift"></span>
1002
+ <div class="name">
1003
+ gift
1004
+ </div>
1005
+ <div class="code-name">.icon-gift
1006
+ </div>
1007
+ </li>
1008
+
1009
+ <li class="dib">
1010
+ <span class="icon iconfont icon-circle"></span>
1011
+ <div class="name">
1012
+ circle
1013
+ </div>
1014
+ <div class="code-name">.icon-circle
1015
+ </div>
1016
+ </li>
1017
+
1018
+ <li class="dib">
1019
+ <span class="icon iconfont icon-circle-dollar-sign"></span>
1020
+ <div class="name">
1021
+ circle-dollar-sign
1022
+ </div>
1023
+ <div class="code-name">.icon-circle-dollar-sign
1024
+ </div>
1025
+ </li>
1026
+
1027
+ <li class="dib">
1028
+ <span class="icon iconfont icon-chrome"></span>
1029
+ <div class="name">
1030
+ chrome
1031
+ </div>
1032
+ <div class="code-name">.icon-chrome
1033
+ </div>
1034
+ </li>
1035
+
1036
+ <li class="dib">
1037
+ <span class="icon iconfont icon-alarm"></span>
1038
+ <div class="name">
1039
+ alarm
1040
+ </div>
1041
+ <div class="code-name">.icon-alarm
1042
+ </div>
1043
+ </li>
1044
+
1045
+ <li class="dib">
1046
+ <span class="icon iconfont icon-refresh-cw"></span>
1047
+ <div class="name">
1048
+ refresh-cw
1049
+ </div>
1050
+ <div class="code-name">.icon-refresh-cw
1051
+ </div>
1052
+ </li>
1053
+
1054
+ <li class="dib">
1055
+ <span class="icon iconfont icon-search"></span>
1056
+ <div class="name">
1057
+ search
1058
+ </div>
1059
+ <div class="code-name">.icon-search
1060
+ </div>
1061
+ </li>
1062
+
1063
+ <li class="dib">
1064
+ <span class="icon iconfont icon-alert-circle"></span>
1065
+ <div class="name">
1066
+ alert-circle
1067
+ </div>
1068
+ <div class="code-name">.icon-alert-circle
1069
+ </div>
1070
+ </li>
1071
+
1072
+ <li class="dib">
1073
+ <span class="icon iconfont icon-graph-filled"></span>
1074
+ <div class="name">
1075
+ graph-filled
1076
+ </div>
1077
+ <div class="code-name">.icon-graph-filled
1078
+ </div>
1079
+ </li>
1080
+
1081
+ <li class="dib">
1082
+ <span class="icon iconfont icon-star-filled"></span>
1083
+ <div class="name">
1084
+ star-filled
1085
+ </div>
1086
+ <div class="code-name">.icon-star-filled
1087
+ </div>
1088
+ </li>
1089
+
1090
+ <li class="dib">
1091
+ <span class="icon iconfont icon-lucide-x"></span>
1092
+ <div class="name">
1093
+ lucide-x
1094
+ </div>
1095
+ <div class="code-name">.icon-lucide-x
1096
+ </div>
1097
+ </li>
1098
+
1099
+ <li class="dib">
1100
+ <span class="icon iconfont icon-plus"></span>
1101
+ <div class="name">
1102
+ plus
1103
+ </div>
1104
+ <div class="code-name">.icon-plus
1105
+ </div>
1106
+ </li>
1107
+
1108
+ <li class="dib">
1109
+ <span class="icon iconfont icon-map-pin"></span>
1110
+ <div class="name">
1111
+ map-pin
1112
+ </div>
1113
+ <div class="code-name">.icon-map-pin
1114
+ </div>
1115
+ </li>
1116
+
1117
+ <li class="dib">
1118
+ <span class="icon iconfont icon-loader-circle"></span>
1119
+ <div class="name">
1120
+ loader-circle
1121
+ </div>
1122
+ <div class="code-name">.icon-loader-circle
1123
+ </div>
1124
+ </li>
1125
+
1126
+ <li class="dib">
1127
+ <span class="icon iconfont icon-image"></span>
1128
+ <div class="name">
1129
+ image
1130
+ </div>
1131
+ <div class="code-name">.icon-image
1132
+ </div>
1133
+ </li>
1134
+
1135
+ <li class="dib">
1136
+ <span class="icon iconfont icon-lucide-image"></span>
1137
+ <div class="name">
1138
+ lucide-image
1139
+ </div>
1140
+ <div class="code-name">.icon-lucide-image
1141
+ </div>
1142
+ </li>
1143
+
1144
+ <li class="dib">
1145
+ <span class="icon iconfont icon-lucide-history"></span>
1146
+ <div class="name">
1147
+ lucide-history
1148
+ </div>
1149
+ <div class="code-name">.icon-lucide-history
1150
+ </div>
1151
+ </li>
1152
+
1153
+ <li class="dib">
1154
+ <span class="icon iconfont icon-key-round"></span>
1155
+ <div class="name">
1156
+ key-round
1157
+ </div>
1158
+ <div class="code-name">.icon-key-round
1159
+ </div>
1160
+ </li>
1161
+
1162
+ <li class="dib">
1163
+ <span class="icon iconfont icon-copy"></span>
1164
+ <div class="name">
1165
+ copy
1166
+ </div>
1167
+ <div class="code-name">.icon-copy
1168
+ </div>
1169
+ </li>
1170
+
1171
+ <li class="dib">
1172
+ <span class="icon iconfont icon-headset"></span>
1173
+ <div class="name">
1174
+ headset
1175
+ </div>
1176
+ <div class="code-name">.icon-headset
1177
+ </div>
1178
+ </li>
1179
+
1180
+ <li class="dib">
1181
+ <span class="icon iconfont icon-circle-x"></span>
1182
+ <div class="name">
1183
+ circle-x
1184
+ </div>
1185
+ <div class="code-name">.icon-circle-x
1186
+ </div>
1187
+ </li>
1188
+
1189
+ <li class="dib">
1190
+ <span class="icon iconfont icon-circle-user"></span>
1191
+ <div class="name">
1192
+ circle-user
1193
+ </div>
1194
+ <div class="code-name">.icon-circle-user
1195
+ </div>
1196
+ </li>
1197
+
1198
+ <li class="dib">
1199
+ <span class="icon iconfont icon-globe"></span>
1200
+ <div class="name">
1201
+ globe
1202
+ </div>
1203
+ <div class="code-name">.icon-globe
1204
+ </div>
1205
+ </li>
1206
+
1207
+ <li class="dib">
1208
+ <span class="icon iconfont icon-compass"></span>
1209
+ <div class="name">
1210
+ compass
1211
+ </div>
1212
+ <div class="code-name">.icon-compass
1213
+ </div>
1214
+ </li>
1215
+
1216
+ <li class="dib">
1217
+ <span class="icon iconfont icon-eye-off"></span>
1218
+ <div class="name">
1219
+ eye-off
1220
+ </div>
1221
+ <div class="code-name">.icon-eye-off
1222
+ </div>
1223
+ </li>
1224
+
1225
+ <li class="dib">
1226
+ <span class="icon iconfont icon-layout-grid"></span>
1227
+ <div class="name">
1228
+ layout-grid
1229
+ </div>
1230
+ <div class="code-name">.icon-layout-grid
1231
+ </div>
1232
+ </li>
1233
+
1234
+ <li class="dib">
1235
+ <span class="icon iconfont icon-heart-handshake"></span>
1236
+ <div class="name">
1237
+ heart-handshake
1238
+ </div>
1239
+ <div class="code-name">.icon-heart-handshake
1240
+ </div>
1241
+ </li>
1242
+
1243
+ <li class="dib">
1244
+ <span class="icon iconfont icon-credit-card"></span>
1245
+ <div class="name">
1246
+ credit-card
1247
+ </div>
1248
+ <div class="code-name">.icon-credit-card
1249
+ </div>
1250
+ </li>
1251
+
1252
+ <li class="dib">
1253
+ <span class="icon iconfont icon-earth"></span>
1254
+ <div class="name">
1255
+ earth
1256
+ </div>
1257
+ <div class="code-name">.icon-earth
1258
+ </div>
1259
+ </li>
1260
+
1261
+ <li class="dib">
1262
+ <span class="icon iconfont icon-linear-trash"></span>
1263
+ <div class="name">
1264
+ linear-trash
1265
+ </div>
1266
+ <div class="code-name">.icon-linear-trash
1267
+ </div>
1268
+ </li>
1269
+
1270
+ <li class="dib">
1271
+ <span class="icon iconfont icon-tabler_wallet_outline"></span>
1272
+ <div class="name">
1273
+ icon-kfckfc
1274
+ </div>
1275
+ <div class="code-name">.icon-tabler_wallet_outline
1276
+ </div>
1277
+ </li>
1278
+
1279
+ <li class="dib">
1280
+ <span class="icon iconfont icon-pig-money"></span>
1281
+ <div class="name">
1282
+ pig-money
1283
+ </div>
1284
+ <div class="code-name">.icon-pig-money
1285
+ </div>
1286
+ </li>
1287
+
1288
+ <li class="dib">
1289
+ <span class="icon iconfont icon-wallet-filled"></span>
1290
+ <div class="name">
1291
+ wallet-filled
1292
+ </div>
1293
+ <div class="code-name">.icon-wallet-filled
1294
+ </div>
1295
+ </li>
1296
+
1297
+ <li class="dib">
1298
+ <span class="icon iconfont icon-star-outline"></span>
1299
+ <div class="name">
1300
+ star-outline
1301
+ </div>
1302
+ <div class="code-name">.icon-star-outline
1303
+ </div>
1304
+ </li>
1305
+
1306
+ <li class="dib">
1307
+ <span class="icon iconfont icon-trending-up-down"></span>
1308
+ <div class="name">
1309
+ trending-up-down
1310
+ </div>
1311
+ <div class="code-name">.icon-trending-up-down
1312
+ </div>
1313
+ </li>
1314
+
1315
+ <li class="dib">
1316
+ <span class="icon iconfont icon-monitor"></span>
1317
+ <div class="name">
1318
+ monitor
1319
+ </div>
1320
+ <div class="code-name">.icon-monitor
1321
+ </div>
1322
+ </li>
1323
+
1324
+ <li class="dib">
1325
+ <span class="icon iconfont icon-graph-outline"></span>
1326
+ <div class="name">
1327
+ graph-outline
1328
+ </div>
1329
+ <div class="code-name">.icon-graph-outline
1330
+ </div>
1331
+ </li>
1332
+
1333
+ <li class="dib">
1334
+ <span class="icon iconfont icon-home-filled"></span>
1335
+ <div class="name">
1336
+ home-filled
1337
+ </div>
1338
+ <div class="code-name">.icon-home-filled
1339
+ </div>
1340
+ </li>
1341
+
1342
+ <li class="dib">
1343
+ <span class="icon iconfont icon-lucidecoins"></span>
1344
+ <div class="name">
1345
+ lucidecoins
1346
+ </div>
1347
+ <div class="code-name">.icon-lucidecoins
1348
+ </div>
1349
+ </li>
1350
+
1351
+ <li class="dib">
1352
+ <span class="icon iconfont icon-square-pen"></span>
1353
+ <div class="name">
1354
+ square-pen
1355
+ </div>
1356
+ <div class="code-name">.icon-square-pen
1357
+ </div>
1358
+ </li>
1359
+
1360
+ <li class="dib">
1361
+ <span class="icon iconfont icon-adjustments-horizontal"></span>
1362
+ <div class="name">
1363
+ adjustments-horizontal
1364
+ </div>
1365
+ <div class="code-name">.icon-adjustments-horizontal
1366
+ </div>
1367
+ </li>
1368
+
1369
+ <li class="dib">
1370
+ <span class="icon iconfont icon-home-outline"></span>
1371
+ <div class="name">
1372
+ home-outline
1373
+ </div>
1374
+ <div class="code-name">.icon-home-outline
1375
+ </div>
1376
+ </li>
1377
+
1378
+ <li class="dib">
1379
+ <span class="icon iconfont icon-user-cog"></span>
1380
+ <div class="name">
1381
+ user-cog
1382
+ </div>
1383
+ <div class="code-name">.icon-user-cog
1384
+ </div>
1385
+ </li>
1386
+
1387
+ <li class="dib">
1388
+ <span class="icon iconfont icon-minus"></span>
1389
+ <div class="name">
1390
+ minus
1391
+ </div>
1392
+ <div class="code-name">.icon-minus
1393
+ </div>
1394
+ </li>
1395
+
1396
+ <li class="dib">
1397
+ <span class="icon iconfont icon-circle-check"></span>
1398
+ <div class="name">
1399
+ circle-check
1400
+ </div>
1401
+ <div class="code-name">.icon-circle-check
1402
+ </div>
1403
+ </li>
1404
+
1405
+ <li class="dib">
1406
+ <span class="icon iconfont icon-customize-speakerphone"></span>
1407
+ <div class="name">
1408
+ customize-speakerphone
1409
+ </div>
1410
+ <div class="code-name">.icon-customize-speakerphone
1411
+ </div>
1412
+ </li>
1413
+
1414
+ <li class="dib">
1415
+ <span class="icon iconfont icon-book-open-text"></span>
1416
+ <div class="name">
1417
+ book-open-text
1418
+ </div>
1419
+ <div class="code-name">.icon-book-open-text
1420
+ </div>
1421
+ </li>
1422
+
1423
+ <li class="dib">
1424
+ <span class="icon iconfont icon-bitcoin-convert-filled"></span>
1425
+ <div class="name">
1426
+ bitcoin-convert-filled
1427
+ </div>
1428
+ <div class="code-name">.icon-bitcoin-convert-filled
1429
+ </div>
1430
+ </li>
1431
+
1432
+ <li class="dib">
1433
+ <span class="icon iconfont icon-calendar-clock"></span>
1434
+ <div class="name">
1435
+ calendar-clock
1436
+ </div>
1437
+ <div class="code-name">.icon-calendar-clock
1438
+ </div>
1439
+ </li>
1440
+
1441
+ <li class="dib">
1442
+ <span class="icon iconfont icon-check"></span>
1443
+ <div class="name">
1444
+ check
1445
+ </div>
1446
+ <div class="code-name">.icon-check
1447
+ </div>
1448
+ </li>
1449
+
1450
+ <li class="dib">
1451
+ <span class="icon iconfont icon-repeat-circle"></span>
1452
+ <div class="name">
1453
+ repeat-circle
1454
+ </div>
1455
+ <div class="code-name">.icon-repeat-circle
1456
+ </div>
1457
+ </li>
1458
+
1459
+ <li class="dib">
1460
+ <span class="icon iconfont icon-chevron-up"></span>
1461
+ <div class="name">
1462
+ chevron-up
1463
+ </div>
1464
+ <div class="code-name">.icon-chevron-up
1465
+ </div>
1466
+ </li>
1467
+
1468
+ <li class="dib">
1469
+ <span class="icon iconfont icon-customize-safe"></span>
1470
+ <div class="name">
1471
+ customize-safe
1472
+ </div>
1473
+ <div class="code-name">.icon-customize-safe
1474
+ </div>
1475
+ </li>
1476
+
1477
+ <li class="dib">
1478
+ <span class="icon iconfont icon-chevron-right"></span>
1479
+ <div class="name">
1480
+ chevron-right
1481
+ </div>
1482
+ <div class="code-name">.icon-chevron-right
1483
+ </div>
1484
+ </li>
1485
+
1486
+ <li class="dib">
1487
+ <span class="icon iconfont icon-bitcoin-convert-utline"></span>
1488
+ <div class="name">
1489
+ bitcoin-convert-utline
1490
+ </div>
1491
+ <div class="code-name">.icon-bitcoin-convert-utline
1492
+ </div>
1493
+ </li>
1494
+
1495
+ <li class="dib">
1496
+ <span class="icon iconfont icon-arrow-left-right"></span>
1497
+ <div class="name">
1498
+ arrow-left-right
1499
+ </div>
1500
+ <div class="code-name">.icon-arrow-left-right
1501
+ </div>
1502
+ </li>
1503
+
1504
+ <li class="dib">
1505
+ <span class="icon iconfont icon-customize"></span>
1506
+ <div class="name">
1507
+ customize
1508
+ </div>
1509
+ <div class="code-name">.icon-customize
1510
+ </div>
1511
+ </li>
1512
+
1513
+ <li class="dib">
1514
+ <span class="icon iconfont icon-lucide-check"></span>
1515
+ <div class="name">
1516
+ lucide-check
1517
+ </div>
1518
+ <div class="code-name">.icon-lucide-check
1519
+ </div>
1520
+ </li>
1521
+
1522
+ <li class="dib">
1523
+ <span class="icon iconfont icon-arrow-down-narrow-wide"></span>
1524
+ <div class="name">
1525
+ arrow-down-narrow-wide
1526
+ </div>
1527
+ <div class="code-name">.icon-arrow-down-narrow-wide
1528
+ </div>
1529
+ </li>
1530
+
1531
+ <li class="dib">
1532
+ <span class="icon iconfont icon-money-send"></span>
1533
+ <div class="name">
1534
+ money-send
1535
+ </div>
1536
+ <div class="code-name">.icon-money-send
1537
+ </div>
1538
+ </li>
1539
+
1540
+ <li class="dib">
1541
+ <span class="icon iconfont icon-chevron-left"></span>
1542
+ <div class="name">
1543
+ chevron-left
1544
+ </div>
1545
+ <div class="code-name">.icon-chevron-left
1546
+ </div>
1547
+ </li>
1548
+
1549
+ <li class="dib">
1550
+ <span class="icon iconfont icon-chevron-down"></span>
1551
+ <div class="name">
1552
+ chevron-down
1553
+ </div>
1554
+ <div class="code-name">.icon-chevron-down
1555
+ </div>
1556
+ </li>
1557
+
1558
+ </ul>
1559
+ <div class="article markdown">
1560
+ <h2 id="font-class-">font-class 引用</h2>
1561
+ <hr>
1562
+
1563
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
1564
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
1565
+ <ul>
1566
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
1567
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
1568
+ </ul>
1569
+ <p>使用步骤如下：</p>
1570
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
1571
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1572
+ </code></pre>
1573
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1574
+ <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
1575
+ </code></pre>
1576
+ <blockquote>
1577
+ <p>"
1578
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
1579
+ </blockquote>
1580
+ </div>
1581
+ </div>
1582
+ <div class="content symbol">
1583
+ <ul class="icon_lists dib-box">
1584
+
1585
+ <li class="dib">
1586
+ <svg class="icon svg-icon" aria-hidden="true">
1587
+ <use xlink:href="#icon-a-lucide_loader1"></use>
1588
+ </svg>
1589
+ <div class="name">lucide_loader 1</div>
1590
+ <div class="code-name">#icon-a-lucide_loader1</div>
1591
+ </li>
1592
+
1593
+ <li class="dib">
1594
+ <svg class="icon svg-icon" aria-hidden="true">
1595
+ <use xlink:href="#icon-lucide_circle-x-filled"></use>
1596
+ </svg>
1597
+ <div class="name">lucide_circle-x-filled</div>
1598
+ <div class="code-name">#icon-lucide_circle-x-filled</div>
1599
+ </li>
1600
+
1601
+ <li class="dib">
1602
+ <svg class="icon svg-icon" aria-hidden="true">
1603
+ <use xlink:href="#icon-a-lucide_user-round-plus1"></use>
1604
+ </svg>
1605
+ <div class="name">lucide_user-round-plus 1</div>
1606
+ <div class="code-name">#icon-a-lucide_user-round-plus1</div>
1607
+ </li>
1608
+
1609
+ <li class="dib">
1610
+ <svg class="icon svg-icon" aria-hidden="true">
1611
+ <use xlink:href="#icon-a-lucide_file-check1"></use>
1612
+ </svg>
1613
+ <div class="name">lucide_file-check 1</div>
1614
+ <div class="code-name">#icon-a-lucide_file-check1</div>
1615
+ </li>
1616
+
1617
+ <li class="dib">
1618
+ <svg class="icon svg-icon" aria-hidden="true">
1619
+ <use xlink:href="#icon-a-lucide_external-link1"></use>
1620
+ </svg>
1621
+ <div class="name">lucide_external-link 1</div>
1622
+ <div class="code-name">#icon-a-lucide_external-link1</div>
1623
+ </li>
1624
+
1625
+ <li class="dib">
1626
+ <svg class="icon svg-icon" aria-hidden="true">
1627
+ <use xlink:href="#icon-a-iconsax_google1"></use>
1628
+ </svg>
1629
+ <div class="name">iconsax_google 1</div>
1630
+ <div class="code-name">#icon-a-iconsax_google1</div>
1631
+ </li>
1632
+
1633
+ <li class="dib">
1634
+ <svg class="icon svg-icon" aria-hidden="true">
1635
+ <use xlink:href="#icon-lucide_megaphone"></use>
1636
+ </svg>
1637
+ <div class="name">lucide_megaphone</div>
1638
+ <div class="code-name">#icon-lucide_megaphone</div>
1639
+ </li>
1640
+
1641
+ <li class="dib">
1642
+ <svg class="icon svg-icon" aria-hidden="true">
1643
+ <use xlink:href="#icon-lucide_mail"></use>
1644
+ </svg>
1645
+ <div class="name">lucide_mail</div>
1646
+ <div class="code-name">#icon-lucide_mail</div>
1647
+ </li>
1648
+
1649
+ <li class="dib">
1650
+ <svg class="icon svg-icon" aria-hidden="true">
1651
+ <use xlink:href="#icon-lucide_smartphone"></use>
1652
+ </svg>
1653
+ <div class="name">lucide_smartphone</div>
1654
+ <div class="code-name">#icon-lucide_smartphone</div>
1655
+ </li>
1656
+
1657
+ <li class="dib">
1658
+ <svg class="icon svg-icon" aria-hidden="true">
1659
+ <use xlink:href="#icon-lucide_user"></use>
1660
+ </svg>
1661
+ <div class="name">lucide_user</div>
1662
+ <div class="code-name">#icon-lucide_user</div>
1663
+ </li>
1664
+
1665
+ <li class="dib">
1666
+ <svg class="icon svg-icon" aria-hidden="true">
1667
+ <use xlink:href="#icon-withdraw"></use>
1668
+ </svg>
1669
+ <div class="name">withdraw</div>
1670
+ <div class="code-name">#icon-withdraw</div>
1671
+ </li>
1672
+
1673
+ <li class="dib">
1674
+ <svg class="icon svg-icon" aria-hidden="true">
1675
+ <use xlink:href="#icon-deposit"></use>
1676
+ </svg>
1677
+ <div class="name">deposit</div>
1678
+ <div class="code-name">#icon-deposit</div>
1679
+ </li>
1680
+
1681
+ <li class="dib">
1682
+ <svg class="icon svg-icon" aria-hidden="true">
1683
+ <use xlink:href="#icon-switch-camera"></use>
1684
+ </svg>
1685
+ <div class="name">switch-camera</div>
1686
+ <div class="code-name">#icon-switch-camera</div>
1687
+ </li>
1688
+
1689
+ <li class="dib">
1690
+ <svg class="icon svg-icon" aria-hidden="true">
1691
+ <use xlink:href="#icon-receipt"></use>
1692
+ </svg>
1693
+ <div class="name">receipt</div>
1694
+ <div class="code-name">#icon-receipt</div>
1695
+ </li>
1696
+
1697
+ <li class="dib">
1698
+ <svg class="icon svg-icon" aria-hidden="true">
1699
+ <use xlink:href="#icon-shield-check"></use>
1700
+ </svg>
1701
+ <div class="name">shield-check</div>
1702
+ <div class="code-name">#icon-shield-check</div>
1703
+ </li>
1704
+
1705
+ <li class="dib">
1706
+ <svg class="icon svg-icon" aria-hidden="true">
1707
+ <use xlink:href="#icon-id-card"></use>
1708
+ </svg>
1709
+ <div class="name">id-card</div>
1710
+ <div class="code-name">#icon-id-card</div>
1711
+ </li>
1712
+
1713
+ <li class="dib">
1714
+ <svg class="icon svg-icon" aria-hidden="true">
1715
+ <use xlink:href="#icon-user-round"></use>
1716
+ </svg>
1717
+ <div class="name">user-round</div>
1718
+ <div class="code-name">#icon-user-round</div>
1719
+ </li>
1720
+
1721
+ <li class="dib">
1722
+ <svg class="icon svg-icon" aria-hidden="true">
1723
+ <use xlink:href="#icon-log-out"></use>
1724
+ </svg>
1725
+ <div class="name">log-out</div>
1726
+ <div class="code-name">#icon-log-out</div>
1727
+ </li>
1728
+
1729
+ <li class="dib">
1730
+ <svg class="icon svg-icon" aria-hidden="true">
1731
+ <use xlink:href="#icon-arrow-right-left"></use>
1732
+ </svg>
1733
+ <div class="name">arrow-right-left</div>
1734
+ <div class="code-name">#icon-arrow-right-left</div>
1735
+ </li>
1736
+
1737
+ <li class="dib">
1738
+ <svg class="icon svg-icon" aria-hidden="true">
1739
+ <use xlink:href="#icon-clipboard-minus"></use>
1740
+ </svg>
1741
+ <div class="name">clipboard-minus</div>
1742
+ <div class="code-name">#icon-clipboard-minus</div>
1743
+ </li>
1744
+
1745
+ <li class="dib">
1746
+ <svg class="icon svg-icon" aria-hidden="true">
1747
+ <use xlink:href="#icon-chart-pie"></use>
1748
+ </svg>
1749
+ <div class="name">chart-pie</div>
1750
+ <div class="code-name">#icon-chart-pie</div>
1751
+ </li>
1752
+
1753
+ <li class="dib">
1754
+ <svg class="icon svg-icon" aria-hidden="true">
1755
+ <use xlink:href="#icon-receipt-text"></use>
1756
+ </svg>
1757
+ <div class="name">receipt-text</div>
1758
+ <div class="code-name">#icon-receipt-text</div>
1759
+ </li>
1760
+
1761
+ <li class="dib">
1762
+ <svg class="icon svg-icon" aria-hidden="true">
1763
+ <use xlink:href="#icon-brush-cleaning"></use>
1764
+ </svg>
1765
+ <div class="name">brush-cleaning</div>
1766
+ <div class="code-name">#icon-brush-cleaning</div>
1767
+ </li>
1768
+
1769
+ <li class="dib">
1770
+ <svg class="icon svg-icon" aria-hidden="true">
1771
+ <use xlink:href="#icon-arrow-down-to-line"></use>
1772
+ </svg>
1773
+ <div class="name">arrow-down-to-line</div>
1774
+ <div class="code-name">#icon-arrow-down-to-line</div>
1775
+ </li>
1776
+
1777
+ <li class="dib">
1778
+ <svg class="icon svg-icon" aria-hidden="true">
1779
+ <use xlink:href="#icon-circle-check-filled"></use>
1780
+ </svg>
1781
+ <div class="name">circle-check-filled</div>
1782
+ <div class="code-name">#icon-circle-check-filled</div>
1783
+ </li>
1784
+
1785
+ <li class="dib">
1786
+ <svg class="icon svg-icon" aria-hidden="true">
1787
+ <use xlink:href="#icon-square-check"></use>
1788
+ </svg>
1789
+ <div class="name">square-check</div>
1790
+ <div class="code-name">#icon-square-check</div>
1791
+ </li>
1792
+
1793
+ <li class="dib">
1794
+ <svg class="icon svg-icon" aria-hidden="true">
1795
+ <use xlink:href="#icon-square-check-empty"></use>
1796
+ </svg>
1797
+ <div class="name">square-check-empty</div>
1798
+ <div class="code-name">#icon-square-check-empty</div>
1799
+ </li>
1800
+
1801
+ <li class="dib">
1802
+ <svg class="icon svg-icon" aria-hidden="true">
1803
+ <use xlink:href="#icon-photosolid"></use>
1804
+ </svg>
1805
+ <div class="name">photosolid</div>
1806
+ <div class="code-name">#icon-photosolid</div>
1807
+ </li>
1808
+
1809
+ <li class="dib">
1810
+ <svg class="icon svg-icon" aria-hidden="true">
1811
+ <use xlink:href="#icon-customized"></use>
1812
+ </svg>
1813
+ <div class="name">customized</div>
1814
+ <div class="code-name">#icon-customized</div>
1815
+ </li>
1816
+
1817
+ <li class="dib">
1818
+ <svg class="icon svg-icon" aria-hidden="true">
1819
+ <use xlink:href="#icon-customize-newspaper"></use>
1820
+ </svg>
1821
+ <div class="name">customize-newspaper</div>
1822
+ <div class="code-name">#icon-customize-newspaper</div>
1823
+ </li>
1824
+
1825
+ <li class="dib">
1826
+ <svg class="icon svg-icon" aria-hidden="true">
1827
+ <use xlink:href="#icon-bell-ring"></use>
1828
+ </svg>
1829
+ <div class="name">bell-ring</div>
1830
+ <div class="code-name">#icon-bell-ring</div>
1831
+ </li>
1832
+
1833
+ <li class="dib">
1834
+ <svg class="icon svg-icon" aria-hidden="true">
1835
+ <use xlink:href="#icon-eye"></use>
1836
+ </svg>
1837
+ <div class="name">eye</div>
1838
+ <div class="code-name">#icon-eye</div>
1839
+ </li>
1840
+
1841
+ <li class="dib">
1842
+ <svg class="icon svg-icon" aria-hidden="true">
1843
+ <use xlink:href="#icon-bitcoin-convert"></use>
1844
+ </svg>
1845
+ <div class="name">bitcoin-convert</div>
1846
+ <div class="code-name">#icon-bitcoin-convert</div>
1847
+ </li>
1848
+
1849
+ <li class="dib">
1850
+ <svg class="icon svg-icon" aria-hidden="true">
1851
+ <use xlink:href="#icon-ellipsis-vertical"></use>
1852
+ </svg>
1853
+ <div class="name">ellipsis-vertical</div>
1854
+ <div class="code-name">#icon-ellipsis-vertical</div>
1855
+ </li>
1856
+
1857
+ <li class="dib">
1858
+ <svg class="icon svg-icon" aria-hidden="true">
1859
+ <use xlink:href="#icon-circle-help"></use>
1860
+ </svg>
1861
+ <div class="name">circle-help</div>
1862
+ <div class="code-name">#icon-circle-help</div>
1863
+ </li>
1864
+
1865
+ <li class="dib">
1866
+ <svg class="icon svg-icon" aria-hidden="true">
1867
+ <use xlink:href="#icon-gift"></use>
1868
+ </svg>
1869
+ <div class="name">gift</div>
1870
+ <div class="code-name">#icon-gift</div>
1871
+ </li>
1872
+
1873
+ <li class="dib">
1874
+ <svg class="icon svg-icon" aria-hidden="true">
1875
+ <use xlink:href="#icon-circle"></use>
1876
+ </svg>
1877
+ <div class="name">circle</div>
1878
+ <div class="code-name">#icon-circle</div>
1879
+ </li>
1880
+
1881
+ <li class="dib">
1882
+ <svg class="icon svg-icon" aria-hidden="true">
1883
+ <use xlink:href="#icon-circle-dollar-sign"></use>
1884
+ </svg>
1885
+ <div class="name">circle-dollar-sign</div>
1886
+ <div class="code-name">#icon-circle-dollar-sign</div>
1887
+ </li>
1888
+
1889
+ <li class="dib">
1890
+ <svg class="icon svg-icon" aria-hidden="true">
1891
+ <use xlink:href="#icon-chrome"></use>
1892
+ </svg>
1893
+ <div class="name">chrome</div>
1894
+ <div class="code-name">#icon-chrome</div>
1895
+ </li>
1896
+
1897
+ <li class="dib">
1898
+ <svg class="icon svg-icon" aria-hidden="true">
1899
+ <use xlink:href="#icon-alarm"></use>
1900
+ </svg>
1901
+ <div class="name">alarm</div>
1902
+ <div class="code-name">#icon-alarm</div>
1903
+ </li>
1904
+
1905
+ <li class="dib">
1906
+ <svg class="icon svg-icon" aria-hidden="true">
1907
+ <use xlink:href="#icon-refresh-cw"></use>
1908
+ </svg>
1909
+ <div class="name">refresh-cw</div>
1910
+ <div class="code-name">#icon-refresh-cw</div>
1911
+ </li>
1912
+
1913
+ <li class="dib">
1914
+ <svg class="icon svg-icon" aria-hidden="true">
1915
+ <use xlink:href="#icon-search"></use>
1916
+ </svg>
1917
+ <div class="name">search</div>
1918
+ <div class="code-name">#icon-search</div>
1919
+ </li>
1920
+
1921
+ <li class="dib">
1922
+ <svg class="icon svg-icon" aria-hidden="true">
1923
+ <use xlink:href="#icon-alert-circle"></use>
1924
+ </svg>
1925
+ <div class="name">alert-circle</div>
1926
+ <div class="code-name">#icon-alert-circle</div>
1927
+ </li>
1928
+
1929
+ <li class="dib">
1930
+ <svg class="icon svg-icon" aria-hidden="true">
1931
+ <use xlink:href="#icon-graph-filled"></use>
1932
+ </svg>
1933
+ <div class="name">graph-filled</div>
1934
+ <div class="code-name">#icon-graph-filled</div>
1935
+ </li>
1936
+
1937
+ <li class="dib">
1938
+ <svg class="icon svg-icon" aria-hidden="true">
1939
+ <use xlink:href="#icon-star-filled"></use>
1940
+ </svg>
1941
+ <div class="name">star-filled</div>
1942
+ <div class="code-name">#icon-star-filled</div>
1943
+ </li>
1944
+
1945
+ <li class="dib">
1946
+ <svg class="icon svg-icon" aria-hidden="true">
1947
+ <use xlink:href="#icon-lucide-x"></use>
1948
+ </svg>
1949
+ <div class="name">lucide-x</div>
1950
+ <div class="code-name">#icon-lucide-x</div>
1951
+ </li>
1952
+
1953
+ <li class="dib">
1954
+ <svg class="icon svg-icon" aria-hidden="true">
1955
+ <use xlink:href="#icon-plus"></use>
1956
+ </svg>
1957
+ <div class="name">plus</div>
1958
+ <div class="code-name">#icon-plus</div>
1959
+ </li>
1960
+
1961
+ <li class="dib">
1962
+ <svg class="icon svg-icon" aria-hidden="true">
1963
+ <use xlink:href="#icon-map-pin"></use>
1964
+ </svg>
1965
+ <div class="name">map-pin</div>
1966
+ <div class="code-name">#icon-map-pin</div>
1967
+ </li>
1968
+
1969
+ <li class="dib">
1970
+ <svg class="icon svg-icon" aria-hidden="true">
1971
+ <use xlink:href="#icon-loader-circle"></use>
1972
+ </svg>
1973
+ <div class="name">loader-circle</div>
1974
+ <div class="code-name">#icon-loader-circle</div>
1975
+ </li>
1976
+
1977
+ <li class="dib">
1978
+ <svg class="icon svg-icon" aria-hidden="true">
1979
+ <use xlink:href="#icon-image"></use>
1980
+ </svg>
1981
+ <div class="name">image</div>
1982
+ <div class="code-name">#icon-image</div>
1983
+ </li>
1984
+
1985
+ <li class="dib">
1986
+ <svg class="icon svg-icon" aria-hidden="true">
1987
+ <use xlink:href="#icon-lucide-image"></use>
1988
+ </svg>
1989
+ <div class="name">lucide-image</div>
1990
+ <div class="code-name">#icon-lucide-image</div>
1991
+ </li>
1992
+
1993
+ <li class="dib">
1994
+ <svg class="icon svg-icon" aria-hidden="true">
1995
+ <use xlink:href="#icon-lucide-history"></use>
1996
+ </svg>
1997
+ <div class="name">lucide-history</div>
1998
+ <div class="code-name">#icon-lucide-history</div>
1999
+ </li>
2000
+
2001
+ <li class="dib">
2002
+ <svg class="icon svg-icon" aria-hidden="true">
2003
+ <use xlink:href="#icon-key-round"></use>
2004
+ </svg>
2005
+ <div class="name">key-round</div>
2006
+ <div class="code-name">#icon-key-round</div>
2007
+ </li>
2008
+
2009
+ <li class="dib">
2010
+ <svg class="icon svg-icon" aria-hidden="true">
2011
+ <use xlink:href="#icon-copy"></use>
2012
+ </svg>
2013
+ <div class="name">copy</div>
2014
+ <div class="code-name">#icon-copy</div>
2015
+ </li>
2016
+
2017
+ <li class="dib">
2018
+ <svg class="icon svg-icon" aria-hidden="true">
2019
+ <use xlink:href="#icon-headset"></use>
2020
+ </svg>
2021
+ <div class="name">headset</div>
2022
+ <div class="code-name">#icon-headset</div>
2023
+ </li>
2024
+
2025
+ <li class="dib">
2026
+ <svg class="icon svg-icon" aria-hidden="true">
2027
+ <use xlink:href="#icon-circle-x"></use>
2028
+ </svg>
2029
+ <div class="name">circle-x</div>
2030
+ <div class="code-name">#icon-circle-x</div>
2031
+ </li>
2032
+
2033
+ <li class="dib">
2034
+ <svg class="icon svg-icon" aria-hidden="true">
2035
+ <use xlink:href="#icon-circle-user"></use>
2036
+ </svg>
2037
+ <div class="name">circle-user</div>
2038
+ <div class="code-name">#icon-circle-user</div>
2039
+ </li>
2040
+
2041
+ <li class="dib">
2042
+ <svg class="icon svg-icon" aria-hidden="true">
2043
+ <use xlink:href="#icon-globe"></use>
2044
+ </svg>
2045
+ <div class="name">globe</div>
2046
+ <div class="code-name">#icon-globe</div>
2047
+ </li>
2048
+
2049
+ <li class="dib">
2050
+ <svg class="icon svg-icon" aria-hidden="true">
2051
+ <use xlink:href="#icon-compass"></use>
2052
+ </svg>
2053
+ <div class="name">compass</div>
2054
+ <div class="code-name">#icon-compass</div>
2055
+ </li>
2056
+
2057
+ <li class="dib">
2058
+ <svg class="icon svg-icon" aria-hidden="true">
2059
+ <use xlink:href="#icon-eye-off"></use>
2060
+ </svg>
2061
+ <div class="name">eye-off</div>
2062
+ <div class="code-name">#icon-eye-off</div>
2063
+ </li>
2064
+
2065
+ <li class="dib">
2066
+ <svg class="icon svg-icon" aria-hidden="true">
2067
+ <use xlink:href="#icon-layout-grid"></use>
2068
+ </svg>
2069
+ <div class="name">layout-grid</div>
2070
+ <div class="code-name">#icon-layout-grid</div>
2071
+ </li>
2072
+
2073
+ <li class="dib">
2074
+ <svg class="icon svg-icon" aria-hidden="true">
2075
+ <use xlink:href="#icon-heart-handshake"></use>
2076
+ </svg>
2077
+ <div class="name">heart-handshake</div>
2078
+ <div class="code-name">#icon-heart-handshake</div>
2079
+ </li>
2080
+
2081
+ <li class="dib">
2082
+ <svg class="icon svg-icon" aria-hidden="true">
2083
+ <use xlink:href="#icon-credit-card"></use>
2084
+ </svg>
2085
+ <div class="name">credit-card</div>
2086
+ <div class="code-name">#icon-credit-card</div>
2087
+ </li>
2088
+
2089
+ <li class="dib">
2090
+ <svg class="icon svg-icon" aria-hidden="true">
2091
+ <use xlink:href="#icon-earth"></use>
2092
+ </svg>
2093
+ <div class="name">earth</div>
2094
+ <div class="code-name">#icon-earth</div>
2095
+ </li>
2096
+
2097
+ <li class="dib">
2098
+ <svg class="icon svg-icon" aria-hidden="true">
2099
+ <use xlink:href="#icon-linear-trash"></use>
2100
+ </svg>
2101
+ <div class="name">linear-trash</div>
2102
+ <div class="code-name">#icon-linear-trash</div>
2103
+ </li>
2104
+
2105
+ <li class="dib">
2106
+ <svg class="icon svg-icon" aria-hidden="true">
2107
+ <use xlink:href="#icon-tabler_wallet_outline"></use>
2108
+ </svg>
2109
+ <div class="name">icon-kfckfc</div>
2110
+ <div class="code-name">#icon-tabler_wallet_outline</div>
2111
+ </li>
2112
+
2113
+ <li class="dib">
2114
+ <svg class="icon svg-icon" aria-hidden="true">
2115
+ <use xlink:href="#icon-pig-money"></use>
2116
+ </svg>
2117
+ <div class="name">pig-money</div>
2118
+ <div class="code-name">#icon-pig-money</div>
2119
+ </li>
2120
+
2121
+ <li class="dib">
2122
+ <svg class="icon svg-icon" aria-hidden="true">
2123
+ <use xlink:href="#icon-wallet-filled"></use>
2124
+ </svg>
2125
+ <div class="name">wallet-filled</div>
2126
+ <div class="code-name">#icon-wallet-filled</div>
2127
+ </li>
2128
+
2129
+ <li class="dib">
2130
+ <svg class="icon svg-icon" aria-hidden="true">
2131
+ <use xlink:href="#icon-star-outline"></use>
2132
+ </svg>
2133
+ <div class="name">star-outline</div>
2134
+ <div class="code-name">#icon-star-outline</div>
2135
+ </li>
2136
+
2137
+ <li class="dib">
2138
+ <svg class="icon svg-icon" aria-hidden="true">
2139
+ <use xlink:href="#icon-trending-up-down"></use>
2140
+ </svg>
2141
+ <div class="name">trending-up-down</div>
2142
+ <div class="code-name">#icon-trending-up-down</div>
2143
+ </li>
2144
+
2145
+ <li class="dib">
2146
+ <svg class="icon svg-icon" aria-hidden="true">
2147
+ <use xlink:href="#icon-monitor"></use>
2148
+ </svg>
2149
+ <div class="name">monitor</div>
2150
+ <div class="code-name">#icon-monitor</div>
2151
+ </li>
2152
+
2153
+ <li class="dib">
2154
+ <svg class="icon svg-icon" aria-hidden="true">
2155
+ <use xlink:href="#icon-graph-outline"></use>
2156
+ </svg>
2157
+ <div class="name">graph-outline</div>
2158
+ <div class="code-name">#icon-graph-outline</div>
2159
+ </li>
2160
+
2161
+ <li class="dib">
2162
+ <svg class="icon svg-icon" aria-hidden="true">
2163
+ <use xlink:href="#icon-home-filled"></use>
2164
+ </svg>
2165
+ <div class="name">home-filled</div>
2166
+ <div class="code-name">#icon-home-filled</div>
2167
+ </li>
2168
+
2169
+ <li class="dib">
2170
+ <svg class="icon svg-icon" aria-hidden="true">
2171
+ <use xlink:href="#icon-lucidecoins"></use>
2172
+ </svg>
2173
+ <div class="name">lucidecoins</div>
2174
+ <div class="code-name">#icon-lucidecoins</div>
2175
+ </li>
2176
+
2177
+ <li class="dib">
2178
+ <svg class="icon svg-icon" aria-hidden="true">
2179
+ <use xlink:href="#icon-square-pen"></use>
2180
+ </svg>
2181
+ <div class="name">square-pen</div>
2182
+ <div class="code-name">#icon-square-pen</div>
2183
+ </li>
2184
+
2185
+ <li class="dib">
2186
+ <svg class="icon svg-icon" aria-hidden="true">
2187
+ <use xlink:href="#icon-adjustments-horizontal"></use>
2188
+ </svg>
2189
+ <div class="name">adjustments-horizontal</div>
2190
+ <div class="code-name">#icon-adjustments-horizontal</div>
2191
+ </li>
2192
+
2193
+ <li class="dib">
2194
+ <svg class="icon svg-icon" aria-hidden="true">
2195
+ <use xlink:href="#icon-home-outline"></use>
2196
+ </svg>
2197
+ <div class="name">home-outline</div>
2198
+ <div class="code-name">#icon-home-outline</div>
2199
+ </li>
2200
+
2201
+ <li class="dib">
2202
+ <svg class="icon svg-icon" aria-hidden="true">
2203
+ <use xlink:href="#icon-user-cog"></use>
2204
+ </svg>
2205
+ <div class="name">user-cog</div>
2206
+ <div class="code-name">#icon-user-cog</div>
2207
+ </li>
2208
+
2209
+ <li class="dib">
2210
+ <svg class="icon svg-icon" aria-hidden="true">
2211
+ <use xlink:href="#icon-minus"></use>
2212
+ </svg>
2213
+ <div class="name">minus</div>
2214
+ <div class="code-name">#icon-minus</div>
2215
+ </li>
2216
+
2217
+ <li class="dib">
2218
+ <svg class="icon svg-icon" aria-hidden="true">
2219
+ <use xlink:href="#icon-circle-check"></use>
2220
+ </svg>
2221
+ <div class="name">circle-check</div>
2222
+ <div class="code-name">#icon-circle-check</div>
2223
+ </li>
2224
+
2225
+ <li class="dib">
2226
+ <svg class="icon svg-icon" aria-hidden="true">
2227
+ <use xlink:href="#icon-customize-speakerphone"></use>
2228
+ </svg>
2229
+ <div class="name">customize-speakerphone</div>
2230
+ <div class="code-name">#icon-customize-speakerphone</div>
2231
+ </li>
2232
+
2233
+ <li class="dib">
2234
+ <svg class="icon svg-icon" aria-hidden="true">
2235
+ <use xlink:href="#icon-book-open-text"></use>
2236
+ </svg>
2237
+ <div class="name">book-open-text</div>
2238
+ <div class="code-name">#icon-book-open-text</div>
2239
+ </li>
2240
+
2241
+ <li class="dib">
2242
+ <svg class="icon svg-icon" aria-hidden="true">
2243
+ <use xlink:href="#icon-bitcoin-convert-filled"></use>
2244
+ </svg>
2245
+ <div class="name">bitcoin-convert-filled</div>
2246
+ <div class="code-name">#icon-bitcoin-convert-filled</div>
2247
+ </li>
2248
+
2249
+ <li class="dib">
2250
+ <svg class="icon svg-icon" aria-hidden="true">
2251
+ <use xlink:href="#icon-calendar-clock"></use>
2252
+ </svg>
2253
+ <div class="name">calendar-clock</div>
2254
+ <div class="code-name">#icon-calendar-clock</div>
2255
+ </li>
2256
+
2257
+ <li class="dib">
2258
+ <svg class="icon svg-icon" aria-hidden="true">
2259
+ <use xlink:href="#icon-check"></use>
2260
+ </svg>
2261
+ <div class="name">check</div>
2262
+ <div class="code-name">#icon-check</div>
2263
+ </li>
2264
+
2265
+ <li class="dib">
2266
+ <svg class="icon svg-icon" aria-hidden="true">
2267
+ <use xlink:href="#icon-repeat-circle"></use>
2268
+ </svg>
2269
+ <div class="name">repeat-circle</div>
2270
+ <div class="code-name">#icon-repeat-circle</div>
2271
+ </li>
2272
+
2273
+ <li class="dib">
2274
+ <svg class="icon svg-icon" aria-hidden="true">
2275
+ <use xlink:href="#icon-chevron-up"></use>
2276
+ </svg>
2277
+ <div class="name">chevron-up</div>
2278
+ <div class="code-name">#icon-chevron-up</div>
2279
+ </li>
2280
+
2281
+ <li class="dib">
2282
+ <svg class="icon svg-icon" aria-hidden="true">
2283
+ <use xlink:href="#icon-customize-safe"></use>
2284
+ </svg>
2285
+ <div class="name">customize-safe</div>
2286
+ <div class="code-name">#icon-customize-safe</div>
2287
+ </li>
2288
+
2289
+ <li class="dib">
2290
+ <svg class="icon svg-icon" aria-hidden="true">
2291
+ <use xlink:href="#icon-chevron-right"></use>
2292
+ </svg>
2293
+ <div class="name">chevron-right</div>
2294
+ <div class="code-name">#icon-chevron-right</div>
2295
+ </li>
2296
+
2297
+ <li class="dib">
2298
+ <svg class="icon svg-icon" aria-hidden="true">
2299
+ <use xlink:href="#icon-bitcoin-convert-utline"></use>
2300
+ </svg>
2301
+ <div class="name">bitcoin-convert-utline</div>
2302
+ <div class="code-name">#icon-bitcoin-convert-utline</div>
2303
+ </li>
2304
+
2305
+ <li class="dib">
2306
+ <svg class="icon svg-icon" aria-hidden="true">
2307
+ <use xlink:href="#icon-arrow-left-right"></use>
2308
+ </svg>
2309
+ <div class="name">arrow-left-right</div>
2310
+ <div class="code-name">#icon-arrow-left-right</div>
2311
+ </li>
2312
+
2313
+ <li class="dib">
2314
+ <svg class="icon svg-icon" aria-hidden="true">
2315
+ <use xlink:href="#icon-customize"></use>
2316
+ </svg>
2317
+ <div class="name">customize</div>
2318
+ <div class="code-name">#icon-customize</div>
2319
+ </li>
2320
+
2321
+ <li class="dib">
2322
+ <svg class="icon svg-icon" aria-hidden="true">
2323
+ <use xlink:href="#icon-lucide-check"></use>
2324
+ </svg>
2325
+ <div class="name">lucide-check</div>
2326
+ <div class="code-name">#icon-lucide-check</div>
2327
+ </li>
2328
+
2329
+ <li class="dib">
2330
+ <svg class="icon svg-icon" aria-hidden="true">
2331
+ <use xlink:href="#icon-arrow-down-narrow-wide"></use>
2332
+ </svg>
2333
+ <div class="name">arrow-down-narrow-wide</div>
2334
+ <div class="code-name">#icon-arrow-down-narrow-wide</div>
2335
+ </li>
2336
+
2337
+ <li class="dib">
2338
+ <svg class="icon svg-icon" aria-hidden="true">
2339
+ <use xlink:href="#icon-money-send"></use>
2340
+ </svg>
2341
+ <div class="name">money-send</div>
2342
+ <div class="code-name">#icon-money-send</div>
2343
+ </li>
2344
+
2345
+ <li class="dib">
2346
+ <svg class="icon svg-icon" aria-hidden="true">
2347
+ <use xlink:href="#icon-chevron-left"></use>
2348
+ </svg>
2349
+ <div class="name">chevron-left</div>
2350
+ <div class="code-name">#icon-chevron-left</div>
2351
+ </li>
2352
+
2353
+ <li class="dib">
2354
+ <svg class="icon svg-icon" aria-hidden="true">
2355
+ <use xlink:href="#icon-chevron-down"></use>
2356
+ </svg>
2357
+ <div class="name">chevron-down</div>
2358
+ <div class="code-name">#icon-chevron-down</div>
2359
+ </li>
2360
+
2361
+ </ul>
2362
+ <div class="article markdown">
2363
+ <h2 id="symbol-">Symbol 引用</h2>
2364
+ <hr>
2365
+
2366
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
2367
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
2368
+ <ul>
2369
+ <li>支持多色图标了，不再受单色限制。</li>
2370
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
2371
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
2372
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
2373
+ </ul>
2374
+ <p>使用步骤如下：</p>
2375
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
2376
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
2377
+ </code></pre>
2378
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
2379
+ <pre><code class="language-html">&lt;style&gt;
2380
+ .icon {
2381
+ width: 1em;
2382
+ height: 1em;
2383
+ vertical-align: -0.15em;
2384
+ fill: currentColor;
2385
+ overflow: hidden;
2386
+ }
2387
+ &lt;/style&gt;
2388
+ </code></pre>
2389
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
2390
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
2391
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
2392
+ &lt;/svg&gt;
2393
+ </code></pre>
2394
+ </div>
2395
+ </div>
2396
+
2397
+ </div>
2398
+ </div>
2399
+ <script>
2400
+ $(document).ready(function () {
2401
+ $('.tab-container .content:first').show()
2402
+
2403
+ $('#tabs li').click(function (e) {
2404
+ var tabContent = $('.tab-container .content')
2405
+ var index = $(this).index()
2406
+
2407
+ if ($(this).hasClass('active')) {
2408
+ return
2409
+ } else {
2410
+ $('#tabs li').removeClass('active')
2411
+ $(this).addClass('active')
2412
+
2413
+ tabContent.hide().eq(index).fadeIn()
2414
+ }
2415
+ })
2416
+ })
2417
+ </script>
2418
+ </body>
2419
+ </html>