papayaui 0.2.13 → 0.2.14

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.
@@ -1,2833 +0,0 @@
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=3668565" 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 pa-icon">&#xe66d;</span>
59
- <div class="name">order</div>
60
- <div class="code-name">&amp;#xe66d;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon pa-icon">&#xe6ef;</span>
65
- <div class="name">voice</div>
66
- <div class="code-name">&amp;#xe6ef;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon pa-icon">&#xe6f0;</span>
71
- <div class="name">voice_fill</div>
72
- <div class="code-name">&amp;#xe6f0;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon pa-icon">&#xe700;</span>
77
- <div class="name">sort</div>
78
- <div class="code-name">&amp;#xe700;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon pa-icon">&#xe73c;</span>
83
- <div class="name">attention_fill</div>
84
- <div class="code-name">&amp;#xe73c;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon pa-icon">&#xe73d;</span>
89
- <div class="name">attention</div>
90
- <div class="code-name">&amp;#xe73d;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon pa-icon">&#xe767;</span>
95
- <div class="name">add</div>
96
- <div class="code-name">&amp;#xe767;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon pa-icon">&#xe768;</span>
101
- <div class="name">move</div>
102
- <div class="code-name">&amp;#xe768;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon pa-icon">&#xe78b;</span>
107
- <div class="name">my</div>
108
- <div class="code-name">&amp;#xe78b;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon pa-icon">&#xe78c;</span>
113
- <div class="name">my_fill</div>
114
- <div class="code-name">&amp;#xe78c;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon pa-icon">&#xe7b2;</span>
119
- <div class="name">attention_forbid</div>
120
- <div class="code-name">&amp;#xe7b2;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon pa-icon">&#xe7b3;</span>
125
- <div class="name">attention_forbid_fill</div>
126
- <div class="code-name">&amp;#xe7b3;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon pa-icon">&#xe7cb;</span>
131
- <div class="name">exit</div>
132
- <div class="code-name">&amp;#xe7cb;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon pa-icon">&#xe684;</span>
137
- <div class="name">more</div>
138
- <div class="code-name">&amp;#xe684;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon pa-icon">&#xe706;</span>
143
- <div class="name">copy</div>
144
- <div class="code-name">&amp;#xe706;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon pa-icon">&#xe657;</span>
149
- <div class="name">round_check</div>
150
- <div class="code-name">&amp;#xe657;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon pa-icon">&#xe659;</span>
155
- <div class="name">round_close</div>
156
- <div class="code-name">&amp;#xe659;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon pa-icon">&#xe644;</span>
161
- <div class="name">appreciate</div>
162
- <div class="code-name">&amp;#xe644;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon pa-icon">&#xe649;</span>
167
- <div class="name">edit</div>
168
- <div class="code-name">&amp;#xe649;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon pa-icon">&#xe64b;</span>
173
- <div class="name">favor_fill</div>
174
- <div class="code-name">&amp;#xe64b;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon pa-icon">&#xe64c;</span>
179
- <div class="name">favor</div>
180
- <div class="code-name">&amp;#xe64c;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon pa-icon">&#xe650;</span>
185
- <div class="name">location_fill</div>
186
- <div class="code-name">&amp;#xe650;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon pa-icon">&#xe662;</span>
191
- <div class="name">warn_fill</div>
192
- <div class="code-name">&amp;#xe662;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon pa-icon">&#xe663;</span>
197
- <div class="name">warn</div>
198
- <div class="code-name">&amp;#xe663;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon pa-icon">&#xe668;</span>
203
- <div class="name">like_fill</div>
204
- <div class="code-name">&amp;#xe668;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon pa-icon">&#xe669;</span>
209
- <div class="name">like</div>
210
- <div class="code-name">&amp;#xe669;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon pa-icon">&#xe68a;</span>
215
- <div class="name">settings</div>
216
- <div class="code-name">&amp;#xe68a;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon pa-icon">&#xe690;</span>
221
- <div class="name">question_fill</div>
222
- <div class="code-name">&amp;#xe690;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon pa-icon">&#xe691;</span>
227
- <div class="name">question</div>
228
- <div class="code-name">&amp;#xe691;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon pa-icon">&#xe6a5;</span>
233
- <div class="name">more_android</div>
234
- <div class="code-name">&amp;#xe6a5;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon pa-icon">&#xe6a6;</span>
239
- <div class="name">delete_fill</div>
240
- <div class="code-name">&amp;#xe6a6;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon pa-icon">&#xe6b0;</span>
245
- <div class="name">qr_code</div>
246
- <div class="code-name">&amp;#xe6b0;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon pa-icon">&#xe6b4;</span>
251
- <div class="name">delete</div>
252
- <div class="code-name">&amp;#xe6b4;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon pa-icon">&#xe6bc;</span>
257
- <div class="name">message</div>
258
- <div class="code-name">&amp;#xe6bc;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon pa-icon">&#xe6bf;</span>
263
- <div class="name">link</div>
264
- <div class="code-name">&amp;#xe6bf;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon pa-icon">&#xe6e3;</span>
269
- <div class="name">appreciate_fill</div>
270
- <div class="code-name">&amp;#xe6e3;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon pa-icon">&#xe6e4;</span>
275
- <div class="name">info_fill</div>
276
- <div class="code-name">&amp;#xe6e4;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon pa-icon">&#xe6e5;</span>
281
- <div class="name">info</div>
282
- <div class="code-name">&amp;#xe6e5;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon pa-icon">&#xe6ea;</span>
287
- <div class="name">forward_fill</div>
288
- <div class="code-name">&amp;#xe6ea;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon pa-icon">&#xe6eb;</span>
293
- <div class="name">forward</div>
294
- <div class="code-name">&amp;#xe6eb;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon pa-icon">&#xe6ec;</span>
299
- <div class="name">recharge_fill</div>
300
- <div class="code-name">&amp;#xe6ec;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon pa-icon">&#xe6ed;</span>
305
- <div class="name">recharge</div>
306
- <div class="code-name">&amp;#xe6ed;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon pa-icon">&#xe709;</span>
311
- <div class="name">notice_fill</div>
312
- <div class="code-name">&amp;#xe709;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon pa-icon">&#xe70a;</span>
317
- <div class="name">notice</div>
318
- <div class="code-name">&amp;#xe70a;</div>
319
- </li>
320
-
321
- <li class="dib">
322
- <span class="icon pa-icon">&#xe729;</span>
323
- <div class="name">apps</div>
324
- <div class="code-name">&amp;#xe729;</div>
325
- </li>
326
-
327
- <li class="dib">
328
- <span class="icon pa-icon">&#xe74a;</span>
329
- <div class="name">calendar</div>
330
- <div class="code-name">&amp;#xe74a;</div>
331
- </li>
332
-
333
- <li class="dib">
334
- <span class="icon pa-icon">&#xe751;</span>
335
- <div class="name">tag_fill</div>
336
- <div class="code-name">&amp;#xe751;</div>
337
- </li>
338
-
339
- <li class="dib">
340
- <span class="icon pa-icon">&#xe752;</span>
341
- <div class="name">tag</div>
342
- <div class="code-name">&amp;#xe752;</div>
343
- </li>
344
-
345
- <li class="dib">
346
- <span class="icon pa-icon">&#xe759;</span>
347
- <div class="name">post</div>
348
- <div class="code-name">&amp;#xe759;</div>
349
- </li>
350
-
351
- <li class="dib">
352
- <span class="icon pa-icon">&#xe760;</span>
353
- <div class="name">write_fill</div>
354
- <div class="code-name">&amp;#xe760;</div>
355
- </li>
356
-
357
- <li class="dib">
358
- <span class="icon pa-icon">&#xe761;</span>
359
- <div class="name">write</div>
360
- <div class="code-name">&amp;#xe761;</div>
361
- </li>
362
-
363
- <li class="dib">
364
- <span class="icon pa-icon">&#xe7e0;</span>
365
- <div class="name">back_light</div>
366
- <div class="code-name">&amp;#xe7e0;</div>
367
- </li>
368
-
369
- <li class="dib">
370
- <span class="icon pa-icon">&#xe651;</span>
371
- <div class="name">location</div>
372
- <div class="code-name">&amp;#xe651;</div>
373
- </li>
374
-
375
- <li class="dib">
376
- <span class="icon pa-icon">&#xe656;</span>
377
- <div class="name">round_check_fill</div>
378
- <div class="code-name">&amp;#xe656;</div>
379
- </li>
380
-
381
- <li class="dib">
382
- <span class="icon pa-icon">&#xe658;</span>
383
- <div class="name">round_close_fill</div>
384
- <div class="code-name">&amp;#xe658;</div>
385
- </li>
386
-
387
- <li class="dib">
388
- <span class="icon pa-icon">&#xe664;</span>
389
- <div class="name">camera_fill</div>
390
- <div class="code-name">&amp;#xe664;</div>
391
- </li>
392
-
393
- <li class="dib">
394
- <span class="icon pa-icon">&#xe665;</span>
395
- <div class="name">camera</div>
396
- <div class="code-name">&amp;#xe665;</div>
397
- </li>
398
-
399
- <li class="dib">
400
- <span class="icon pa-icon">&#xe689;</span>
401
- <div class="name">scan</div>
402
- <div class="code-name">&amp;#xe689;</div>
403
- </li>
404
-
405
- <li class="dib">
406
- <span class="icon pa-icon">&#xe69c;</span>
407
- <div class="name">filter</div>
408
- <div class="code-name">&amp;#xe69c;</div>
409
- </li>
410
-
411
- <li class="dib">
412
- <span class="icon pa-icon">&#xe6bb;</span>
413
- <div class="name">home_fill</div>
414
- <div class="code-name">&amp;#xe6bb;</div>
415
- </li>
416
-
417
- <li class="dib">
418
- <span class="icon pa-icon">&#xe661;</span>
419
- <div class="name">unfold</div>
420
- <div class="code-name">&amp;#xe661;</div>
421
- </li>
422
-
423
- <li class="dib">
424
- <span class="icon pa-icon">&#xe6de;</span>
425
- <div class="name">fold</div>
426
- <div class="code-name">&amp;#xe6de;</div>
427
- </li>
428
-
429
- <li class="dib">
430
- <span class="icon pa-icon">&#xe66b;</span>
431
- <div class="name">notification</div>
432
- <div class="code-name">&amp;#xe66b;</div>
433
- </li>
434
-
435
- <li class="dib">
436
- <span class="icon pa-icon">&#xe645;</span>
437
- <div class="name">check</div>
438
- <div class="code-name">&amp;#xe645;</div>
439
- </li>
440
-
441
- <li class="dib">
442
- <span class="icon pa-icon">&#xe646;</span>
443
- <div class="name">close</div>
444
- <div class="code-name">&amp;#xe646;</div>
445
- </li>
446
-
447
- <li class="dib">
448
- <span class="icon pa-icon">&#xe679;</span>
449
- <div class="name">back</div>
450
- <div class="code-name">&amp;#xe679;</div>
451
- </li>
452
-
453
- <li class="dib">
454
- <span class="icon pa-icon">&#xe6a3;</span>
455
- <div class="name">right</div>
456
- <div class="code-name">&amp;#xe6a3;</div>
457
- </li>
458
-
459
- <li class="dib">
460
- <span class="icon pa-icon">&#xe65c;</span>
461
- <div class="name">半选</div>
462
- <div class="code-name">&amp;#xe65c;</div>
463
- </li>
464
-
465
- <li class="dib">
466
- <span class="icon pa-icon">&#xe6b8;</span>
467
- <div class="name">home</div>
468
- <div class="code-name">&amp;#xe6b8;</div>
469
- </li>
470
-
471
- <li class="dib">
472
- <span class="icon pa-icon">&#xe846;</span>
473
- <div class="name">left-circle-fill</div>
474
- <div class="code-name">&amp;#xe846;</div>
475
- </li>
476
-
477
- <li class="dib">
478
- <span class="icon pa-icon">&#xe847;</span>
479
- <div class="name">down-circle-fill</div>
480
- <div class="code-name">&amp;#xe847;</div>
481
- </li>
482
-
483
- <li class="dib">
484
- <span class="icon pa-icon">&#xe848;</span>
485
- <div class="name">up-circle-fill</div>
486
- <div class="code-name">&amp;#xe848;</div>
487
- </li>
488
-
489
- <li class="dib">
490
- <span class="icon pa-icon">&#xe849;</span>
491
- <div class="name">right-circle-fill</div>
492
- <div class="code-name">&amp;#xe849;</div>
493
- </li>
494
-
495
- <li class="dib">
496
- <span class="icon pa-icon">&#xe7f3;</span>
497
- <div class="name">outdent</div>
498
- <div class="code-name">&amp;#xe7f3;</div>
499
- </li>
500
-
501
- <li class="dib">
502
- <span class="icon pa-icon">&#xe7f4;</span>
503
- <div class="name">menu</div>
504
- <div class="code-name">&amp;#xe7f4;</div>
505
- </li>
506
-
507
- <li class="dib">
508
- <span class="icon pa-icon">&#xe7f5;</span>
509
- <div class="name">unordered list</div>
510
- <div class="code-name">&amp;#xe7f5;</div>
511
- </li>
512
-
513
- <li class="dib">
514
- <span class="icon pa-icon">&#xe7f2;</span>
515
- <div class="name">swap</div>
516
- <div class="code-name">&amp;#xe7f2;</div>
517
- </li>
518
-
519
- <li class="dib">
520
- <span class="icon pa-icon">&#xe60c;</span>
521
- <div class="name">小胖车图片</div>
522
- <div class="code-name">&amp;#xe60c;</div>
523
- </li>
524
-
525
- <li class="dib">
526
- <span class="icon pa-icon">&#xe60d;</span>
527
- <div class="name">小胖车图片加载失败</div>
528
- <div class="code-name">&amp;#xe60d;</div>
529
- </li>
530
-
531
- <li class="dib">
532
- <span class="icon pa-icon">&#xe796;</span>
533
- <div class="name">minus-square</div>
534
- <div class="code-name">&amp;#xe796;</div>
535
- </li>
536
-
537
- <li class="dib">
538
- <span class="icon pa-icon">&#xe797;</span>
539
- <div class="name">plus-square</div>
540
- <div class="code-name">&amp;#xe797;</div>
541
- </li>
542
-
543
- <li class="dib">
544
- <span class="icon pa-icon">&#xe792;</span>
545
- <div class="name">save</div>
546
- <div class="code-name">&amp;#xe792;</div>
547
- </li>
548
-
549
- <li class="dib">
550
- <span class="icon pa-icon">&#xe793;</span>
551
- <div class="name">close-square</div>
552
- <div class="code-name">&amp;#xe793;</div>
553
- </li>
554
-
555
- <li class="dib">
556
- <span class="icon pa-icon">&#xe794;</span>
557
- <div class="name">detail</div>
558
- <div class="code-name">&amp;#xe794;</div>
559
- </li>
560
-
561
- <li class="dib">
562
- <span class="icon pa-icon">&#xe7a8;</span>
563
- <div class="name">check-square</div>
564
- <div class="code-name">&amp;#xe7a8;</div>
565
- </li>
566
-
567
- <li class="dib">
568
- <span class="icon pa-icon">&#xe7b9;</span>
569
- <div class="name">file-text</div>
570
- <div class="code-name">&amp;#xe7b9;</div>
571
- </li>
572
-
573
- <li class="dib">
574
- <span class="icon pa-icon">&#xe7ef;</span>
575
- <div class="name">download</div>
576
- <div class="code-name">&amp;#xe7ef;</div>
577
- </li>
578
-
579
- <li class="dib">
580
- <span class="icon pa-icon">&#xe791;</span>
581
- <div class="name">edit-square</div>
582
- <div class="code-name">&amp;#xe791;</div>
583
- </li>
584
-
585
- <li class="dib">
586
- <span class="icon pa-icon">&#xe7de;</span>
587
- <div class="name">credit card</div>
588
- <div class="code-name">&amp;#xe7de;</div>
589
- </li>
590
-
591
- <li class="dib">
592
- <span class="icon pa-icon">&#xe7c0;</span>
593
- <div class="name">property safety</div>
594
- <div class="code-name">&amp;#xe7c0;</div>
595
- </li>
596
-
597
- <li class="dib">
598
- <span class="icon pa-icon">&#xe786;</span>
599
- <div class="name">transaction</div>
600
- <div class="code-name">&amp;#xe786;</div>
601
- </li>
602
-
603
- <li class="dib">
604
- <span class="icon pa-icon">&#xe7b0;</span>
605
- <div class="name">database</div>
606
- <div class="code-name">&amp;#xe7b0;</div>
607
- </li>
608
-
609
- <li class="dib">
610
- <span class="icon pa-icon">&#xe7b6;</span>
611
- <div class="name">file done</div>
612
- <div class="code-name">&amp;#xe7b6;</div>
613
- </li>
614
-
615
- <li class="dib">
616
- <span class="icon pa-icon">&#xe7b7;</span>
617
- <div class="name">file sync</div>
618
- <div class="code-name">&amp;#xe7b7;</div>
619
- </li>
620
-
621
- <li class="dib">
622
- <span class="icon pa-icon">&#xe78e;</span>
623
- <div class="name">setting</div>
624
- <div class="code-name">&amp;#xe78e;</div>
625
- </li>
626
-
627
- <li class="dib">
628
- <span class="icon pa-icon">&#xe7b4;</span>
629
- <div class="name">file search</div>
630
- <div class="code-name">&amp;#xe7b4;</div>
631
- </li>
632
-
633
- <li class="dib">
634
- <span class="icon pa-icon">&#xe7b5;</span>
635
- <div class="name">solution</div>
636
- <div class="code-name">&amp;#xe7b5;</div>
637
- </li>
638
-
639
- <li class="dib">
640
- <span class="icon pa-icon">&#xe866;</span>
641
- <div class="name">bulb-fill</div>
642
- <div class="code-name">&amp;#xe866;</div>
643
- </li>
644
-
645
- <li class="dib">
646
- <span class="icon pa-icon">&#xe86a;</span>
647
- <div class="name">star-fill</div>
648
- <div class="code-name">&amp;#xe86a;</div>
649
- </li>
650
-
651
- <li class="dib">
652
- <span class="icon pa-icon">&#xe7df;</span>
653
- <div class="name">star</div>
654
- <div class="code-name">&amp;#xe7df;</div>
655
- </li>
656
-
657
- <li class="dib">
658
- <span class="icon pa-icon">&#xe7fd;</span>
659
- <div class="name">minus</div>
660
- <div class="code-name">&amp;#xe7fd;</div>
661
- </li>
662
-
663
- <li class="dib">
664
- <span class="icon pa-icon">&#xe8fe;</span>
665
- <div class="name">plus</div>
666
- <div class="code-name">&amp;#xe8fe;</div>
667
- </li>
668
-
669
- <li class="dib">
670
- <span class="icon pa-icon">&#xe600;</span>
671
- <div class="name">3.1购物车</div>
672
- <div class="code-name">&amp;#xe600;</div>
673
- </li>
674
-
675
- <li class="dib">
676
- <span class="icon pa-icon">&#xe7fc;</span>
677
- <div class="name">close</div>
678
- <div class="code-name">&amp;#xe7fc;</div>
679
- </li>
680
-
681
- <li class="dib">
682
- <span class="icon pa-icon">&#xe7c4;</span>
683
- <div class="name">bulb</div>
684
- <div class="code-name">&amp;#xe7c4;</div>
685
- </li>
686
-
687
- <li class="dib">
688
- <span class="icon pa-icon">&#xe7eb;</span>
689
- <div class="name">right</div>
690
- <div class="code-name">&amp;#xe7eb;</div>
691
- </li>
692
-
693
- <li class="dib">
694
- <span class="icon pa-icon">&#xe7ec;</span>
695
- <div class="name">left</div>
696
- <div class="code-name">&amp;#xe7ec;</div>
697
- </li>
698
-
699
- <li class="dib">
700
- <span class="icon pa-icon">&#xe7ed;</span>
701
- <div class="name">up</div>
702
- <div class="code-name">&amp;#xe7ed;</div>
703
- </li>
704
-
705
- <li class="dib">
706
- <span class="icon pa-icon">&#xe7ee;</span>
707
- <div class="name">down</div>
708
- <div class="code-name">&amp;#xe7ee;</div>
709
- </li>
710
-
711
- <li class="dib">
712
- <span class="icon pa-icon">&#xe8ec;</span>
713
- <div class="name">caret-down</div>
714
- <div class="code-name">&amp;#xe8ec;</div>
715
- </li>
716
-
717
- <li class="dib">
718
- <span class="icon pa-icon">&#xe8ed;</span>
719
- <div class="name">caret-up</div>
720
- <div class="code-name">&amp;#xe8ed;</div>
721
- </li>
722
-
723
- <li class="dib">
724
- <span class="icon pa-icon">&#xe8ee;</span>
725
- <div class="name">caret-right</div>
726
- <div class="code-name">&amp;#xe8ee;</div>
727
- </li>
728
-
729
- <li class="dib">
730
- <span class="icon pa-icon">&#xe8ef;</span>
731
- <div class="name">caret-left</div>
732
- <div class="code-name">&amp;#xe8ef;</div>
733
- </li>
734
-
735
- <li class="dib">
736
- <span class="icon pa-icon">&#xe66c;</span>
737
- <div class="name">search</div>
738
- <div class="code-name">&amp;#xe66c;</div>
739
- </li>
740
-
741
- <li class="dib">
742
- <span class="icon pa-icon">&#xe6b6;</span>
743
- <div class="name">success</div>
744
- <div class="code-name">&amp;#xe6b6;</div>
745
- </li>
746
-
747
- </ul>
748
- <div class="article markdown">
749
- <h2 id="unicode-">Unicode 引用</h2>
750
- <hr>
751
-
752
- <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
753
- <ul>
754
- <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
755
- <li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
756
- </ul>
757
- <blockquote>
758
- <p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
759
- </blockquote>
760
- <p>Unicode 使用步骤如下:</p>
761
- <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
762
- <pre><code class="language-css"
763
- >@font-face {
764
- font-family: 'pa-icon';
765
- src: url('iconfont.woff2?t=1692684761658') format('woff2'),
766
- url('iconfont.woff?t=1692684761658') format('woff'),
767
- url('iconfont.ttf?t=1692684761658') format('truetype');
768
- }
769
- </code></pre>
770
- <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
771
- <pre><code class="language-css"
772
- >.pa-icon {
773
- font-family: "pa-icon" !important;
774
- font-size: 16px;
775
- font-style: normal;
776
- -webkit-font-smoothing: antialiased;
777
- -moz-osx-font-smoothing: grayscale;
778
- }
779
- </code></pre>
780
- <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
781
- <pre>
782
- <code class="language-html"
783
- >&lt;span class="pa-icon"&gt;&amp;#x33;&lt;/span&gt;
784
- </code></pre>
785
- <blockquote>
786
- <p>"pa-icon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
787
- </blockquote>
788
- </div>
789
- </div>
790
- <div class="content font-class">
791
- <ul class="icon_lists dib-box">
792
-
793
- <li class="dib">
794
- <span class="icon pa-icon pa-icon-order"></span>
795
- <div class="name">
796
- order
797
- </div>
798
- <div class="code-name">.pa-icon-order
799
- </div>
800
- </li>
801
-
802
- <li class="dib">
803
- <span class="icon pa-icon pa-icon-voice"></span>
804
- <div class="name">
805
- voice
806
- </div>
807
- <div class="code-name">.pa-icon-voice
808
- </div>
809
- </li>
810
-
811
- <li class="dib">
812
- <span class="icon pa-icon pa-icon-voice-fill"></span>
813
- <div class="name">
814
- voice_fill
815
- </div>
816
- <div class="code-name">.pa-icon-voice-fill
817
- </div>
818
- </li>
819
-
820
- <li class="dib">
821
- <span class="icon pa-icon pa-icon-sort"></span>
822
- <div class="name">
823
- sort
824
- </div>
825
- <div class="code-name">.pa-icon-sort
826
- </div>
827
- </li>
828
-
829
- <li class="dib">
830
- <span class="icon pa-icon pa-icon-attention-fill"></span>
831
- <div class="name">
832
- attention_fill
833
- </div>
834
- <div class="code-name">.pa-icon-attention-fill
835
- </div>
836
- </li>
837
-
838
- <li class="dib">
839
- <span class="icon pa-icon pa-icon-attention"></span>
840
- <div class="name">
841
- attention
842
- </div>
843
- <div class="code-name">.pa-icon-attention
844
- </div>
845
- </li>
846
-
847
- <li class="dib">
848
- <span class="icon pa-icon pa-icon-add"></span>
849
- <div class="name">
850
- add
851
- </div>
852
- <div class="code-name">.pa-icon-add
853
- </div>
854
- </li>
855
-
856
- <li class="dib">
857
- <span class="icon pa-icon pa-icon-move"></span>
858
- <div class="name">
859
- move
860
- </div>
861
- <div class="code-name">.pa-icon-move
862
- </div>
863
- </li>
864
-
865
- <li class="dib">
866
- <span class="icon pa-icon pa-icon-my"></span>
867
- <div class="name">
868
- my
869
- </div>
870
- <div class="code-name">.pa-icon-my
871
- </div>
872
- </li>
873
-
874
- <li class="dib">
875
- <span class="icon pa-icon pa-icon-my-fill"></span>
876
- <div class="name">
877
- my_fill
878
- </div>
879
- <div class="code-name">.pa-icon-my-fill
880
- </div>
881
- </li>
882
-
883
- <li class="dib">
884
- <span class="icon pa-icon pa-icon-attention-forbid"></span>
885
- <div class="name">
886
- attention_forbid
887
- </div>
888
- <div class="code-name">.pa-icon-attention-forbid
889
- </div>
890
- </li>
891
-
892
- <li class="dib">
893
- <span class="icon pa-icon pa-icon-attention-forbid-fill"></span>
894
- <div class="name">
895
- attention_forbid_fill
896
- </div>
897
- <div class="code-name">.pa-icon-attention-forbid-fill
898
- </div>
899
- </li>
900
-
901
- <li class="dib">
902
- <span class="icon pa-icon pa-icon-exit"></span>
903
- <div class="name">
904
- exit
905
- </div>
906
- <div class="code-name">.pa-icon-exit
907
- </div>
908
- </li>
909
-
910
- <li class="dib">
911
- <span class="icon pa-icon pa-icon-more"></span>
912
- <div class="name">
913
- more
914
- </div>
915
- <div class="code-name">.pa-icon-more
916
- </div>
917
- </li>
918
-
919
- <li class="dib">
920
- <span class="icon pa-icon pa-icon-copy"></span>
921
- <div class="name">
922
- copy
923
- </div>
924
- <div class="code-name">.pa-icon-copy
925
- </div>
926
- </li>
927
-
928
- <li class="dib">
929
- <span class="icon pa-icon pa-icon-round-check"></span>
930
- <div class="name">
931
- round_check
932
- </div>
933
- <div class="code-name">.pa-icon-round-check
934
- </div>
935
- </li>
936
-
937
- <li class="dib">
938
- <span class="icon pa-icon pa-icon-round-close"></span>
939
- <div class="name">
940
- round_close
941
- </div>
942
- <div class="code-name">.pa-icon-round-close
943
- </div>
944
- </li>
945
-
946
- <li class="dib">
947
- <span class="icon pa-icon pa-icon-appreciate"></span>
948
- <div class="name">
949
- appreciate
950
- </div>
951
- <div class="code-name">.pa-icon-appreciate
952
- </div>
953
- </li>
954
-
955
- <li class="dib">
956
- <span class="icon pa-icon pa-icon-edit"></span>
957
- <div class="name">
958
- edit
959
- </div>
960
- <div class="code-name">.pa-icon-edit
961
- </div>
962
- </li>
963
-
964
- <li class="dib">
965
- <span class="icon pa-icon pa-icon-favor-fill"></span>
966
- <div class="name">
967
- favor_fill
968
- </div>
969
- <div class="code-name">.pa-icon-favor-fill
970
- </div>
971
- </li>
972
-
973
- <li class="dib">
974
- <span class="icon pa-icon pa-icon-favor"></span>
975
- <div class="name">
976
- favor
977
- </div>
978
- <div class="code-name">.pa-icon-favor
979
- </div>
980
- </li>
981
-
982
- <li class="dib">
983
- <span class="icon pa-icon pa-icon-location-fill"></span>
984
- <div class="name">
985
- location_fill
986
- </div>
987
- <div class="code-name">.pa-icon-location-fill
988
- </div>
989
- </li>
990
-
991
- <li class="dib">
992
- <span class="icon pa-icon pa-icon-warn-fill"></span>
993
- <div class="name">
994
- warn_fill
995
- </div>
996
- <div class="code-name">.pa-icon-warn-fill
997
- </div>
998
- </li>
999
-
1000
- <li class="dib">
1001
- <span class="icon pa-icon pa-icon-warn"></span>
1002
- <div class="name">
1003
- warn
1004
- </div>
1005
- <div class="code-name">.pa-icon-warn
1006
- </div>
1007
- </li>
1008
-
1009
- <li class="dib">
1010
- <span class="icon pa-icon pa-icon-like-fill"></span>
1011
- <div class="name">
1012
- like_fill
1013
- </div>
1014
- <div class="code-name">.pa-icon-like-fill
1015
- </div>
1016
- </li>
1017
-
1018
- <li class="dib">
1019
- <span class="icon pa-icon pa-icon-like"></span>
1020
- <div class="name">
1021
- like
1022
- </div>
1023
- <div class="code-name">.pa-icon-like
1024
- </div>
1025
- </li>
1026
-
1027
- <li class="dib">
1028
- <span class="icon pa-icon pa-icon-settings"></span>
1029
- <div class="name">
1030
- settings
1031
- </div>
1032
- <div class="code-name">.pa-icon-settings
1033
- </div>
1034
- </li>
1035
-
1036
- <li class="dib">
1037
- <span class="icon pa-icon pa-icon-question-fill"></span>
1038
- <div class="name">
1039
- question_fill
1040
- </div>
1041
- <div class="code-name">.pa-icon-question-fill
1042
- </div>
1043
- </li>
1044
-
1045
- <li class="dib">
1046
- <span class="icon pa-icon pa-icon-question"></span>
1047
- <div class="name">
1048
- question
1049
- </div>
1050
- <div class="code-name">.pa-icon-question
1051
- </div>
1052
- </li>
1053
-
1054
- <li class="dib">
1055
- <span class="icon pa-icon pa-icon-more-android"></span>
1056
- <div class="name">
1057
- more_android
1058
- </div>
1059
- <div class="code-name">.pa-icon-more-android
1060
- </div>
1061
- </li>
1062
-
1063
- <li class="dib">
1064
- <span class="icon pa-icon pa-icon-delete-fill"></span>
1065
- <div class="name">
1066
- delete_fill
1067
- </div>
1068
- <div class="code-name">.pa-icon-delete-fill
1069
- </div>
1070
- </li>
1071
-
1072
- <li class="dib">
1073
- <span class="icon pa-icon pa-icon-qrcode"></span>
1074
- <div class="name">
1075
- qr_code
1076
- </div>
1077
- <div class="code-name">.pa-icon-qrcode
1078
- </div>
1079
- </li>
1080
-
1081
- <li class="dib">
1082
- <span class="icon pa-icon pa-icon-delete"></span>
1083
- <div class="name">
1084
- delete
1085
- </div>
1086
- <div class="code-name">.pa-icon-delete
1087
- </div>
1088
- </li>
1089
-
1090
- <li class="dib">
1091
- <span class="icon pa-icon pa-icon-message"></span>
1092
- <div class="name">
1093
- message
1094
- </div>
1095
- <div class="code-name">.pa-icon-message
1096
- </div>
1097
- </li>
1098
-
1099
- <li class="dib">
1100
- <span class="icon pa-icon pa-icon-link"></span>
1101
- <div class="name">
1102
- link
1103
- </div>
1104
- <div class="code-name">.pa-icon-link
1105
- </div>
1106
- </li>
1107
-
1108
- <li class="dib">
1109
- <span class="icon pa-icon pa-icon-appreciate-fill"></span>
1110
- <div class="name">
1111
- appreciate_fill
1112
- </div>
1113
- <div class="code-name">.pa-icon-appreciate-fill
1114
- </div>
1115
- </li>
1116
-
1117
- <li class="dib">
1118
- <span class="icon pa-icon pa-icon-info-fill"></span>
1119
- <div class="name">
1120
- info_fill
1121
- </div>
1122
- <div class="code-name">.pa-icon-info-fill
1123
- </div>
1124
- </li>
1125
-
1126
- <li class="dib">
1127
- <span class="icon pa-icon pa-icon-info"></span>
1128
- <div class="name">
1129
- info
1130
- </div>
1131
- <div class="code-name">.pa-icon-info
1132
- </div>
1133
- </li>
1134
-
1135
- <li class="dib">
1136
- <span class="icon pa-icon pa-icon-forward-fill"></span>
1137
- <div class="name">
1138
- forward_fill
1139
- </div>
1140
- <div class="code-name">.pa-icon-forward-fill
1141
- </div>
1142
- </li>
1143
-
1144
- <li class="dib">
1145
- <span class="icon pa-icon pa-icon-forward"></span>
1146
- <div class="name">
1147
- forward
1148
- </div>
1149
- <div class="code-name">.pa-icon-forward
1150
- </div>
1151
- </li>
1152
-
1153
- <li class="dib">
1154
- <span class="icon pa-icon pa-icon-recharge-fill"></span>
1155
- <div class="name">
1156
- recharge_fill
1157
- </div>
1158
- <div class="code-name">.pa-icon-recharge-fill
1159
- </div>
1160
- </li>
1161
-
1162
- <li class="dib">
1163
- <span class="icon pa-icon pa-icon-recharge"></span>
1164
- <div class="name">
1165
- recharge
1166
- </div>
1167
- <div class="code-name">.pa-icon-recharge
1168
- </div>
1169
- </li>
1170
-
1171
- <li class="dib">
1172
- <span class="icon pa-icon pa-icon-notice-fill"></span>
1173
- <div class="name">
1174
- notice_fill
1175
- </div>
1176
- <div class="code-name">.pa-icon-notice-fill
1177
- </div>
1178
- </li>
1179
-
1180
- <li class="dib">
1181
- <span class="icon pa-icon pa-icon-notice"></span>
1182
- <div class="name">
1183
- notice
1184
- </div>
1185
- <div class="code-name">.pa-icon-notice
1186
- </div>
1187
- </li>
1188
-
1189
- <li class="dib">
1190
- <span class="icon pa-icon pa-icon-apps"></span>
1191
- <div class="name">
1192
- apps
1193
- </div>
1194
- <div class="code-name">.pa-icon-apps
1195
- </div>
1196
- </li>
1197
-
1198
- <li class="dib">
1199
- <span class="icon pa-icon pa-icon-calendar"></span>
1200
- <div class="name">
1201
- calendar
1202
- </div>
1203
- <div class="code-name">.pa-icon-calendar
1204
- </div>
1205
- </li>
1206
-
1207
- <li class="dib">
1208
- <span class="icon pa-icon pa-icon-tag-fill"></span>
1209
- <div class="name">
1210
- tag_fill
1211
- </div>
1212
- <div class="code-name">.pa-icon-tag-fill
1213
- </div>
1214
- </li>
1215
-
1216
- <li class="dib">
1217
- <span class="icon pa-icon pa-icon-tag"></span>
1218
- <div class="name">
1219
- tag
1220
- </div>
1221
- <div class="code-name">.pa-icon-tag
1222
- </div>
1223
- </li>
1224
-
1225
- <li class="dib">
1226
- <span class="icon pa-icon pa-icon-post"></span>
1227
- <div class="name">
1228
- post
1229
- </div>
1230
- <div class="code-name">.pa-icon-post
1231
- </div>
1232
- </li>
1233
-
1234
- <li class="dib">
1235
- <span class="icon pa-icon pa-icon-write-fill"></span>
1236
- <div class="name">
1237
- write_fill
1238
- </div>
1239
- <div class="code-name">.pa-icon-write-fill
1240
- </div>
1241
- </li>
1242
-
1243
- <li class="dib">
1244
- <span class="icon pa-icon pa-icon-write"></span>
1245
- <div class="name">
1246
- write
1247
- </div>
1248
- <div class="code-name">.pa-icon-write
1249
- </div>
1250
- </li>
1251
-
1252
- <li class="dib">
1253
- <span class="icon pa-icon pa-icon-back-light"></span>
1254
- <div class="name">
1255
- back_light
1256
- </div>
1257
- <div class="code-name">.pa-icon-back-light
1258
- </div>
1259
- </li>
1260
-
1261
- <li class="dib">
1262
- <span class="icon pa-icon pa-icon-location"></span>
1263
- <div class="name">
1264
- location
1265
- </div>
1266
- <div class="code-name">.pa-icon-location
1267
- </div>
1268
- </li>
1269
-
1270
- <li class="dib">
1271
- <span class="icon pa-icon pa-icon-round-check-fill"></span>
1272
- <div class="name">
1273
- round_check_fill
1274
- </div>
1275
- <div class="code-name">.pa-icon-round-check-fill
1276
- </div>
1277
- </li>
1278
-
1279
- <li class="dib">
1280
- <span class="icon pa-icon pa-icon-round-close-fill"></span>
1281
- <div class="name">
1282
- round_close_fill
1283
- </div>
1284
- <div class="code-name">.pa-icon-round-close-fill
1285
- </div>
1286
- </li>
1287
-
1288
- <li class="dib">
1289
- <span class="icon pa-icon pa-icon-camera-fill"></span>
1290
- <div class="name">
1291
- camera_fill
1292
- </div>
1293
- <div class="code-name">.pa-icon-camera-fill
1294
- </div>
1295
- </li>
1296
-
1297
- <li class="dib">
1298
- <span class="icon pa-icon pa-icon-camera"></span>
1299
- <div class="name">
1300
- camera
1301
- </div>
1302
- <div class="code-name">.pa-icon-camera
1303
- </div>
1304
- </li>
1305
-
1306
- <li class="dib">
1307
- <span class="icon pa-icon pa-icon-scan"></span>
1308
- <div class="name">
1309
- scan
1310
- </div>
1311
- <div class="code-name">.pa-icon-scan
1312
- </div>
1313
- </li>
1314
-
1315
- <li class="dib">
1316
- <span class="icon pa-icon pa-icon-filter"></span>
1317
- <div class="name">
1318
- filter
1319
- </div>
1320
- <div class="code-name">.pa-icon-filter
1321
- </div>
1322
- </li>
1323
-
1324
- <li class="dib">
1325
- <span class="icon pa-icon pa-icon-home-fill"></span>
1326
- <div class="name">
1327
- home_fill
1328
- </div>
1329
- <div class="code-name">.pa-icon-home-fill
1330
- </div>
1331
- </li>
1332
-
1333
- <li class="dib">
1334
- <span class="icon pa-icon pa-icon-down"></span>
1335
- <div class="name">
1336
- unfold
1337
- </div>
1338
- <div class="code-name">.pa-icon-down
1339
- </div>
1340
- </li>
1341
-
1342
- <li class="dib">
1343
- <span class="icon pa-icon pa-icon-up"></span>
1344
- <div class="name">
1345
- fold
1346
- </div>
1347
- <div class="code-name">.pa-icon-up
1348
- </div>
1349
- </li>
1350
-
1351
- <li class="dib">
1352
- <span class="icon pa-icon pa-icon-notification"></span>
1353
- <div class="name">
1354
- notification
1355
- </div>
1356
- <div class="code-name">.pa-icon-notification
1357
- </div>
1358
- </li>
1359
-
1360
- <li class="dib">
1361
- <span class="icon pa-icon pa-icon-check"></span>
1362
- <div class="name">
1363
- check
1364
- </div>
1365
- <div class="code-name">.pa-icon-check
1366
- </div>
1367
- </li>
1368
-
1369
- <li class="dib">
1370
- <span class="icon pa-icon pa-icon-close"></span>
1371
- <div class="name">
1372
- close
1373
- </div>
1374
- <div class="code-name">.pa-icon-close
1375
- </div>
1376
- </li>
1377
-
1378
- <li class="dib">
1379
- <span class="icon pa-icon pa-icon-left"></span>
1380
- <div class="name">
1381
- back
1382
- </div>
1383
- <div class="code-name">.pa-icon-left
1384
- </div>
1385
- </li>
1386
-
1387
- <li class="dib">
1388
- <span class="icon pa-icon pa-icon-right"></span>
1389
- <div class="name">
1390
- right
1391
- </div>
1392
- <div class="code-name">.pa-icon-right
1393
- </div>
1394
- </li>
1395
-
1396
- <li class="dib">
1397
- <span class="icon pa-icon pa-icon-half-check"></span>
1398
- <div class="name">
1399
- 半选
1400
- </div>
1401
- <div class="code-name">.pa-icon-half-check
1402
- </div>
1403
- </li>
1404
-
1405
- <li class="dib">
1406
- <span class="icon pa-icon pa-icon-home"></span>
1407
- <div class="name">
1408
- home
1409
- </div>
1410
- <div class="code-name">.pa-icon-home
1411
- </div>
1412
- </li>
1413
-
1414
- <li class="dib">
1415
- <span class="icon pa-icon pa-icon-left-circle-fill"></span>
1416
- <div class="name">
1417
- left-circle-fill
1418
- </div>
1419
- <div class="code-name">.pa-icon-left-circle-fill
1420
- </div>
1421
- </li>
1422
-
1423
- <li class="dib">
1424
- <span class="icon pa-icon pa-icon-down-circle-fill"></span>
1425
- <div class="name">
1426
- down-circle-fill
1427
- </div>
1428
- <div class="code-name">.pa-icon-down-circle-fill
1429
- </div>
1430
- </li>
1431
-
1432
- <li class="dib">
1433
- <span class="icon pa-icon pa-icon-up-circle-fill"></span>
1434
- <div class="name">
1435
- up-circle-fill
1436
- </div>
1437
- <div class="code-name">.pa-icon-up-circle-fill
1438
- </div>
1439
- </li>
1440
-
1441
- <li class="dib">
1442
- <span class="icon pa-icon pa-icon-right-circle-fill"></span>
1443
- <div class="name">
1444
- right-circle-fill
1445
- </div>
1446
- <div class="code-name">.pa-icon-right-circle-fill
1447
- </div>
1448
- </li>
1449
-
1450
- <li class="dib">
1451
- <span class="icon pa-icon pa-icon-outdent"></span>
1452
- <div class="name">
1453
- outdent
1454
- </div>
1455
- <div class="code-name">.pa-icon-outdent
1456
- </div>
1457
- </li>
1458
-
1459
- <li class="dib">
1460
- <span class="icon pa-icon pa-icon-menu"></span>
1461
- <div class="name">
1462
- menu
1463
- </div>
1464
- <div class="code-name">.pa-icon-menu
1465
- </div>
1466
- </li>
1467
-
1468
- <li class="dib">
1469
- <span class="icon pa-icon pa-icon-unordered-list"></span>
1470
- <div class="name">
1471
- unordered list
1472
- </div>
1473
- <div class="code-name">.pa-icon-unordered-list
1474
- </div>
1475
- </li>
1476
-
1477
- <li class="dib">
1478
- <span class="icon pa-icon pa-icon-swap"></span>
1479
- <div class="name">
1480
- swap
1481
- </div>
1482
- <div class="code-name">.pa-icon-swap
1483
- </div>
1484
- </li>
1485
-
1486
- <li class="dib">
1487
- <span class="icon pa-icon pa-icon-image"></span>
1488
- <div class="name">
1489
- 小胖车图片
1490
- </div>
1491
- <div class="code-name">.pa-icon-image
1492
- </div>
1493
- </li>
1494
-
1495
- <li class="dib">
1496
- <span class="icon pa-icon pa-icon-image-error"></span>
1497
- <div class="name">
1498
- 小胖车图片加载失败
1499
- </div>
1500
- <div class="code-name">.pa-icon-image-error
1501
- </div>
1502
- </li>
1503
-
1504
- <li class="dib">
1505
- <span class="icon pa-icon pa-icon-minus-square"></span>
1506
- <div class="name">
1507
- minus-square
1508
- </div>
1509
- <div class="code-name">.pa-icon-minus-square
1510
- </div>
1511
- </li>
1512
-
1513
- <li class="dib">
1514
- <span class="icon pa-icon pa-icon-plus-square"></span>
1515
- <div class="name">
1516
- plus-square
1517
- </div>
1518
- <div class="code-name">.pa-icon-plus-square
1519
- </div>
1520
- </li>
1521
-
1522
- <li class="dib">
1523
- <span class="icon pa-icon pa-icon-save"></span>
1524
- <div class="name">
1525
- save
1526
- </div>
1527
- <div class="code-name">.pa-icon-save
1528
- </div>
1529
- </li>
1530
-
1531
- <li class="dib">
1532
- <span class="icon pa-icon pa-icon-close-square"></span>
1533
- <div class="name">
1534
- close-square
1535
- </div>
1536
- <div class="code-name">.pa-icon-close-square
1537
- </div>
1538
- </li>
1539
-
1540
- <li class="dib">
1541
- <span class="icon pa-icon pa-icon-detail"></span>
1542
- <div class="name">
1543
- detail
1544
- </div>
1545
- <div class="code-name">.pa-icon-detail
1546
- </div>
1547
- </li>
1548
-
1549
- <li class="dib">
1550
- <span class="icon pa-icon pa-icon-check-square"></span>
1551
- <div class="name">
1552
- check-square
1553
- </div>
1554
- <div class="code-name">.pa-icon-check-square
1555
- </div>
1556
- </li>
1557
-
1558
- <li class="dib">
1559
- <span class="icon pa-icon pa-icon-file-text"></span>
1560
- <div class="name">
1561
- file-text
1562
- </div>
1563
- <div class="code-name">.pa-icon-file-text
1564
- </div>
1565
- </li>
1566
-
1567
- <li class="dib">
1568
- <span class="icon pa-icon pa-icon-download"></span>
1569
- <div class="name">
1570
- download
1571
- </div>
1572
- <div class="code-name">.pa-icon-download
1573
- </div>
1574
- </li>
1575
-
1576
- <li class="dib">
1577
- <span class="icon pa-icon pa-icon-edit-square"></span>
1578
- <div class="name">
1579
- edit-square
1580
- </div>
1581
- <div class="code-name">.pa-icon-edit-square
1582
- </div>
1583
- </li>
1584
-
1585
- <li class="dib">
1586
- <span class="icon pa-icon pa-icon-credit-card"></span>
1587
- <div class="name">
1588
- credit card
1589
- </div>
1590
- <div class="code-name">.pa-icon-credit-card
1591
- </div>
1592
- </li>
1593
-
1594
- <li class="dib">
1595
- <span class="icon pa-icon pa-icon-property-safety"></span>
1596
- <div class="name">
1597
- property safety
1598
- </div>
1599
- <div class="code-name">.pa-icon-property-safety
1600
- </div>
1601
- </li>
1602
-
1603
- <li class="dib">
1604
- <span class="icon pa-icon pa-icon-transaction"></span>
1605
- <div class="name">
1606
- transaction
1607
- </div>
1608
- <div class="code-name">.pa-icon-transaction
1609
- </div>
1610
- </li>
1611
-
1612
- <li class="dib">
1613
- <span class="icon pa-icon pa-icon-database"></span>
1614
- <div class="name">
1615
- database
1616
- </div>
1617
- <div class="code-name">.pa-icon-database
1618
- </div>
1619
- </li>
1620
-
1621
- <li class="dib">
1622
- <span class="icon pa-icon pa-icon-file-done"></span>
1623
- <div class="name">
1624
- file done
1625
- </div>
1626
- <div class="code-name">.pa-icon-file-done
1627
- </div>
1628
- </li>
1629
-
1630
- <li class="dib">
1631
- <span class="icon pa-icon pa-icon-file-sync"></span>
1632
- <div class="name">
1633
- file sync
1634
- </div>
1635
- <div class="code-name">.pa-icon-file-sync
1636
- </div>
1637
- </li>
1638
-
1639
- <li class="dib">
1640
- <span class="icon pa-icon pa-icon-setting"></span>
1641
- <div class="name">
1642
- setting
1643
- </div>
1644
- <div class="code-name">.pa-icon-setting
1645
- </div>
1646
- </li>
1647
-
1648
- <li class="dib">
1649
- <span class="icon pa-icon pa-icon-file-search"></span>
1650
- <div class="name">
1651
- file search
1652
- </div>
1653
- <div class="code-name">.pa-icon-file-search
1654
- </div>
1655
- </li>
1656
-
1657
- <li class="dib">
1658
- <span class="icon pa-icon pa-icon-solution"></span>
1659
- <div class="name">
1660
- solution
1661
- </div>
1662
- <div class="code-name">.pa-icon-solution
1663
- </div>
1664
- </li>
1665
-
1666
- <li class="dib">
1667
- <span class="icon pa-icon pa-icon-bulb-fill"></span>
1668
- <div class="name">
1669
- bulb-fill
1670
- </div>
1671
- <div class="code-name">.pa-icon-bulb-fill
1672
- </div>
1673
- </li>
1674
-
1675
- <li class="dib">
1676
- <span class="icon pa-icon pa-icon-star-fill"></span>
1677
- <div class="name">
1678
- star-fill
1679
- </div>
1680
- <div class="code-name">.pa-icon-star-fill
1681
- </div>
1682
- </li>
1683
-
1684
- <li class="dib">
1685
- <span class="icon pa-icon pa-icon-star"></span>
1686
- <div class="name">
1687
- star
1688
- </div>
1689
- <div class="code-name">.pa-icon-star
1690
- </div>
1691
- </li>
1692
-
1693
- <li class="dib">
1694
- <span class="icon pa-icon pa-icon-minus"></span>
1695
- <div class="name">
1696
- minus
1697
- </div>
1698
- <div class="code-name">.pa-icon-minus
1699
- </div>
1700
- </li>
1701
-
1702
- <li class="dib">
1703
- <span class="icon pa-icon pa-icon-plus"></span>
1704
- <div class="name">
1705
- plus
1706
- </div>
1707
- <div class="code-name">.pa-icon-plus
1708
- </div>
1709
- </li>
1710
-
1711
- <li class="dib">
1712
- <span class="icon pa-icon pa-icon-cart"></span>
1713
- <div class="name">
1714
- 3.1购物车
1715
- </div>
1716
- <div class="code-name">.pa-icon-cart
1717
- </div>
1718
- </li>
1719
-
1720
- <li class="dib">
1721
- <span class="icon pa-icon pa-icon-clear"></span>
1722
- <div class="name">
1723
- close
1724
- </div>
1725
- <div class="code-name">.pa-icon-clear
1726
- </div>
1727
- </li>
1728
-
1729
- <li class="dib">
1730
- <span class="icon pa-icon pa-icon-bulb"></span>
1731
- <div class="name">
1732
- bulb
1733
- </div>
1734
- <div class="code-name">.pa-icon-bulb
1735
- </div>
1736
- </li>
1737
-
1738
- <li class="dib">
1739
- <span class="icon pa-icon pa-icon-arrow-right"></span>
1740
- <div class="name">
1741
- right
1742
- </div>
1743
- <div class="code-name">.pa-icon-arrow-right
1744
- </div>
1745
- </li>
1746
-
1747
- <li class="dib">
1748
- <span class="icon pa-icon pa-icon-arrow-left"></span>
1749
- <div class="name">
1750
- left
1751
- </div>
1752
- <div class="code-name">.pa-icon-arrow-left
1753
- </div>
1754
- </li>
1755
-
1756
- <li class="dib">
1757
- <span class="icon pa-icon pa-icon-arrow-up"></span>
1758
- <div class="name">
1759
- up
1760
- </div>
1761
- <div class="code-name">.pa-icon-arrow-up
1762
- </div>
1763
- </li>
1764
-
1765
- <li class="dib">
1766
- <span class="icon pa-icon pa-icon-arrow-down"></span>
1767
- <div class="name">
1768
- down
1769
- </div>
1770
- <div class="code-name">.pa-icon-arrow-down
1771
- </div>
1772
- </li>
1773
-
1774
- <li class="dib">
1775
- <span class="icon pa-icon pa-icon-caret-down"></span>
1776
- <div class="name">
1777
- caret-down
1778
- </div>
1779
- <div class="code-name">.pa-icon-caret-down
1780
- </div>
1781
- </li>
1782
-
1783
- <li class="dib">
1784
- <span class="icon pa-icon pa-icon-caret-up"></span>
1785
- <div class="name">
1786
- caret-up
1787
- </div>
1788
- <div class="code-name">.pa-icon-caret-up
1789
- </div>
1790
- </li>
1791
-
1792
- <li class="dib">
1793
- <span class="icon pa-icon pa-icon-caret-right"></span>
1794
- <div class="name">
1795
- caret-right
1796
- </div>
1797
- <div class="code-name">.pa-icon-caret-right
1798
- </div>
1799
- </li>
1800
-
1801
- <li class="dib">
1802
- <span class="icon pa-icon pa-icon-caret-left"></span>
1803
- <div class="name">
1804
- caret-left
1805
- </div>
1806
- <div class="code-name">.pa-icon-caret-left
1807
- </div>
1808
- </li>
1809
-
1810
- <li class="dib">
1811
- <span class="icon pa-icon pa-icon-search"></span>
1812
- <div class="name">
1813
- search
1814
- </div>
1815
- <div class="code-name">.pa-icon-search
1816
- </div>
1817
- </li>
1818
-
1819
- <li class="dib">
1820
- <span class="icon pa-icon pa-icon-success"></span>
1821
- <div class="name">
1822
- success
1823
- </div>
1824
- <div class="code-name">.pa-icon-success
1825
- </div>
1826
- </li>
1827
-
1828
- </ul>
1829
- <div class="article markdown">
1830
- <h2 id="font-class-">font-class 引用</h2>
1831
- <hr>
1832
-
1833
- <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
1834
- <p>与 Unicode 使用方式相比,具有如下特点:</p>
1835
- <ul>
1836
- <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
1837
- <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
1838
- </ul>
1839
- <p>使用步骤如下:</p>
1840
- <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
1841
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1842
- </code></pre>
1843
- <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
1844
- <pre><code class="language-html">&lt;span class="pa-icon pa-icon-xxx"&gt;&lt;/span&gt;
1845
- </code></pre>
1846
- <blockquote>
1847
- <p>"
1848
- pa-icon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
1849
- </blockquote>
1850
- </div>
1851
- </div>
1852
- <div class="content symbol">
1853
- <ul class="icon_lists dib-box">
1854
-
1855
- <li class="dib">
1856
- <svg class="icon svg-icon" aria-hidden="true">
1857
- <use xlink:href="#pa-icon-order"></use>
1858
- </svg>
1859
- <div class="name">order</div>
1860
- <div class="code-name">#pa-icon-order</div>
1861
- </li>
1862
-
1863
- <li class="dib">
1864
- <svg class="icon svg-icon" aria-hidden="true">
1865
- <use xlink:href="#pa-icon-voice"></use>
1866
- </svg>
1867
- <div class="name">voice</div>
1868
- <div class="code-name">#pa-icon-voice</div>
1869
- </li>
1870
-
1871
- <li class="dib">
1872
- <svg class="icon svg-icon" aria-hidden="true">
1873
- <use xlink:href="#pa-icon-voice-fill"></use>
1874
- </svg>
1875
- <div class="name">voice_fill</div>
1876
- <div class="code-name">#pa-icon-voice-fill</div>
1877
- </li>
1878
-
1879
- <li class="dib">
1880
- <svg class="icon svg-icon" aria-hidden="true">
1881
- <use xlink:href="#pa-icon-sort"></use>
1882
- </svg>
1883
- <div class="name">sort</div>
1884
- <div class="code-name">#pa-icon-sort</div>
1885
- </li>
1886
-
1887
- <li class="dib">
1888
- <svg class="icon svg-icon" aria-hidden="true">
1889
- <use xlink:href="#pa-icon-attention-fill"></use>
1890
- </svg>
1891
- <div class="name">attention_fill</div>
1892
- <div class="code-name">#pa-icon-attention-fill</div>
1893
- </li>
1894
-
1895
- <li class="dib">
1896
- <svg class="icon svg-icon" aria-hidden="true">
1897
- <use xlink:href="#pa-icon-attention"></use>
1898
- </svg>
1899
- <div class="name">attention</div>
1900
- <div class="code-name">#pa-icon-attention</div>
1901
- </li>
1902
-
1903
- <li class="dib">
1904
- <svg class="icon svg-icon" aria-hidden="true">
1905
- <use xlink:href="#pa-icon-add"></use>
1906
- </svg>
1907
- <div class="name">add</div>
1908
- <div class="code-name">#pa-icon-add</div>
1909
- </li>
1910
-
1911
- <li class="dib">
1912
- <svg class="icon svg-icon" aria-hidden="true">
1913
- <use xlink:href="#pa-icon-move"></use>
1914
- </svg>
1915
- <div class="name">move</div>
1916
- <div class="code-name">#pa-icon-move</div>
1917
- </li>
1918
-
1919
- <li class="dib">
1920
- <svg class="icon svg-icon" aria-hidden="true">
1921
- <use xlink:href="#pa-icon-my"></use>
1922
- </svg>
1923
- <div class="name">my</div>
1924
- <div class="code-name">#pa-icon-my</div>
1925
- </li>
1926
-
1927
- <li class="dib">
1928
- <svg class="icon svg-icon" aria-hidden="true">
1929
- <use xlink:href="#pa-icon-my-fill"></use>
1930
- </svg>
1931
- <div class="name">my_fill</div>
1932
- <div class="code-name">#pa-icon-my-fill</div>
1933
- </li>
1934
-
1935
- <li class="dib">
1936
- <svg class="icon svg-icon" aria-hidden="true">
1937
- <use xlink:href="#pa-icon-attention-forbid"></use>
1938
- </svg>
1939
- <div class="name">attention_forbid</div>
1940
- <div class="code-name">#pa-icon-attention-forbid</div>
1941
- </li>
1942
-
1943
- <li class="dib">
1944
- <svg class="icon svg-icon" aria-hidden="true">
1945
- <use xlink:href="#pa-icon-attention-forbid-fill"></use>
1946
- </svg>
1947
- <div class="name">attention_forbid_fill</div>
1948
- <div class="code-name">#pa-icon-attention-forbid-fill</div>
1949
- </li>
1950
-
1951
- <li class="dib">
1952
- <svg class="icon svg-icon" aria-hidden="true">
1953
- <use xlink:href="#pa-icon-exit"></use>
1954
- </svg>
1955
- <div class="name">exit</div>
1956
- <div class="code-name">#pa-icon-exit</div>
1957
- </li>
1958
-
1959
- <li class="dib">
1960
- <svg class="icon svg-icon" aria-hidden="true">
1961
- <use xlink:href="#pa-icon-more"></use>
1962
- </svg>
1963
- <div class="name">more</div>
1964
- <div class="code-name">#pa-icon-more</div>
1965
- </li>
1966
-
1967
- <li class="dib">
1968
- <svg class="icon svg-icon" aria-hidden="true">
1969
- <use xlink:href="#pa-icon-copy"></use>
1970
- </svg>
1971
- <div class="name">copy</div>
1972
- <div class="code-name">#pa-icon-copy</div>
1973
- </li>
1974
-
1975
- <li class="dib">
1976
- <svg class="icon svg-icon" aria-hidden="true">
1977
- <use xlink:href="#pa-icon-round-check"></use>
1978
- </svg>
1979
- <div class="name">round_check</div>
1980
- <div class="code-name">#pa-icon-round-check</div>
1981
- </li>
1982
-
1983
- <li class="dib">
1984
- <svg class="icon svg-icon" aria-hidden="true">
1985
- <use xlink:href="#pa-icon-round-close"></use>
1986
- </svg>
1987
- <div class="name">round_close</div>
1988
- <div class="code-name">#pa-icon-round-close</div>
1989
- </li>
1990
-
1991
- <li class="dib">
1992
- <svg class="icon svg-icon" aria-hidden="true">
1993
- <use xlink:href="#pa-icon-appreciate"></use>
1994
- </svg>
1995
- <div class="name">appreciate</div>
1996
- <div class="code-name">#pa-icon-appreciate</div>
1997
- </li>
1998
-
1999
- <li class="dib">
2000
- <svg class="icon svg-icon" aria-hidden="true">
2001
- <use xlink:href="#pa-icon-edit"></use>
2002
- </svg>
2003
- <div class="name">edit</div>
2004
- <div class="code-name">#pa-icon-edit</div>
2005
- </li>
2006
-
2007
- <li class="dib">
2008
- <svg class="icon svg-icon" aria-hidden="true">
2009
- <use xlink:href="#pa-icon-favor-fill"></use>
2010
- </svg>
2011
- <div class="name">favor_fill</div>
2012
- <div class="code-name">#pa-icon-favor-fill</div>
2013
- </li>
2014
-
2015
- <li class="dib">
2016
- <svg class="icon svg-icon" aria-hidden="true">
2017
- <use xlink:href="#pa-icon-favor"></use>
2018
- </svg>
2019
- <div class="name">favor</div>
2020
- <div class="code-name">#pa-icon-favor</div>
2021
- </li>
2022
-
2023
- <li class="dib">
2024
- <svg class="icon svg-icon" aria-hidden="true">
2025
- <use xlink:href="#pa-icon-location-fill"></use>
2026
- </svg>
2027
- <div class="name">location_fill</div>
2028
- <div class="code-name">#pa-icon-location-fill</div>
2029
- </li>
2030
-
2031
- <li class="dib">
2032
- <svg class="icon svg-icon" aria-hidden="true">
2033
- <use xlink:href="#pa-icon-warn-fill"></use>
2034
- </svg>
2035
- <div class="name">warn_fill</div>
2036
- <div class="code-name">#pa-icon-warn-fill</div>
2037
- </li>
2038
-
2039
- <li class="dib">
2040
- <svg class="icon svg-icon" aria-hidden="true">
2041
- <use xlink:href="#pa-icon-warn"></use>
2042
- </svg>
2043
- <div class="name">warn</div>
2044
- <div class="code-name">#pa-icon-warn</div>
2045
- </li>
2046
-
2047
- <li class="dib">
2048
- <svg class="icon svg-icon" aria-hidden="true">
2049
- <use xlink:href="#pa-icon-like-fill"></use>
2050
- </svg>
2051
- <div class="name">like_fill</div>
2052
- <div class="code-name">#pa-icon-like-fill</div>
2053
- </li>
2054
-
2055
- <li class="dib">
2056
- <svg class="icon svg-icon" aria-hidden="true">
2057
- <use xlink:href="#pa-icon-like"></use>
2058
- </svg>
2059
- <div class="name">like</div>
2060
- <div class="code-name">#pa-icon-like</div>
2061
- </li>
2062
-
2063
- <li class="dib">
2064
- <svg class="icon svg-icon" aria-hidden="true">
2065
- <use xlink:href="#pa-icon-settings"></use>
2066
- </svg>
2067
- <div class="name">settings</div>
2068
- <div class="code-name">#pa-icon-settings</div>
2069
- </li>
2070
-
2071
- <li class="dib">
2072
- <svg class="icon svg-icon" aria-hidden="true">
2073
- <use xlink:href="#pa-icon-question-fill"></use>
2074
- </svg>
2075
- <div class="name">question_fill</div>
2076
- <div class="code-name">#pa-icon-question-fill</div>
2077
- </li>
2078
-
2079
- <li class="dib">
2080
- <svg class="icon svg-icon" aria-hidden="true">
2081
- <use xlink:href="#pa-icon-question"></use>
2082
- </svg>
2083
- <div class="name">question</div>
2084
- <div class="code-name">#pa-icon-question</div>
2085
- </li>
2086
-
2087
- <li class="dib">
2088
- <svg class="icon svg-icon" aria-hidden="true">
2089
- <use xlink:href="#pa-icon-more-android"></use>
2090
- </svg>
2091
- <div class="name">more_android</div>
2092
- <div class="code-name">#pa-icon-more-android</div>
2093
- </li>
2094
-
2095
- <li class="dib">
2096
- <svg class="icon svg-icon" aria-hidden="true">
2097
- <use xlink:href="#pa-icon-delete-fill"></use>
2098
- </svg>
2099
- <div class="name">delete_fill</div>
2100
- <div class="code-name">#pa-icon-delete-fill</div>
2101
- </li>
2102
-
2103
- <li class="dib">
2104
- <svg class="icon svg-icon" aria-hidden="true">
2105
- <use xlink:href="#pa-icon-qrcode"></use>
2106
- </svg>
2107
- <div class="name">qr_code</div>
2108
- <div class="code-name">#pa-icon-qrcode</div>
2109
- </li>
2110
-
2111
- <li class="dib">
2112
- <svg class="icon svg-icon" aria-hidden="true">
2113
- <use xlink:href="#pa-icon-delete"></use>
2114
- </svg>
2115
- <div class="name">delete</div>
2116
- <div class="code-name">#pa-icon-delete</div>
2117
- </li>
2118
-
2119
- <li class="dib">
2120
- <svg class="icon svg-icon" aria-hidden="true">
2121
- <use xlink:href="#pa-icon-message"></use>
2122
- </svg>
2123
- <div class="name">message</div>
2124
- <div class="code-name">#pa-icon-message</div>
2125
- </li>
2126
-
2127
- <li class="dib">
2128
- <svg class="icon svg-icon" aria-hidden="true">
2129
- <use xlink:href="#pa-icon-link"></use>
2130
- </svg>
2131
- <div class="name">link</div>
2132
- <div class="code-name">#pa-icon-link</div>
2133
- </li>
2134
-
2135
- <li class="dib">
2136
- <svg class="icon svg-icon" aria-hidden="true">
2137
- <use xlink:href="#pa-icon-appreciate-fill"></use>
2138
- </svg>
2139
- <div class="name">appreciate_fill</div>
2140
- <div class="code-name">#pa-icon-appreciate-fill</div>
2141
- </li>
2142
-
2143
- <li class="dib">
2144
- <svg class="icon svg-icon" aria-hidden="true">
2145
- <use xlink:href="#pa-icon-info-fill"></use>
2146
- </svg>
2147
- <div class="name">info_fill</div>
2148
- <div class="code-name">#pa-icon-info-fill</div>
2149
- </li>
2150
-
2151
- <li class="dib">
2152
- <svg class="icon svg-icon" aria-hidden="true">
2153
- <use xlink:href="#pa-icon-info"></use>
2154
- </svg>
2155
- <div class="name">info</div>
2156
- <div class="code-name">#pa-icon-info</div>
2157
- </li>
2158
-
2159
- <li class="dib">
2160
- <svg class="icon svg-icon" aria-hidden="true">
2161
- <use xlink:href="#pa-icon-forward-fill"></use>
2162
- </svg>
2163
- <div class="name">forward_fill</div>
2164
- <div class="code-name">#pa-icon-forward-fill</div>
2165
- </li>
2166
-
2167
- <li class="dib">
2168
- <svg class="icon svg-icon" aria-hidden="true">
2169
- <use xlink:href="#pa-icon-forward"></use>
2170
- </svg>
2171
- <div class="name">forward</div>
2172
- <div class="code-name">#pa-icon-forward</div>
2173
- </li>
2174
-
2175
- <li class="dib">
2176
- <svg class="icon svg-icon" aria-hidden="true">
2177
- <use xlink:href="#pa-icon-recharge-fill"></use>
2178
- </svg>
2179
- <div class="name">recharge_fill</div>
2180
- <div class="code-name">#pa-icon-recharge-fill</div>
2181
- </li>
2182
-
2183
- <li class="dib">
2184
- <svg class="icon svg-icon" aria-hidden="true">
2185
- <use xlink:href="#pa-icon-recharge"></use>
2186
- </svg>
2187
- <div class="name">recharge</div>
2188
- <div class="code-name">#pa-icon-recharge</div>
2189
- </li>
2190
-
2191
- <li class="dib">
2192
- <svg class="icon svg-icon" aria-hidden="true">
2193
- <use xlink:href="#pa-icon-notice-fill"></use>
2194
- </svg>
2195
- <div class="name">notice_fill</div>
2196
- <div class="code-name">#pa-icon-notice-fill</div>
2197
- </li>
2198
-
2199
- <li class="dib">
2200
- <svg class="icon svg-icon" aria-hidden="true">
2201
- <use xlink:href="#pa-icon-notice"></use>
2202
- </svg>
2203
- <div class="name">notice</div>
2204
- <div class="code-name">#pa-icon-notice</div>
2205
- </li>
2206
-
2207
- <li class="dib">
2208
- <svg class="icon svg-icon" aria-hidden="true">
2209
- <use xlink:href="#pa-icon-apps"></use>
2210
- </svg>
2211
- <div class="name">apps</div>
2212
- <div class="code-name">#pa-icon-apps</div>
2213
- </li>
2214
-
2215
- <li class="dib">
2216
- <svg class="icon svg-icon" aria-hidden="true">
2217
- <use xlink:href="#pa-icon-calendar"></use>
2218
- </svg>
2219
- <div class="name">calendar</div>
2220
- <div class="code-name">#pa-icon-calendar</div>
2221
- </li>
2222
-
2223
- <li class="dib">
2224
- <svg class="icon svg-icon" aria-hidden="true">
2225
- <use xlink:href="#pa-icon-tag-fill"></use>
2226
- </svg>
2227
- <div class="name">tag_fill</div>
2228
- <div class="code-name">#pa-icon-tag-fill</div>
2229
- </li>
2230
-
2231
- <li class="dib">
2232
- <svg class="icon svg-icon" aria-hidden="true">
2233
- <use xlink:href="#pa-icon-tag"></use>
2234
- </svg>
2235
- <div class="name">tag</div>
2236
- <div class="code-name">#pa-icon-tag</div>
2237
- </li>
2238
-
2239
- <li class="dib">
2240
- <svg class="icon svg-icon" aria-hidden="true">
2241
- <use xlink:href="#pa-icon-post"></use>
2242
- </svg>
2243
- <div class="name">post</div>
2244
- <div class="code-name">#pa-icon-post</div>
2245
- </li>
2246
-
2247
- <li class="dib">
2248
- <svg class="icon svg-icon" aria-hidden="true">
2249
- <use xlink:href="#pa-icon-write-fill"></use>
2250
- </svg>
2251
- <div class="name">write_fill</div>
2252
- <div class="code-name">#pa-icon-write-fill</div>
2253
- </li>
2254
-
2255
- <li class="dib">
2256
- <svg class="icon svg-icon" aria-hidden="true">
2257
- <use xlink:href="#pa-icon-write"></use>
2258
- </svg>
2259
- <div class="name">write</div>
2260
- <div class="code-name">#pa-icon-write</div>
2261
- </li>
2262
-
2263
- <li class="dib">
2264
- <svg class="icon svg-icon" aria-hidden="true">
2265
- <use xlink:href="#pa-icon-back-light"></use>
2266
- </svg>
2267
- <div class="name">back_light</div>
2268
- <div class="code-name">#pa-icon-back-light</div>
2269
- </li>
2270
-
2271
- <li class="dib">
2272
- <svg class="icon svg-icon" aria-hidden="true">
2273
- <use xlink:href="#pa-icon-location"></use>
2274
- </svg>
2275
- <div class="name">location</div>
2276
- <div class="code-name">#pa-icon-location</div>
2277
- </li>
2278
-
2279
- <li class="dib">
2280
- <svg class="icon svg-icon" aria-hidden="true">
2281
- <use xlink:href="#pa-icon-round-check-fill"></use>
2282
- </svg>
2283
- <div class="name">round_check_fill</div>
2284
- <div class="code-name">#pa-icon-round-check-fill</div>
2285
- </li>
2286
-
2287
- <li class="dib">
2288
- <svg class="icon svg-icon" aria-hidden="true">
2289
- <use xlink:href="#pa-icon-round-close-fill"></use>
2290
- </svg>
2291
- <div class="name">round_close_fill</div>
2292
- <div class="code-name">#pa-icon-round-close-fill</div>
2293
- </li>
2294
-
2295
- <li class="dib">
2296
- <svg class="icon svg-icon" aria-hidden="true">
2297
- <use xlink:href="#pa-icon-camera-fill"></use>
2298
- </svg>
2299
- <div class="name">camera_fill</div>
2300
- <div class="code-name">#pa-icon-camera-fill</div>
2301
- </li>
2302
-
2303
- <li class="dib">
2304
- <svg class="icon svg-icon" aria-hidden="true">
2305
- <use xlink:href="#pa-icon-camera"></use>
2306
- </svg>
2307
- <div class="name">camera</div>
2308
- <div class="code-name">#pa-icon-camera</div>
2309
- </li>
2310
-
2311
- <li class="dib">
2312
- <svg class="icon svg-icon" aria-hidden="true">
2313
- <use xlink:href="#pa-icon-scan"></use>
2314
- </svg>
2315
- <div class="name">scan</div>
2316
- <div class="code-name">#pa-icon-scan</div>
2317
- </li>
2318
-
2319
- <li class="dib">
2320
- <svg class="icon svg-icon" aria-hidden="true">
2321
- <use xlink:href="#pa-icon-filter"></use>
2322
- </svg>
2323
- <div class="name">filter</div>
2324
- <div class="code-name">#pa-icon-filter</div>
2325
- </li>
2326
-
2327
- <li class="dib">
2328
- <svg class="icon svg-icon" aria-hidden="true">
2329
- <use xlink:href="#pa-icon-home-fill"></use>
2330
- </svg>
2331
- <div class="name">home_fill</div>
2332
- <div class="code-name">#pa-icon-home-fill</div>
2333
- </li>
2334
-
2335
- <li class="dib">
2336
- <svg class="icon svg-icon" aria-hidden="true">
2337
- <use xlink:href="#pa-icon-down"></use>
2338
- </svg>
2339
- <div class="name">unfold</div>
2340
- <div class="code-name">#pa-icon-down</div>
2341
- </li>
2342
-
2343
- <li class="dib">
2344
- <svg class="icon svg-icon" aria-hidden="true">
2345
- <use xlink:href="#pa-icon-up"></use>
2346
- </svg>
2347
- <div class="name">fold</div>
2348
- <div class="code-name">#pa-icon-up</div>
2349
- </li>
2350
-
2351
- <li class="dib">
2352
- <svg class="icon svg-icon" aria-hidden="true">
2353
- <use xlink:href="#pa-icon-notification"></use>
2354
- </svg>
2355
- <div class="name">notification</div>
2356
- <div class="code-name">#pa-icon-notification</div>
2357
- </li>
2358
-
2359
- <li class="dib">
2360
- <svg class="icon svg-icon" aria-hidden="true">
2361
- <use xlink:href="#pa-icon-check"></use>
2362
- </svg>
2363
- <div class="name">check</div>
2364
- <div class="code-name">#pa-icon-check</div>
2365
- </li>
2366
-
2367
- <li class="dib">
2368
- <svg class="icon svg-icon" aria-hidden="true">
2369
- <use xlink:href="#pa-icon-close"></use>
2370
- </svg>
2371
- <div class="name">close</div>
2372
- <div class="code-name">#pa-icon-close</div>
2373
- </li>
2374
-
2375
- <li class="dib">
2376
- <svg class="icon svg-icon" aria-hidden="true">
2377
- <use xlink:href="#pa-icon-left"></use>
2378
- </svg>
2379
- <div class="name">back</div>
2380
- <div class="code-name">#pa-icon-left</div>
2381
- </li>
2382
-
2383
- <li class="dib">
2384
- <svg class="icon svg-icon" aria-hidden="true">
2385
- <use xlink:href="#pa-icon-right"></use>
2386
- </svg>
2387
- <div class="name">right</div>
2388
- <div class="code-name">#pa-icon-right</div>
2389
- </li>
2390
-
2391
- <li class="dib">
2392
- <svg class="icon svg-icon" aria-hidden="true">
2393
- <use xlink:href="#pa-icon-half-check"></use>
2394
- </svg>
2395
- <div class="name">半选</div>
2396
- <div class="code-name">#pa-icon-half-check</div>
2397
- </li>
2398
-
2399
- <li class="dib">
2400
- <svg class="icon svg-icon" aria-hidden="true">
2401
- <use xlink:href="#pa-icon-home"></use>
2402
- </svg>
2403
- <div class="name">home</div>
2404
- <div class="code-name">#pa-icon-home</div>
2405
- </li>
2406
-
2407
- <li class="dib">
2408
- <svg class="icon svg-icon" aria-hidden="true">
2409
- <use xlink:href="#pa-icon-left-circle-fill"></use>
2410
- </svg>
2411
- <div class="name">left-circle-fill</div>
2412
- <div class="code-name">#pa-icon-left-circle-fill</div>
2413
- </li>
2414
-
2415
- <li class="dib">
2416
- <svg class="icon svg-icon" aria-hidden="true">
2417
- <use xlink:href="#pa-icon-down-circle-fill"></use>
2418
- </svg>
2419
- <div class="name">down-circle-fill</div>
2420
- <div class="code-name">#pa-icon-down-circle-fill</div>
2421
- </li>
2422
-
2423
- <li class="dib">
2424
- <svg class="icon svg-icon" aria-hidden="true">
2425
- <use xlink:href="#pa-icon-up-circle-fill"></use>
2426
- </svg>
2427
- <div class="name">up-circle-fill</div>
2428
- <div class="code-name">#pa-icon-up-circle-fill</div>
2429
- </li>
2430
-
2431
- <li class="dib">
2432
- <svg class="icon svg-icon" aria-hidden="true">
2433
- <use xlink:href="#pa-icon-right-circle-fill"></use>
2434
- </svg>
2435
- <div class="name">right-circle-fill</div>
2436
- <div class="code-name">#pa-icon-right-circle-fill</div>
2437
- </li>
2438
-
2439
- <li class="dib">
2440
- <svg class="icon svg-icon" aria-hidden="true">
2441
- <use xlink:href="#pa-icon-outdent"></use>
2442
- </svg>
2443
- <div class="name">outdent</div>
2444
- <div class="code-name">#pa-icon-outdent</div>
2445
- </li>
2446
-
2447
- <li class="dib">
2448
- <svg class="icon svg-icon" aria-hidden="true">
2449
- <use xlink:href="#pa-icon-menu"></use>
2450
- </svg>
2451
- <div class="name">menu</div>
2452
- <div class="code-name">#pa-icon-menu</div>
2453
- </li>
2454
-
2455
- <li class="dib">
2456
- <svg class="icon svg-icon" aria-hidden="true">
2457
- <use xlink:href="#pa-icon-unordered-list"></use>
2458
- </svg>
2459
- <div class="name">unordered list</div>
2460
- <div class="code-name">#pa-icon-unordered-list</div>
2461
- </li>
2462
-
2463
- <li class="dib">
2464
- <svg class="icon svg-icon" aria-hidden="true">
2465
- <use xlink:href="#pa-icon-swap"></use>
2466
- </svg>
2467
- <div class="name">swap</div>
2468
- <div class="code-name">#pa-icon-swap</div>
2469
- </li>
2470
-
2471
- <li class="dib">
2472
- <svg class="icon svg-icon" aria-hidden="true">
2473
- <use xlink:href="#pa-icon-image"></use>
2474
- </svg>
2475
- <div class="name">小胖车图片</div>
2476
- <div class="code-name">#pa-icon-image</div>
2477
- </li>
2478
-
2479
- <li class="dib">
2480
- <svg class="icon svg-icon" aria-hidden="true">
2481
- <use xlink:href="#pa-icon-image-error"></use>
2482
- </svg>
2483
- <div class="name">小胖车图片加载失败</div>
2484
- <div class="code-name">#pa-icon-image-error</div>
2485
- </li>
2486
-
2487
- <li class="dib">
2488
- <svg class="icon svg-icon" aria-hidden="true">
2489
- <use xlink:href="#pa-icon-minus-square"></use>
2490
- </svg>
2491
- <div class="name">minus-square</div>
2492
- <div class="code-name">#pa-icon-minus-square</div>
2493
- </li>
2494
-
2495
- <li class="dib">
2496
- <svg class="icon svg-icon" aria-hidden="true">
2497
- <use xlink:href="#pa-icon-plus-square"></use>
2498
- </svg>
2499
- <div class="name">plus-square</div>
2500
- <div class="code-name">#pa-icon-plus-square</div>
2501
- </li>
2502
-
2503
- <li class="dib">
2504
- <svg class="icon svg-icon" aria-hidden="true">
2505
- <use xlink:href="#pa-icon-save"></use>
2506
- </svg>
2507
- <div class="name">save</div>
2508
- <div class="code-name">#pa-icon-save</div>
2509
- </li>
2510
-
2511
- <li class="dib">
2512
- <svg class="icon svg-icon" aria-hidden="true">
2513
- <use xlink:href="#pa-icon-close-square"></use>
2514
- </svg>
2515
- <div class="name">close-square</div>
2516
- <div class="code-name">#pa-icon-close-square</div>
2517
- </li>
2518
-
2519
- <li class="dib">
2520
- <svg class="icon svg-icon" aria-hidden="true">
2521
- <use xlink:href="#pa-icon-detail"></use>
2522
- </svg>
2523
- <div class="name">detail</div>
2524
- <div class="code-name">#pa-icon-detail</div>
2525
- </li>
2526
-
2527
- <li class="dib">
2528
- <svg class="icon svg-icon" aria-hidden="true">
2529
- <use xlink:href="#pa-icon-check-square"></use>
2530
- </svg>
2531
- <div class="name">check-square</div>
2532
- <div class="code-name">#pa-icon-check-square</div>
2533
- </li>
2534
-
2535
- <li class="dib">
2536
- <svg class="icon svg-icon" aria-hidden="true">
2537
- <use xlink:href="#pa-icon-file-text"></use>
2538
- </svg>
2539
- <div class="name">file-text</div>
2540
- <div class="code-name">#pa-icon-file-text</div>
2541
- </li>
2542
-
2543
- <li class="dib">
2544
- <svg class="icon svg-icon" aria-hidden="true">
2545
- <use xlink:href="#pa-icon-download"></use>
2546
- </svg>
2547
- <div class="name">download</div>
2548
- <div class="code-name">#pa-icon-download</div>
2549
- </li>
2550
-
2551
- <li class="dib">
2552
- <svg class="icon svg-icon" aria-hidden="true">
2553
- <use xlink:href="#pa-icon-edit-square"></use>
2554
- </svg>
2555
- <div class="name">edit-square</div>
2556
- <div class="code-name">#pa-icon-edit-square</div>
2557
- </li>
2558
-
2559
- <li class="dib">
2560
- <svg class="icon svg-icon" aria-hidden="true">
2561
- <use xlink:href="#pa-icon-credit-card"></use>
2562
- </svg>
2563
- <div class="name">credit card</div>
2564
- <div class="code-name">#pa-icon-credit-card</div>
2565
- </li>
2566
-
2567
- <li class="dib">
2568
- <svg class="icon svg-icon" aria-hidden="true">
2569
- <use xlink:href="#pa-icon-property-safety"></use>
2570
- </svg>
2571
- <div class="name">property safety</div>
2572
- <div class="code-name">#pa-icon-property-safety</div>
2573
- </li>
2574
-
2575
- <li class="dib">
2576
- <svg class="icon svg-icon" aria-hidden="true">
2577
- <use xlink:href="#pa-icon-transaction"></use>
2578
- </svg>
2579
- <div class="name">transaction</div>
2580
- <div class="code-name">#pa-icon-transaction</div>
2581
- </li>
2582
-
2583
- <li class="dib">
2584
- <svg class="icon svg-icon" aria-hidden="true">
2585
- <use xlink:href="#pa-icon-database"></use>
2586
- </svg>
2587
- <div class="name">database</div>
2588
- <div class="code-name">#pa-icon-database</div>
2589
- </li>
2590
-
2591
- <li class="dib">
2592
- <svg class="icon svg-icon" aria-hidden="true">
2593
- <use xlink:href="#pa-icon-file-done"></use>
2594
- </svg>
2595
- <div class="name">file done</div>
2596
- <div class="code-name">#pa-icon-file-done</div>
2597
- </li>
2598
-
2599
- <li class="dib">
2600
- <svg class="icon svg-icon" aria-hidden="true">
2601
- <use xlink:href="#pa-icon-file-sync"></use>
2602
- </svg>
2603
- <div class="name">file sync</div>
2604
- <div class="code-name">#pa-icon-file-sync</div>
2605
- </li>
2606
-
2607
- <li class="dib">
2608
- <svg class="icon svg-icon" aria-hidden="true">
2609
- <use xlink:href="#pa-icon-setting"></use>
2610
- </svg>
2611
- <div class="name">setting</div>
2612
- <div class="code-name">#pa-icon-setting</div>
2613
- </li>
2614
-
2615
- <li class="dib">
2616
- <svg class="icon svg-icon" aria-hidden="true">
2617
- <use xlink:href="#pa-icon-file-search"></use>
2618
- </svg>
2619
- <div class="name">file search</div>
2620
- <div class="code-name">#pa-icon-file-search</div>
2621
- </li>
2622
-
2623
- <li class="dib">
2624
- <svg class="icon svg-icon" aria-hidden="true">
2625
- <use xlink:href="#pa-icon-solution"></use>
2626
- </svg>
2627
- <div class="name">solution</div>
2628
- <div class="code-name">#pa-icon-solution</div>
2629
- </li>
2630
-
2631
- <li class="dib">
2632
- <svg class="icon svg-icon" aria-hidden="true">
2633
- <use xlink:href="#pa-icon-bulb-fill"></use>
2634
- </svg>
2635
- <div class="name">bulb-fill</div>
2636
- <div class="code-name">#pa-icon-bulb-fill</div>
2637
- </li>
2638
-
2639
- <li class="dib">
2640
- <svg class="icon svg-icon" aria-hidden="true">
2641
- <use xlink:href="#pa-icon-star-fill"></use>
2642
- </svg>
2643
- <div class="name">star-fill</div>
2644
- <div class="code-name">#pa-icon-star-fill</div>
2645
- </li>
2646
-
2647
- <li class="dib">
2648
- <svg class="icon svg-icon" aria-hidden="true">
2649
- <use xlink:href="#pa-icon-star"></use>
2650
- </svg>
2651
- <div class="name">star</div>
2652
- <div class="code-name">#pa-icon-star</div>
2653
- </li>
2654
-
2655
- <li class="dib">
2656
- <svg class="icon svg-icon" aria-hidden="true">
2657
- <use xlink:href="#pa-icon-minus"></use>
2658
- </svg>
2659
- <div class="name">minus</div>
2660
- <div class="code-name">#pa-icon-minus</div>
2661
- </li>
2662
-
2663
- <li class="dib">
2664
- <svg class="icon svg-icon" aria-hidden="true">
2665
- <use xlink:href="#pa-icon-plus"></use>
2666
- </svg>
2667
- <div class="name">plus</div>
2668
- <div class="code-name">#pa-icon-plus</div>
2669
- </li>
2670
-
2671
- <li class="dib">
2672
- <svg class="icon svg-icon" aria-hidden="true">
2673
- <use xlink:href="#pa-icon-cart"></use>
2674
- </svg>
2675
- <div class="name">3.1购物车</div>
2676
- <div class="code-name">#pa-icon-cart</div>
2677
- </li>
2678
-
2679
- <li class="dib">
2680
- <svg class="icon svg-icon" aria-hidden="true">
2681
- <use xlink:href="#pa-icon-clear"></use>
2682
- </svg>
2683
- <div class="name">close</div>
2684
- <div class="code-name">#pa-icon-clear</div>
2685
- </li>
2686
-
2687
- <li class="dib">
2688
- <svg class="icon svg-icon" aria-hidden="true">
2689
- <use xlink:href="#pa-icon-bulb"></use>
2690
- </svg>
2691
- <div class="name">bulb</div>
2692
- <div class="code-name">#pa-icon-bulb</div>
2693
- </li>
2694
-
2695
- <li class="dib">
2696
- <svg class="icon svg-icon" aria-hidden="true">
2697
- <use xlink:href="#pa-icon-arrow-right"></use>
2698
- </svg>
2699
- <div class="name">right</div>
2700
- <div class="code-name">#pa-icon-arrow-right</div>
2701
- </li>
2702
-
2703
- <li class="dib">
2704
- <svg class="icon svg-icon" aria-hidden="true">
2705
- <use xlink:href="#pa-icon-arrow-left"></use>
2706
- </svg>
2707
- <div class="name">left</div>
2708
- <div class="code-name">#pa-icon-arrow-left</div>
2709
- </li>
2710
-
2711
- <li class="dib">
2712
- <svg class="icon svg-icon" aria-hidden="true">
2713
- <use xlink:href="#pa-icon-arrow-up"></use>
2714
- </svg>
2715
- <div class="name">up</div>
2716
- <div class="code-name">#pa-icon-arrow-up</div>
2717
- </li>
2718
-
2719
- <li class="dib">
2720
- <svg class="icon svg-icon" aria-hidden="true">
2721
- <use xlink:href="#pa-icon-arrow-down"></use>
2722
- </svg>
2723
- <div class="name">down</div>
2724
- <div class="code-name">#pa-icon-arrow-down</div>
2725
- </li>
2726
-
2727
- <li class="dib">
2728
- <svg class="icon svg-icon" aria-hidden="true">
2729
- <use xlink:href="#pa-icon-caret-down"></use>
2730
- </svg>
2731
- <div class="name">caret-down</div>
2732
- <div class="code-name">#pa-icon-caret-down</div>
2733
- </li>
2734
-
2735
- <li class="dib">
2736
- <svg class="icon svg-icon" aria-hidden="true">
2737
- <use xlink:href="#pa-icon-caret-up"></use>
2738
- </svg>
2739
- <div class="name">caret-up</div>
2740
- <div class="code-name">#pa-icon-caret-up</div>
2741
- </li>
2742
-
2743
- <li class="dib">
2744
- <svg class="icon svg-icon" aria-hidden="true">
2745
- <use xlink:href="#pa-icon-caret-right"></use>
2746
- </svg>
2747
- <div class="name">caret-right</div>
2748
- <div class="code-name">#pa-icon-caret-right</div>
2749
- </li>
2750
-
2751
- <li class="dib">
2752
- <svg class="icon svg-icon" aria-hidden="true">
2753
- <use xlink:href="#pa-icon-caret-left"></use>
2754
- </svg>
2755
- <div class="name">caret-left</div>
2756
- <div class="code-name">#pa-icon-caret-left</div>
2757
- </li>
2758
-
2759
- <li class="dib">
2760
- <svg class="icon svg-icon" aria-hidden="true">
2761
- <use xlink:href="#pa-icon-search"></use>
2762
- </svg>
2763
- <div class="name">search</div>
2764
- <div class="code-name">#pa-icon-search</div>
2765
- </li>
2766
-
2767
- <li class="dib">
2768
- <svg class="icon svg-icon" aria-hidden="true">
2769
- <use xlink:href="#pa-icon-success"></use>
2770
- </svg>
2771
- <div class="name">success</div>
2772
- <div class="code-name">#pa-icon-success</div>
2773
- </li>
2774
-
2775
- </ul>
2776
- <div class="article markdown">
2777
- <h2 id="symbol-">Symbol 引用</h2>
2778
- <hr>
2779
-
2780
- <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
2781
- 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
2782
- <ul>
2783
- <li>支持多色图标了,不再受单色限制。</li>
2784
- <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
2785
- <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
2786
- <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
2787
- </ul>
2788
- <p>使用步骤如下:</p>
2789
- <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
2790
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
2791
- </code></pre>
2792
- <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
2793
- <pre><code class="language-html">&lt;style&gt;
2794
- .icon {
2795
- width: 1em;
2796
- height: 1em;
2797
- vertical-align: -0.15em;
2798
- fill: currentColor;
2799
- overflow: hidden;
2800
- }
2801
- &lt;/style&gt;
2802
- </code></pre>
2803
- <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
2804
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
2805
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
2806
- &lt;/svg&gt;
2807
- </code></pre>
2808
- </div>
2809
- </div>
2810
-
2811
- </div>
2812
- </div>
2813
- <script>
2814
- $(document).ready(function () {
2815
- $('.tab-container .content:first').show()
2816
-
2817
- $('#tabs li').click(function (e) {
2818
- var tabContent = $('.tab-container .content')
2819
- var index = $(this).index()
2820
-
2821
- if ($(this).hasClass('active')) {
2822
- return
2823
- } else {
2824
- $('#tabs li').removeClass('active')
2825
- $(this).addClass('active')
2826
-
2827
- tabContent.hide().eq(index).fadeIn()
2828
- }
2829
- })
2830
- })
2831
- </script>
2832
- </body>
2833
- </html>