tianheng-ui 0.1.81 → 0.1.84

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/README.md +72 -15
  2. package/lib/theme-chalk/fonts/formMaking-iconfont.svg +155 -155
  3. package/lib/theme-chalk/fonts/th-iconfont.css +2402 -2402
  4. package/lib/theme-chalk/js/axios.js +87 -87
  5. package/lib/tianheng-ui.js +13 -13
  6. package/package.json +87 -86
  7. package/packages/CodeEditor/index.vue +3 -2
  8. package/packages/FormMaking/GenerateForm.vue +392 -392
  9. package/packages/FormMaking/Upload/index.vue +571 -571
  10. package/packages/FormMaking/WidgetFooter.vue +16 -0
  11. package/packages/FormMaking/WidgetForm.vue +145 -146
  12. package/packages/FormMaking/WidgetTools.vue +21 -16
  13. package/packages/FormMaking/custom/config.js +120 -2
  14. package/packages/FormMaking/custom/configs/number.vue +0 -5
  15. package/packages/FormMaking/custom/configs/page-table.vue +146 -0
  16. package/packages/FormMaking/custom/index.js +1 -1
  17. package/packages/FormMaking/custom/items/page-table.vue +250 -0
  18. package/packages/FormMaking/custom/register.js +43 -43
  19. package/packages/FormMaking/iconfont/demo.css +539 -539
  20. package/packages/FormMaking/iconfont/demo_index.html +1159 -1159
  21. package/packages/FormMaking/iconfont/formMaking-iconfont.css +189 -189
  22. package/packages/FormMaking/iconfont/formMaking-iconfont.svg +155 -155
  23. package/packages/FormMaking/index.js +33 -33
  24. package/packages/FormMaking/index.vue +6 -1
  25. package/packages/FormMaking/lang/en-US.js +187 -187
  26. package/packages/FormMaking/lang/zh-CN.js +187 -187
  27. package/packages/FormMaking/network/axios.js +88 -88
  28. package/packages/FormMaking/styles/index.scss +216 -216
  29. package/packages/FormMaking/util/generateCode.js +427 -157
  30. package/packages/FormMaking/util/index.js +98 -98
  31. package/packages/TableMaking/network/axios.js +88 -88
  32. package/packages/TableMaking/widgetConfig.vue +1 -1
package/packages/FormMaking/iconfont/demo_index.html CHANGED
@@ -1,1159 +1,1159 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8"/>
5
- <title>IconFont Demo</title>
6
- <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
7
- <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
8
- <link rel="stylesheet" href="demo.css">
9
- <link rel="stylesheet" href="iconfont.css">
10
- <script src="iconfont.js"></script>
11
- <!-- jQuery -->
12
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
13
- <!-- 代码高亮 -->
14
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
15
- </head>
16
- <body>
17
- <div class="main">
18
- <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
19
- <div class="nav-tabs">
20
- <ul id="tabs" class="dib-box">
21
- <li class="dib active"><span>Unicode</span></li>
22
- <li class="dib"><span>Font class</span></li>
23
- <li class="dib"><span>Symbol</span></li>
24
- </ul>
25
-
26
- <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=896287" target="_blank" class="nav-more">查看项目</a>
27
-
28
- </div>
29
- <div class="tab-container">
30
- <div class="content unicode" style="display: block;">
31
- <ul class="icon_lists dib-box">
32
-
33
- <li class="dib">
34
- <span class="icon iconfont">&#xe6d1;</span>
35
- <div class="name">clear</div>
36
- <div class="code-name">&amp;#xe6d1;</div>
37
- </li>
38
-
39
- <li class="dib">
40
- <span class="icon iconfont">&#xe63c;</span>
41
- <div class="name">代码生成</div>
42
- <div class="code-name">&amp;#xe63c;</div>
43
- </li>
44
-
45
- <li class="dib">
46
- <span class="icon iconfont">&#xe616;</span>
47
- <div class="name">delete</div>
48
- <div class="code-name">&amp;#xe616;</div>
49
- </li>
50
-
51
- <li class="dib">
52
- <span class="icon iconfont">&#xe630;</span>
53
- <div class="name">发布</div>
54
- <div class="code-name">&amp;#xe630;</div>
55
- </li>
56
-
57
- <li class="dib">
58
- <span class="icon iconfont">&#xe642;</span>
59
- <div class="name">清空回收站</div>
60
- <div class="code-name">&amp;#xe642;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon iconfont">&#xe65b;</span>
65
- <div class="name">code</div>
66
- <div class="code-name">&amp;#xe65b;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon iconfont">&#xe713;</span>
71
- <div class="name">table</div>
72
- <div class="code-name">&amp;#xe713;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon iconfont">&#xe91f;</span>
77
- <div class="name">diy-com-textarea</div>
78
- <div class="code-name">&amp;#xe91f;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon iconfont">&#xe634;</span>
83
- <div class="name">自定义数据</div>
84
- <div class="code-name">&amp;#xe634;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon iconfont">&#xe7bd;</span>
89
- <div class="name">json</div>
90
- <div class="code-name">&amp;#xe7bd;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon iconfont">&#xe695;</span>
95
- <div class="name">符号-级联选择</div>
96
- <div class="code-name">&amp;#xe695;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon iconfont">&#xe606;</span>
101
- <div class="name">icon_clone</div>
102
- <div class="code-name">&amp;#xe606;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon iconfont">&#xe617;</span>
107
- <div class="name">文件上传</div>
108
- <div class="code-name">&amp;#xe617;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon iconfont">&#xe66e;</span>
113
- <div class="name">分割线</div>
114
- <div class="code-name">&amp;#xe66e;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon iconfont">&#xe67d;</span>
119
- <div class="name">图片预览</div>
120
- <div class="code-name">&amp;#xe67d;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon iconfont">&#xe600;</span>
125
- <div class="name">time</div>
126
- <div class="code-name">&amp;#xe600;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon iconfont">&#xe605;</span>
131
- <div class="name">rate</div>
132
- <div class="code-name">&amp;#xe605;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon iconfont">&#xe65e;</span>
137
- <div class="name">图片</div>
138
- <div class="code-name">&amp;#xe65e;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon iconfont">&#xe63e;</span>
143
- <div class="name">ad-icon-tooltip</div>
144
- <div class="code-name">&amp;#xe63e;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon iconfont">&#xe60e;</span>
149
- <div class="name">check-box</div>
150
- <div class="code-name">&amp;#xe60e;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon iconfont">&#xe660;</span>
155
- <div class="name">switch</div>
156
- <div class="code-name">&amp;#xe660;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon iconfont">&#xe640;</span>
161
- <div class="name">评分</div>
162
- <div class="code-name">&amp;#xe640;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon iconfont">&#xe6b2;</span>
167
- <div class="name">input</div>
168
- <div class="code-name">&amp;#xe6b2;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon iconfont">&#xe615;</span>
173
- <div class="name">radio</div>
174
- <div class="code-name">&amp;#xe615;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon iconfont">&#xe62f;</span>
179
- <div class="name">color</div>
180
- <div class="code-name">&amp;#xe62f;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon iconfont">&#xe60d;</span>
185
- <div class="name">slider</div>
186
- <div class="code-name">&amp;#xe60d;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon iconfont">&#xe7c4;</span>
191
- <div class="name">icon_bars</div>
192
- <div class="code-name">&amp;#xe7c4;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon iconfont">&#xe682;</span>
197
- <div class="name">富文本框</div>
198
- <div class="code-name">&amp;#xe682;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon iconfont">&#xe69f;</span>
203
- <div class="name">date</div>
204
- <div class="code-name">&amp;#xe69f;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon iconfont">&#xe621;</span>
209
- <div class="name">自定义字段</div>
210
- <div class="code-name">&amp;#xe621;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon iconfont">&#xe60f;</span>
215
- <div class="name">trash</div>
216
- <div class="code-name">&amp;#xe60f;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon iconfont">&#xe6ad;</span>
221
- <div class="name">grid-45</div>
222
- <div class="code-name">&amp;#xe6ad;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon iconfont">&#xe842;</span>
227
- <div class="name">drag</div>
228
- <div class="code-name">&amp;#xe842;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon iconfont">&#xe645;</span>
233
- <div class="name">上传</div>
234
- <div class="code-name">&amp;#xe645;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon iconfont">&#xe63f;</span>
239
- <div class="name">栅格</div>
240
- <div class="code-name">&amp;#xe63f;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon iconfont">&#xe76b;</span>
245
- <div class="name">number</div>
246
- <div class="code-name">&amp;#xe76b;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon iconfont">&#xe668;</span>
251
- <div class="name">预览</div>
252
- <div class="code-name">&amp;#xe668;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon iconfont">&#xe920;</span>
257
- <div class="name">select</div>
258
- <div class="code-name">&amp;#xe920;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon iconfont">&#xe67c;</span>
263
- <div class="name">文字设置-22</div>
264
- <div class="code-name">&amp;#xe67c;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon iconfont">&#xe661;</span>
269
- <div class="name">评分</div>
270
- <div class="code-name">&amp;#xe661;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon iconfont">&#xe620;</span>
275
- <div class="name">单栏布局</div>
276
- <div class="code-name">&amp;#xe620;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon iconfont">&#xe631;</span>
281
- <div class="name">sync</div>
282
- <div class="code-name">&amp;#xe631;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon iconfont">&#xe65f;</span>
287
- <div class="name">tabs</div>
288
- <div class="code-name">&amp;#xe65f;</div>
289
- </li>
290
-
291
- </ul>
292
- <div class="article markdown">
293
- <h2 id="unicode-">Unicode 引用</h2>
294
- <hr>
295
-
296
- <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
297
- <ul>
298
- <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
299
- <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
300
- <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
301
- </ul>
302
- <blockquote>
303
- <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
304
- </blockquote>
305
- <p>Unicode 使用步骤如下：</p>
306
- <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
307
- <pre><code class="language-css"
308
- >@font-face {
309
- font-family: 'iconfont';
310
- src: url('iconfont.eot');
311
- src: url('iconfont.eot?#iefix') format('embedded-opentype'),
312
- url('iconfont.woff2') format('woff2'),
313
- url('iconfont.woff') format('woff'),
314
- url('iconfont.ttf') format('truetype'),
315
- url('iconfont.svg#iconfont') format('svg');
316
- }
317
- </code></pre>
318
- <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
319
- <pre><code class="language-css"
320
- >.iconfont {
321
- font-family: "iconfont" !important;
322
- font-size: 16px;
323
- font-style: normal;
324
- -webkit-font-smoothing: antialiased;
325
- -moz-osx-font-smoothing: grayscale;
326
- }
327
- </code></pre>
328
- <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
329
- <pre>
330
- <code class="language-html"
331
- >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
332
- </code></pre>
333
- <blockquote>
334
- <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
335
- </blockquote>
336
- </div>
337
- </div>
338
- <div class="content font-class">
339
- <ul class="icon_lists dib-box">
340
-
341
- <li class="dib">
342
- <span class="icon iconfont icon-clear"></span>
343
- <div class="name">
344
- clear
345
- </div>
346
- <div class="code-name">.icon-clear
347
- </div>
348
- </li>
349
-
350
- <li class="dib">
351
- <span class="icon iconfont icon-weibiaoti46"></span>
352
- <div class="name">
353
- 代码生成
354
- </div>
355
- <div class="code-name">.icon-weibiaoti46
356
- </div>
357
- </li>
358
-
359
- <li class="dib">
360
- <span class="icon iconfont icon-delete"></span>
361
- <div class="name">
362
- delete
363
- </div>
364
- <div class="code-name">.icon-delete
365
- </div>
366
- </li>
367
-
368
- <li class="dib">
369
- <span class="icon iconfont icon-fabu"></span>
370
- <div class="name">
371
- 发布
372
- </div>
373
- <div class="code-name">.icon-fabu
374
- </div>
375
- </li>
376
-
377
- <li class="dib">
378
- <span class="icon iconfont icon-qingkonghuishouzhan"></span>
379
- <div class="name">
380
- 清空回收站
381
- </div>
382
- <div class="code-name">.icon-qingkonghuishouzhan
383
- </div>
384
- </li>
385
-
386
- <li class="dib">
387
- <span class="icon iconfont icon-code"></span>
388
- <div class="name">
389
- code
390
- </div>
391
- <div class="code-name">.icon-code
392
- </div>
393
- </li>
394
-
395
- <li class="dib">
396
- <span class="icon iconfont icon-table"></span>
397
- <div class="name">
398
- table
399
- </div>
400
- <div class="code-name">.icon-table
401
- </div>
402
- </li>
403
-
404
- <li class="dib">
405
- <span class="icon iconfont icon-diy-com-textarea"></span>
406
- <div class="name">
407
- diy-com-textarea
408
- </div>
409
- <div class="code-name">.icon-diy-com-textarea
410
- </div>
411
- </li>
412
-
413
- <li class="dib">
414
- <span class="icon iconfont icon-zidingyishuju"></span>
415
- <div class="name">
416
- 自定义数据
417
- </div>
418
- <div class="code-name">.icon-zidingyishuju
419
- </div>
420
- </li>
421
-
422
- <li class="dib">
423
- <span class="icon iconfont icon-json"></span>
424
- <div class="name">
425
- json
426
- </div>
427
- <div class="code-name">.icon-json
428
- </div>
429
- </li>
430
-
431
- <li class="dib">
432
- <span class="icon iconfont icon-jilianxuanze"></span>
433
- <div class="name">
434
- 符号-级联选择
435
- </div>
436
- <div class="code-name">.icon-jilianxuanze
437
- </div>
438
- </li>
439
-
440
- <li class="dib">
441
- <span class="icon iconfont icon-icon_clone"></span>
442
- <div class="name">
443
- icon_clone
444
- </div>
445
- <div class="code-name">.icon-icon_clone
446
- </div>
447
- </li>
448
-
449
- <li class="dib">
450
- <span class="icon iconfont icon-wenjianshangchuan"></span>
451
- <div class="name">
452
- 文件上传
453
- </div>
454
- <div class="code-name">.icon-wenjianshangchuan
455
- </div>
456
- </li>
457
-
458
- <li class="dib">
459
- <span class="icon iconfont icon-fengexian"></span>
460
- <div class="name">
461
- 分割线
462
- </div>
463
- <div class="code-name">.icon-fengexian
464
- </div>
465
- </li>
466
-
467
- <li class="dib">
468
- <span class="icon iconfont icon-tupianyulan"></span>
469
- <div class="name">
470
- 图片预览
471
- </div>
472
- <div class="code-name">.icon-tupianyulan
473
- </div>
474
- </li>
475
-
476
- <li class="dib">
477
- <span class="icon iconfont icon-time"></span>
478
- <div class="name">
479
- time
480
- </div>
481
- <div class="code-name">.icon-time
482
- </div>
483
- </li>
484
-
485
- <li class="dib">
486
- <span class="icon iconfont icon-icon-test"></span>
487
- <div class="name">
488
- rate
489
- </div>
490
- <div class="code-name">.icon-icon-test
491
- </div>
492
- </li>
493
-
494
- <li class="dib">
495
- <span class="icon iconfont icon-tupian"></span>
496
- <div class="name">
497
- 图片
498
- </div>
499
- <div class="code-name">.icon-tupian
500
- </div>
501
- </li>
502
-
503
- <li class="dib">
504
- <span class="icon iconfont icon-ad-icon-tooltip"></span>
505
- <div class="name">
506
- ad-icon-tooltip
507
- </div>
508
- <div class="code-name">.icon-ad-icon-tooltip
509
- </div>
510
- </li>
511
-
512
- <li class="dib">
513
- <span class="icon iconfont icon-check-box"></span>
514
- <div class="name">
515
- check-box
516
- </div>
517
- <div class="code-name">.icon-check-box
518
- </div>
519
- </li>
520
-
521
- <li class="dib">
522
- <span class="icon iconfont icon-switch"></span>
523
- <div class="name">
524
- switch
525
- </div>
526
- <div class="code-name">.icon-switch
527
- </div>
528
- </li>
529
-
530
- <li class="dib">
531
- <span class="icon iconfont icon-pingfen"></span>
532
- <div class="name">
533
- 评分
534
- </div>
535
- <div class="code-name">.icon-pingfen
536
- </div>
537
- </li>
538
-
539
- <li class="dib">
540
- <span class="icon iconfont icon-input"></span>
541
- <div class="name">
542
- input
543
- </div>
544
- <div class="code-name">.icon-input
545
- </div>
546
- </li>
547
-
548
- <li class="dib">
549
- <span class="icon iconfont icon-radio-active"></span>
550
- <div class="name">
551
- radio
552
- </div>
553
- <div class="code-name">.icon-radio-active
554
- </div>
555
- </li>
556
-
557
- <li class="dib">
558
- <span class="icon iconfont icon-color"></span>
559
- <div class="name">
560
- color
561
- </div>
562
- <div class="code-name">.icon-color
563
- </div>
564
- </li>
565
-
566
- <li class="dib">
567
- <span class="icon iconfont icon-slider"></span>
568
- <div class="name">
569
- slider
570
- </div>
571
- <div class="code-name">.icon-slider
572
- </div>
573
- </li>
574
-
575
- <li class="dib">
576
- <span class="icon iconfont icon-icon_bars"></span>
577
- <div class="name">
578
- icon_bars
579
- </div>
580
- <div class="code-name">.icon-icon_bars
581
- </div>
582
- </li>
583
-
584
- <li class="dib">
585
- <span class="icon iconfont icon-fuwenbenkuang"></span>
586
- <div class="name">
587
- 富文本框
588
- </div>
589
- <div class="code-name">.icon-fuwenbenkuang
590
- </div>
591
- </li>
592
-
593
- <li class="dib">
594
- <span class="icon iconfont icon-date"></span>
595
- <div class="name">
596
- date
597
- </div>
598
- <div class="code-name">.icon-date
599
- </div>
600
- </li>
601
-
602
- <li class="dib">
603
- <span class="icon iconfont icon-ic"></span>
604
- <div class="name">
605
- 自定义字段
606
- </div>
607
- <div class="code-name">.icon-ic
608
- </div>
609
- </li>
610
-
611
- <li class="dib">
612
- <span class="icon iconfont icon-trash"></span>
613
- <div class="name">
614
- trash
615
- </div>
616
- <div class="code-name">.icon-trash
617
- </div>
618
- </li>
619
-
620
- <li class="dib">
621
- <span class="icon iconfont icon-grid-"></span>
622
- <div class="name">
623
- grid-45
624
- </div>
625
- <div class="code-name">.icon-grid-
626
- </div>
627
- </li>
628
-
629
- <li class="dib">
630
- <span class="icon iconfont icon-drag"></span>
631
- <div class="name">
632
- drag
633
- </div>
634
- <div class="code-name">.icon-drag
635
- </div>
636
- </li>
637
-
638
- <li class="dib">
639
- <span class="icon iconfont icon-shangchuan"></span>
640
- <div class="name">
641
- 上传
642
- </div>
643
- <div class="code-name">.icon-shangchuan
644
- </div>
645
- </li>
646
-
647
- <li class="dib">
648
- <span class="icon iconfont icon-zhage"></span>
649
- <div class="name">
650
- 栅格
651
- </div>
652
- <div class="code-name">.icon-zhage
653
- </div>
654
- </li>
655
-
656
- <li class="dib">
657
- <span class="icon iconfont icon-number"></span>
658
- <div class="name">
659
- number
660
- </div>
661
- <div class="code-name">.icon-number
662
- </div>
663
- </li>
664
-
665
- <li class="dib">
666
- <span class="icon iconfont icon-yulan"></span>
667
- <div class="name">
668
- 预览
669
- </div>
670
- <div class="code-name">.icon-yulan
671
- </div>
672
- </li>
673
-
674
- <li class="dib">
675
- <span class="icon iconfont icon-select"></span>
676
- <div class="name">
677
- select
678
- </div>
679
- <div class="code-name">.icon-select
680
- </div>
681
- </li>
682
-
683
- <li class="dib">
684
- <span class="icon iconfont icon-wenzishezhi-"></span>
685
- <div class="name">
686
- 文字设置-22
687
- </div>
688
- <div class="code-name">.icon-wenzishezhi-
689
- </div>
690
- </li>
691
-
692
- <li class="dib">
693
- <span class="icon iconfont icon-pingfen1"></span>
694
- <div class="name">
695
- 评分
696
- </div>
697
- <div class="code-name">.icon-pingfen1
698
- </div>
699
- </li>
700
-
701
- <li class="dib">
702
- <span class="icon iconfont icon-RectangleCopy"></span>
703
- <div class="name">
704
- 单栏布局
705
- </div>
706
- <div class="code-name">.icon-RectangleCopy
707
- </div>
708
- </li>
709
-
710
- <li class="dib">
711
- <span class="icon iconfont icon-sync1"></span>
712
- <div class="name">
713
- sync
714
- </div>
715
- <div class="code-name">.icon-sync1
716
- </div>
717
- </li>
718
-
719
- <li class="dib">
720
- <span class="icon iconfont icon-tabs"></span>
721
- <div class="name">
722
- tabs
723
- </div>
724
- <div class="code-name">.icon-tabs
725
- </div>
726
- </li>
727
-
728
- </ul>
729
- <div class="article markdown">
730
- <h2 id="font-class-">font-class 引用</h2>
731
- <hr>
732
-
733
- <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
734
- <p>与 Unicode 使用方式相比，具有如下特点：</p>
735
- <ul>
736
- <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
737
- <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
738
- <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
739
- <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
740
- </ul>
741
- <p>使用步骤如下：</p>
742
- <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
743
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
744
- </code></pre>
745
- <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
746
- <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
747
- </code></pre>
748
- <blockquote>
749
- <p>"
750
- iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
751
- </blockquote>
752
- </div>
753
- </div>
754
- <div class="content symbol">
755
- <ul class="icon_lists dib-box">
756
-
757
- <li class="dib">
758
- <svg class="icon svg-icon" aria-hidden="true">
759
- <use xlink:href="#icon-clear"></use>
760
- </svg>
761
- <div class="name">clear</div>
762
- <div class="code-name">#icon-clear</div>
763
- </li>
764
-
765
- <li class="dib">
766
- <svg class="icon svg-icon" aria-hidden="true">
767
- <use xlink:href="#icon-weibiaoti46"></use>
768
- </svg>
769
- <div class="name">代码生成</div>
770
- <div class="code-name">#icon-weibiaoti46</div>
771
- </li>
772
-
773
- <li class="dib">
774
- <svg class="icon svg-icon" aria-hidden="true">
775
- <use xlink:href="#icon-delete"></use>
776
- </svg>
777
- <div class="name">delete</div>
778
- <div class="code-name">#icon-delete</div>
779
- </li>
780
-
781
- <li class="dib">
782
- <svg class="icon svg-icon" aria-hidden="true">
783
- <use xlink:href="#icon-fabu"></use>
784
- </svg>
785
- <div class="name">发布</div>
786
- <div class="code-name">#icon-fabu</div>
787
- </li>
788
-
789
- <li class="dib">
790
- <svg class="icon svg-icon" aria-hidden="true">
791
- <use xlink:href="#icon-qingkonghuishouzhan"></use>
792
- </svg>
793
- <div class="name">清空回收站</div>
794
- <div class="code-name">#icon-qingkonghuishouzhan</div>
795
- </li>
796
-
797
- <li class="dib">
798
- <svg class="icon svg-icon" aria-hidden="true">
799
- <use xlink:href="#icon-code"></use>
800
- </svg>
801
- <div class="name">code</div>
802
- <div class="code-name">#icon-code</div>
803
- </li>
804
-
805
- <li class="dib">
806
- <svg class="icon svg-icon" aria-hidden="true">
807
- <use xlink:href="#icon-table"></use>
808
- </svg>
809
- <div class="name">table</div>
810
- <div class="code-name">#icon-table</div>
811
- </li>
812
-
813
- <li class="dib">
814
- <svg class="icon svg-icon" aria-hidden="true">
815
- <use xlink:href="#icon-diy-com-textarea"></use>
816
- </svg>
817
- <div class="name">diy-com-textarea</div>
818
- <div class="code-name">#icon-diy-com-textarea</div>
819
- </li>
820
-
821
- <li class="dib">
822
- <svg class="icon svg-icon" aria-hidden="true">
823
- <use xlink:href="#icon-zidingyishuju"></use>
824
- </svg>
825
- <div class="name">自定义数据</div>
826
- <div class="code-name">#icon-zidingyishuju</div>
827
- </li>
828
-
829
- <li class="dib">
830
- <svg class="icon svg-icon" aria-hidden="true">
831
- <use xlink:href="#icon-json"></use>
832
- </svg>
833
- <div class="name">json</div>
834
- <div class="code-name">#icon-json</div>
835
- </li>
836
-
837
- <li class="dib">
838
- <svg class="icon svg-icon" aria-hidden="true">
839
- <use xlink:href="#icon-jilianxuanze"></use>
840
- </svg>
841
- <div class="name">符号-级联选择</div>
842
- <div class="code-name">#icon-jilianxuanze</div>
843
- </li>
844
-
845
- <li class="dib">
846
- <svg class="icon svg-icon" aria-hidden="true">
847
- <use xlink:href="#icon-icon_clone"></use>
848
- </svg>
849
- <div class="name">icon_clone</div>
850
- <div class="code-name">#icon-icon_clone</div>
851
- </li>
852
-
853
- <li class="dib">
854
- <svg class="icon svg-icon" aria-hidden="true">
855
- <use xlink:href="#icon-wenjianshangchuan"></use>
856
- </svg>
857
- <div class="name">文件上传</div>
858
- <div class="code-name">#icon-wenjianshangchuan</div>
859
- </li>
860
-
861
- <li class="dib">
862
- <svg class="icon svg-icon" aria-hidden="true">
863
- <use xlink:href="#icon-fengexian"></use>
864
- </svg>
865
- <div class="name">分割线</div>
866
- <div class="code-name">#icon-fengexian</div>
867
- </li>
868
-
869
- <li class="dib">
870
- <svg class="icon svg-icon" aria-hidden="true">
871
- <use xlink:href="#icon-tupianyulan"></use>
872
- </svg>
873
- <div class="name">图片预览</div>
874
- <div class="code-name">#icon-tupianyulan</div>
875
- </li>
876
-
877
- <li class="dib">
878
- <svg class="icon svg-icon" aria-hidden="true">
879
- <use xlink:href="#icon-time"></use>
880
- </svg>
881
- <div class="name">time</div>
882
- <div class="code-name">#icon-time</div>
883
- </li>
884
-
885
- <li class="dib">
886
- <svg class="icon svg-icon" aria-hidden="true">
887
- <use xlink:href="#icon-icon-test"></use>
888
- </svg>
889
- <div class="name">rate</div>
890
- <div class="code-name">#icon-icon-test</div>
891
- </li>
892
-
893
- <li class="dib">
894
- <svg class="icon svg-icon" aria-hidden="true">
895
- <use xlink:href="#icon-tupian"></use>
896
- </svg>
897
- <div class="name">图片</div>
898
- <div class="code-name">#icon-tupian</div>
899
- </li>
900
-
901
- <li class="dib">
902
- <svg class="icon svg-icon" aria-hidden="true">
903
- <use xlink:href="#icon-ad-icon-tooltip"></use>
904
- </svg>
905
- <div class="name">ad-icon-tooltip</div>
906
- <div class="code-name">#icon-ad-icon-tooltip</div>
907
- </li>
908
-
909
- <li class="dib">
910
- <svg class="icon svg-icon" aria-hidden="true">
911
- <use xlink:href="#icon-check-box"></use>
912
- </svg>
913
- <div class="name">check-box</div>
914
- <div class="code-name">#icon-check-box</div>
915
- </li>
916
-
917
- <li class="dib">
918
- <svg class="icon svg-icon" aria-hidden="true">
919
- <use xlink:href="#icon-switch"></use>
920
- </svg>
921
- <div class="name">switch</div>
922
- <div class="code-name">#icon-switch</div>
923
- </li>
924
-
925
- <li class="dib">
926
- <svg class="icon svg-icon" aria-hidden="true">
927
- <use xlink:href="#icon-pingfen"></use>
928
- </svg>
929
- <div class="name">评分</div>
930
- <div class="code-name">#icon-pingfen</div>
931
- </li>
932
-
933
- <li class="dib">
934
- <svg class="icon svg-icon" aria-hidden="true">
935
- <use xlink:href="#icon-input"></use>
936
- </svg>
937
- <div class="name">input</div>
938
- <div class="code-name">#icon-input</div>
939
- </li>
940
-
941
- <li class="dib">
942
- <svg class="icon svg-icon" aria-hidden="true">
943
- <use xlink:href="#icon-radio-active"></use>
944
- </svg>
945
- <div class="name">radio</div>
946
- <div class="code-name">#icon-radio-active</div>
947
- </li>
948
-
949
- <li class="dib">
950
- <svg class="icon svg-icon" aria-hidden="true">
951
- <use xlink:href="#icon-color"></use>
952
- </svg>
953
- <div class="name">color</div>
954
- <div class="code-name">#icon-color</div>
955
- </li>
956
-
957
- <li class="dib">
958
- <svg class="icon svg-icon" aria-hidden="true">
959
- <use xlink:href="#icon-slider"></use>
960
- </svg>
961
- <div class="name">slider</div>
962
- <div class="code-name">#icon-slider</div>
963
- </li>
964
-
965
- <li class="dib">
966
- <svg class="icon svg-icon" aria-hidden="true">
967
- <use xlink:href="#icon-icon_bars"></use>
968
- </svg>
969
- <div class="name">icon_bars</div>
970
- <div class="code-name">#icon-icon_bars</div>
971
- </li>
972
-
973
- <li class="dib">
974
- <svg class="icon svg-icon" aria-hidden="true">
975
- <use xlink:href="#icon-fuwenbenkuang"></use>
976
- </svg>
977
- <div class="name">富文本框</div>
978
- <div class="code-name">#icon-fuwenbenkuang</div>
979
- </li>
980
-
981
- <li class="dib">
982
- <svg class="icon svg-icon" aria-hidden="true">
983
- <use xlink:href="#icon-date"></use>
984
- </svg>
985
- <div class="name">date</div>
986
- <div class="code-name">#icon-date</div>
987
- </li>
988
-
989
- <li class="dib">
990
- <svg class="icon svg-icon" aria-hidden="true">
991
- <use xlink:href="#icon-ic"></use>
992
- </svg>
993
- <div class="name">自定义字段</div>
994
- <div class="code-name">#icon-ic</div>
995
- </li>
996
-
997
- <li class="dib">
998
- <svg class="icon svg-icon" aria-hidden="true">
999
- <use xlink:href="#icon-trash"></use>
1000
- </svg>
1001
- <div class="name">trash</div>
1002
- <div class="code-name">#icon-trash</div>
1003
- </li>
1004
-
1005
- <li class="dib">
1006
- <svg class="icon svg-icon" aria-hidden="true">
1007
- <use xlink:href="#icon-grid-"></use>
1008
- </svg>
1009
- <div class="name">grid-45</div>
1010
- <div class="code-name">#icon-grid-</div>
1011
- </li>
1012
-
1013
- <li class="dib">
1014
- <svg class="icon svg-icon" aria-hidden="true">
1015
- <use xlink:href="#icon-drag"></use>
1016
- </svg>
1017
- <div class="name">drag</div>
1018
- <div class="code-name">#icon-drag</div>
1019
- </li>
1020
-
1021
- <li class="dib">
1022
- <svg class="icon svg-icon" aria-hidden="true">
1023
- <use xlink:href="#icon-shangchuan"></use>
1024
- </svg>
1025
- <div class="name">上传</div>
1026
- <div class="code-name">#icon-shangchuan</div>
1027
- </li>
1028
-
1029
- <li class="dib">
1030
- <svg class="icon svg-icon" aria-hidden="true">
1031
- <use xlink:href="#icon-zhage"></use>
1032
- </svg>
1033
- <div class="name">栅格</div>
1034
- <div class="code-name">#icon-zhage</div>
1035
- </li>
1036
-
1037
- <li class="dib">
1038
- <svg class="icon svg-icon" aria-hidden="true">
1039
- <use xlink:href="#icon-number"></use>
1040
- </svg>
1041
- <div class="name">number</div>
1042
- <div class="code-name">#icon-number</div>
1043
- </li>
1044
-
1045
- <li class="dib">
1046
- <svg class="icon svg-icon" aria-hidden="true">
1047
- <use xlink:href="#icon-yulan"></use>
1048
- </svg>
1049
- <div class="name">预览</div>
1050
- <div class="code-name">#icon-yulan</div>
1051
- </li>
1052
-
1053
- <li class="dib">
1054
- <svg class="icon svg-icon" aria-hidden="true">
1055
- <use xlink:href="#icon-select"></use>
1056
- </svg>
1057
- <div class="name">select</div>
1058
- <div class="code-name">#icon-select</div>
1059
- </li>
1060
-
1061
- <li class="dib">
1062
- <svg class="icon svg-icon" aria-hidden="true">
1063
- <use xlink:href="#icon-wenzishezhi-"></use>
1064
- </svg>
1065
- <div class="name">文字设置-22</div>
1066
- <div class="code-name">#icon-wenzishezhi-</div>
1067
- </li>
1068
-
1069
- <li class="dib">
1070
- <svg class="icon svg-icon" aria-hidden="true">
1071
- <use xlink:href="#icon-pingfen1"></use>
1072
- </svg>
1073
- <div class="name">评分</div>
1074
- <div class="code-name">#icon-pingfen1</div>
1075
- </li>
1076
-
1077
- <li class="dib">
1078
- <svg class="icon svg-icon" aria-hidden="true">
1079
- <use xlink:href="#icon-RectangleCopy"></use>
1080
- </svg>
1081
- <div class="name">单栏布局</div>
1082
- <div class="code-name">#icon-RectangleCopy</div>
1083
- </li>
1084
-
1085
- <li class="dib">
1086
- <svg class="icon svg-icon" aria-hidden="true">
1087
- <use xlink:href="#icon-sync1"></use>
1088
- </svg>
1089
- <div class="name">sync</div>
1090
- <div class="code-name">#icon-sync1</div>
1091
- </li>
1092
-
1093
- <li class="dib">
1094
- <svg class="icon svg-icon" aria-hidden="true">
1095
- <use xlink:href="#icon-tabs"></use>
1096
- </svg>
1097
- <div class="name">tabs</div>
1098
- <div class="code-name">#icon-tabs</div>
1099
- </li>
1100
-
1101
- </ul>
1102
- <div class="article markdown">
1103
- <h2 id="symbol-">Symbol 引用</h2>
1104
- <hr>
1105
-
1106
- <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1107
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1108
- <ul>
1109
- <li>支持多色图标了，不再受单色限制。</li>
1110
- <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1111
- <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1112
- <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1113
- </ul>
1114
- <p>使用步骤如下：</p>
1115
- <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1116
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1117
- </code></pre>
1118
- <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1119
- <pre><code class="language-html">&lt;style&gt;
1120
- .icon {
1121
- width: 1em;
1122
- height: 1em;
1123
- vertical-align: -0.15em;
1124
- fill: currentColor;
1125
- overflow: hidden;
1126
- }
1127
- &lt;/style&gt;
1128
- </code></pre>
1129
- <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1130
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1131
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1132
- &lt;/svg&gt;
1133
- </code></pre>
1134
- </div>
1135
- </div>
1136
-
1137
- </div>
1138
- </div>
1139
- <script>
1140
- $(document).ready(function () {
1141
- $('.tab-container .content:first').show()
1142
-
1143
- $('#tabs li').click(function (e) {
1144
- var tabContent = $('.tab-container .content')
1145
- var index = $(this).index()
1146
-
1147
- if ($(this).hasClass('active')) {
1148
- return
1149
- } else {
1150
- $('#tabs li').removeClass('active')
1151
- $(this).addClass('active')
1152
-
1153
- tabContent.hide().eq(index).fadeIn()
1154
- }
1155
- })
1156
- })
1157
- </script>
1158
- </body>
1159
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>IconFont Demo</title>
6
+ <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
7
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
8
+ <link rel="stylesheet" href="demo.css">
9
+ <link rel="stylesheet" href="iconfont.css">
10
+ <script src="iconfont.js"></script>
11
+ <!-- jQuery -->
12
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
13
+ <!-- 代码高亮 -->
14
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
15
+ </head>
16
+ <body>
17
+ <div class="main">
18
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
19
+ <div class="nav-tabs">
20
+ <ul id="tabs" class="dib-box">
21
+ <li class="dib active"><span>Unicode</span></li>
22
+ <li class="dib"><span>Font class</span></li>
23
+ <li class="dib"><span>Symbol</span></li>
24
+ </ul>
25
+
26
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=896287" target="_blank" class="nav-more">查看项目</a>
27
+
28
+ </div>
29
+ <div class="tab-container">
30
+ <div class="content unicode" style="display: block;">
31
+ <ul class="icon_lists dib-box">
32
+
33
+ <li class="dib">
34
+ <span class="icon iconfont">&#xe6d1;</span>
35
+ <div class="name">clear</div>
36
+ <div class="code-name">&amp;#xe6d1;</div>
37
+ </li>
38
+
39
+ <li class="dib">
40
+ <span class="icon iconfont">&#xe63c;</span>
41
+ <div class="name">代码生成</div>
42
+ <div class="code-name">&amp;#xe63c;</div>
43
+ </li>
44
+
45
+ <li class="dib">
46
+ <span class="icon iconfont">&#xe616;</span>
47
+ <div class="name">delete</div>
48
+ <div class="code-name">&amp;#xe616;</div>
49
+ </li>
50
+
51
+ <li class="dib">
52
+ <span class="icon iconfont">&#xe630;</span>
53
+ <div class="name">发布</div>
54
+ <div class="code-name">&amp;#xe630;</div>
55
+ </li>
56
+
57
+ <li class="dib">
58
+ <span class="icon iconfont">&#xe642;</span>
59
+ <div class="name">清空回收站</div>
60
+ <div class="code-name">&amp;#xe642;</div>
61
+ </li>
62
+
63
+ <li class="dib">
64
+ <span class="icon iconfont">&#xe65b;</span>
65
+ <div class="name">code</div>
66
+ <div class="code-name">&amp;#xe65b;</div>
67
+ </li>
68
+
69
+ <li class="dib">
70
+ <span class="icon iconfont">&#xe713;</span>
71
+ <div class="name">table</div>
72
+ <div class="code-name">&amp;#xe713;</div>
73
+ </li>
74
+
75
+ <li class="dib">
76
+ <span class="icon iconfont">&#xe91f;</span>
77
+ <div class="name">diy-com-textarea</div>
78
+ <div class="code-name">&amp;#xe91f;</div>
79
+ </li>
80
+
81
+ <li class="dib">
82
+ <span class="icon iconfont">&#xe634;</span>
83
+ <div class="name">自定义数据</div>
84
+ <div class="code-name">&amp;#xe634;</div>
85
+ </li>
86
+
87
+ <li class="dib">
88
+ <span class="icon iconfont">&#xe7bd;</span>
89
+ <div class="name">json</div>
90
+ <div class="code-name">&amp;#xe7bd;</div>
91
+ </li>
92
+
93
+ <li class="dib">
94
+ <span class="icon iconfont">&#xe695;</span>
95
+ <div class="name">符号-级联选择</div>
96
+ <div class="code-name">&amp;#xe695;</div>
97
+ </li>
98
+
99
+ <li class="dib">
100
+ <span class="icon iconfont">&#xe606;</span>
101
+ <div class="name">icon_clone</div>
102
+ <div class="code-name">&amp;#xe606;</div>
103
+ </li>
104
+
105
+ <li class="dib">
106
+ <span class="icon iconfont">&#xe617;</span>
107
+ <div class="name">文件上传</div>
108
+ <div class="code-name">&amp;#xe617;</div>
109
+ </li>
110
+
111
+ <li class="dib">
112
+ <span class="icon iconfont">&#xe66e;</span>
113
+ <div class="name">分割线</div>
114
+ <div class="code-name">&amp;#xe66e;</div>
115
+ </li>
116
+
117
+ <li class="dib">
118
+ <span class="icon iconfont">&#xe67d;</span>
119
+ <div class="name">图片预览</div>
120
+ <div class="code-name">&amp;#xe67d;</div>
121
+ </li>
122
+
123
+ <li class="dib">
124
+ <span class="icon iconfont">&#xe600;</span>
125
+ <div class="name">time</div>
126
+ <div class="code-name">&amp;#xe600;</div>
127
+ </li>
128
+
129
+ <li class="dib">
130
+ <span class="icon iconfont">&#xe605;</span>
131
+ <div class="name">rate</div>
132
+ <div class="code-name">&amp;#xe605;</div>
133
+ </li>
134
+
135
+ <li class="dib">
136
+ <span class="icon iconfont">&#xe65e;</span>
137
+ <div class="name">图片</div>
138
+ <div class="code-name">&amp;#xe65e;</div>
139
+ </li>
140
+
141
+ <li class="dib">
142
+ <span class="icon iconfont">&#xe63e;</span>
143
+ <div class="name">ad-icon-tooltip</div>
144
+ <div class="code-name">&amp;#xe63e;</div>
145
+ </li>
146
+
147
+ <li class="dib">
148
+ <span class="icon iconfont">&#xe60e;</span>
149
+ <div class="name">check-box</div>
150
+ <div class="code-name">&amp;#xe60e;</div>
151
+ </li>
152
+
153
+ <li class="dib">
154
+ <span class="icon iconfont">&#xe660;</span>
155
+ <div class="name">switch</div>
156
+ <div class="code-name">&amp;#xe660;</div>
157
+ </li>
158
+
159
+ <li class="dib">
160
+ <span class="icon iconfont">&#xe640;</span>
161
+ <div class="name">评分</div>
162
+ <div class="code-name">&amp;#xe640;</div>
163
+ </li>
164
+
165
+ <li class="dib">
166
+ <span class="icon iconfont">&#xe6b2;</span>
167
+ <div class="name">input</div>
168
+ <div class="code-name">&amp;#xe6b2;</div>
169
+ </li>
170
+
171
+ <li class="dib">
172
+ <span class="icon iconfont">&#xe615;</span>
173
+ <div class="name">radio</div>
174
+ <div class="code-name">&amp;#xe615;</div>
175
+ </li>
176
+
177
+ <li class="dib">
178
+ <span class="icon iconfont">&#xe62f;</span>
179
+ <div class="name">color</div>
180
+ <div class="code-name">&amp;#xe62f;</div>
181
+ </li>
182
+
183
+ <li class="dib">
184
+ <span class="icon iconfont">&#xe60d;</span>
185
+ <div class="name">slider</div>
186
+ <div class="code-name">&amp;#xe60d;</div>
187
+ </li>
188
+
189
+ <li class="dib">
190
+ <span class="icon iconfont">&#xe7c4;</span>
191
+ <div class="name">icon_bars</div>
192
+ <div class="code-name">&amp;#xe7c4;</div>
193
+ </li>
194
+
195
+ <li class="dib">
196
+ <span class="icon iconfont">&#xe682;</span>
197
+ <div class="name">富文本框</div>
198
+ <div class="code-name">&amp;#xe682;</div>
199
+ </li>
200
+
201
+ <li class="dib">
202
+ <span class="icon iconfont">&#xe69f;</span>
203
+ <div class="name">date</div>
204
+ <div class="code-name">&amp;#xe69f;</div>
205
+ </li>
206
+
207
+ <li class="dib">
208
+ <span class="icon iconfont">&#xe621;</span>
209
+ <div class="name">自定义字段</div>
210
+ <div class="code-name">&amp;#xe621;</div>
211
+ </li>
212
+
213
+ <li class="dib">
214
+ <span class="icon iconfont">&#xe60f;</span>
215
+ <div class="name">trash</div>
216
+ <div class="code-name">&amp;#xe60f;</div>
217
+ </li>
218
+
219
+ <li class="dib">
220
+ <span class="icon iconfont">&#xe6ad;</span>
221
+ <div class="name">grid-45</div>
222
+ <div class="code-name">&amp;#xe6ad;</div>
223
+ </li>
224
+
225
+ <li class="dib">
226
+ <span class="icon iconfont">&#xe842;</span>
227
+ <div class="name">drag</div>
228
+ <div class="code-name">&amp;#xe842;</div>
229
+ </li>
230
+
231
+ <li class="dib">
232
+ <span class="icon iconfont">&#xe645;</span>
233
+ <div class="name">上传</div>
234
+ <div class="code-name">&amp;#xe645;</div>
235
+ </li>
236
+
237
+ <li class="dib">
238
+ <span class="icon iconfont">&#xe63f;</span>
239
+ <div class="name">栅格</div>
240
+ <div class="code-name">&amp;#xe63f;</div>
241
+ </li>
242
+
243
+ <li class="dib">
244
+ <span class="icon iconfont">&#xe76b;</span>
245
+ <div class="name">number</div>
246
+ <div class="code-name">&amp;#xe76b;</div>
247
+ </li>
248
+
249
+ <li class="dib">
250
+ <span class="icon iconfont">&#xe668;</span>
251
+ <div class="name">预览</div>
252
+ <div class="code-name">&amp;#xe668;</div>
253
+ </li>
254
+
255
+ <li class="dib">
256
+ <span class="icon iconfont">&#xe920;</span>
257
+ <div class="name">select</div>
258
+ <div class="code-name">&amp;#xe920;</div>
259
+ </li>
260
+
261
+ <li class="dib">
262
+ <span class="icon iconfont">&#xe67c;</span>
263
+ <div class="name">文字设置-22</div>
264
+ <div class="code-name">&amp;#xe67c;</div>
265
+ </li>
266
+
267
+ <li class="dib">
268
+ <span class="icon iconfont">&#xe661;</span>
269
+ <div class="name">评分</div>
270
+ <div class="code-name">&amp;#xe661;</div>
271
+ </li>
272
+
273
+ <li class="dib">
274
+ <span class="icon iconfont">&#xe620;</span>
275
+ <div class="name">单栏布局</div>
276
+ <div class="code-name">&amp;#xe620;</div>
277
+ </li>
278
+
279
+ <li class="dib">
280
+ <span class="icon iconfont">&#xe631;</span>
281
+ <div class="name">sync</div>
282
+ <div class="code-name">&amp;#xe631;</div>
283
+ </li>
284
+
285
+ <li class="dib">
286
+ <span class="icon iconfont">&#xe65f;</span>
287
+ <div class="name">tabs</div>
288
+ <div class="code-name">&amp;#xe65f;</div>
289
+ </li>
290
+
291
+ </ul>
292
+ <div class="article markdown">
293
+ <h2 id="unicode-">Unicode 引用</h2>
294
+ <hr>
295
+
296
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
297
+ <ul>
298
+ <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
299
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
300
+ <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
301
+ </ul>
302
+ <blockquote>
303
+ <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
304
+ </blockquote>
305
+ <p>Unicode 使用步骤如下：</p>
306
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
307
+ <pre><code class="language-css"
308
+ >@font-face {
309
+ font-family: 'iconfont';
310
+ src: url('iconfont.eot');
311
+ src: url('iconfont.eot?#iefix') format('embedded-opentype'),
312
+ url('iconfont.woff2') format('woff2'),
313
+ url('iconfont.woff') format('woff'),
314
+ url('iconfont.ttf') format('truetype'),
315
+ url('iconfont.svg#iconfont') format('svg');
316
+ }
317
+ </code></pre>
318
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
319
+ <pre><code class="language-css"
320
+ >.iconfont {
321
+ font-family: "iconfont" !important;
322
+ font-size: 16px;
323
+ font-style: normal;
324
+ -webkit-font-smoothing: antialiased;
325
+ -moz-osx-font-smoothing: grayscale;
326
+ }
327
+ </code></pre>
328
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
329
+ <pre>
330
+ <code class="language-html"
331
+ >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
332
+ </code></pre>
333
+ <blockquote>
334
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
335
+ </blockquote>
336
+ </div>
337
+ </div>
338
+ <div class="content font-class">
339
+ <ul class="icon_lists dib-box">
340
+
341
+ <li class="dib">
342
+ <span class="icon iconfont icon-clear"></span>
343
+ <div class="name">
344
+ clear
345
+ </div>
346
+ <div class="code-name">.icon-clear
347
+ </div>
348
+ </li>
349
+
350
+ <li class="dib">
351
+ <span class="icon iconfont icon-weibiaoti46"></span>
352
+ <div class="name">
353
+ 代码生成
354
+ </div>
355
+ <div class="code-name">.icon-weibiaoti46
356
+ </div>
357
+ </li>
358
+
359
+ <li class="dib">
360
+ <span class="icon iconfont icon-delete"></span>
361
+ <div class="name">
362
+ delete
363
+ </div>
364
+ <div class="code-name">.icon-delete
365
+ </div>
366
+ </li>
367
+
368
+ <li class="dib">
369
+ <span class="icon iconfont icon-fabu"></span>
370
+ <div class="name">
371
+ 发布
372
+ </div>
373
+ <div class="code-name">.icon-fabu
374
+ </div>
375
+ </li>
376
+
377
+ <li class="dib">
378
+ <span class="icon iconfont icon-qingkonghuishouzhan"></span>
379
+ <div class="name">
380
+ 清空回收站
381
+ </div>
382
+ <div class="code-name">.icon-qingkonghuishouzhan
383
+ </div>
384
+ </li>
385
+
386
+ <li class="dib">
387
+ <span class="icon iconfont icon-code"></span>
388
+ <div class="name">
389
+ code
390
+ </div>
391
+ <div class="code-name">.icon-code
392
+ </div>
393
+ </li>
394
+
395
+ <li class="dib">
396
+ <span class="icon iconfont icon-table"></span>
397
+ <div class="name">
398
+ table
399
+ </div>
400
+ <div class="code-name">.icon-table
401
+ </div>
402
+ </li>
403
+
404
+ <li class="dib">
405
+ <span class="icon iconfont icon-diy-com-textarea"></span>
406
+ <div class="name">
407
+ diy-com-textarea
408
+ </div>
409
+ <div class="code-name">.icon-diy-com-textarea
410
+ </div>
411
+ </li>
412
+
413
+ <li class="dib">
414
+ <span class="icon iconfont icon-zidingyishuju"></span>
415
+ <div class="name">
416
+ 自定义数据
417
+ </div>
418
+ <div class="code-name">.icon-zidingyishuju
419
+ </div>
420
+ </li>
421
+
422
+ <li class="dib">
423
+ <span class="icon iconfont icon-json"></span>
424
+ <div class="name">
425
+ json
426
+ </div>
427
+ <div class="code-name">.icon-json
428
+ </div>
429
+ </li>
430
+
431
+ <li class="dib">
432
+ <span class="icon iconfont icon-jilianxuanze"></span>
433
+ <div class="name">
434
+ 符号-级联选择
435
+ </div>
436
+ <div class="code-name">.icon-jilianxuanze
437
+ </div>
438
+ </li>
439
+
440
+ <li class="dib">
441
+ <span class="icon iconfont icon-icon_clone"></span>
442
+ <div class="name">
443
+ icon_clone
444
+ </div>
445
+ <div class="code-name">.icon-icon_clone
446
+ </div>
447
+ </li>
448
+
449
+ <li class="dib">
450
+ <span class="icon iconfont icon-wenjianshangchuan"></span>
451
+ <div class="name">
452
+ 文件上传
453
+ </div>
454
+ <div class="code-name">.icon-wenjianshangchuan
455
+ </div>
456
+ </li>
457
+
458
+ <li class="dib">
459
+ <span class="icon iconfont icon-fengexian"></span>
460
+ <div class="name">
461
+ 分割线
462
+ </div>
463
+ <div class="code-name">.icon-fengexian
464
+ </div>
465
+ </li>
466
+
467
+ <li class="dib">
468
+ <span class="icon iconfont icon-tupianyulan"></span>
469
+ <div class="name">
470
+ 图片预览
471
+ </div>
472
+ <div class="code-name">.icon-tupianyulan
473
+ </div>
474
+ </li>
475
+
476
+ <li class="dib">
477
+ <span class="icon iconfont icon-time"></span>
478
+ <div class="name">
479
+ time
480
+ </div>
481
+ <div class="code-name">.icon-time
482
+ </div>
483
+ </li>
484
+
485
+ <li class="dib">
486
+ <span class="icon iconfont icon-icon-test"></span>
487
+ <div class="name">
488
+ rate
489
+ </div>
490
+ <div class="code-name">.icon-icon-test
491
+ </div>
492
+ </li>
493
+
494
+ <li class="dib">
495
+ <span class="icon iconfont icon-tupian"></span>
496
+ <div class="name">
497
+ 图片
498
+ </div>
499
+ <div class="code-name">.icon-tupian
500
+ </div>
501
+ </li>
502
+
503
+ <li class="dib">
504
+ <span class="icon iconfont icon-ad-icon-tooltip"></span>
505
+ <div class="name">
506
+ ad-icon-tooltip
507
+ </div>
508
+ <div class="code-name">.icon-ad-icon-tooltip
509
+ </div>
510
+ </li>
511
+
512
+ <li class="dib">
513
+ <span class="icon iconfont icon-check-box"></span>
514
+ <div class="name">
515
+ check-box
516
+ </div>
517
+ <div class="code-name">.icon-check-box
518
+ </div>
519
+ </li>
520
+
521
+ <li class="dib">
522
+ <span class="icon iconfont icon-switch"></span>
523
+ <div class="name">
524
+ switch
525
+ </div>
526
+ <div class="code-name">.icon-switch
527
+ </div>
528
+ </li>
529
+
530
+ <li class="dib">
531
+ <span class="icon iconfont icon-pingfen"></span>
532
+ <div class="name">
533
+ 评分
534
+ </div>
535
+ <div class="code-name">.icon-pingfen
536
+ </div>
537
+ </li>
538
+
539
+ <li class="dib">
540
+ <span class="icon iconfont icon-input"></span>
541
+ <div class="name">
542
+ input
543
+ </div>
544
+ <div class="code-name">.icon-input
545
+ </div>
546
+ </li>
547
+
548
+ <li class="dib">
549
+ <span class="icon iconfont icon-radio-active"></span>
550
+ <div class="name">
551
+ radio
552
+ </div>
553
+ <div class="code-name">.icon-radio-active
554
+ </div>
555
+ </li>
556
+
557
+ <li class="dib">
558
+ <span class="icon iconfont icon-color"></span>
559
+ <div class="name">
560
+ color
561
+ </div>
562
+ <div class="code-name">.icon-color
563
+ </div>
564
+ </li>
565
+
566
+ <li class="dib">
567
+ <span class="icon iconfont icon-slider"></span>
568
+ <div class="name">
569
+ slider
570
+ </div>
571
+ <div class="code-name">.icon-slider
572
+ </div>
573
+ </li>
574
+
575
+ <li class="dib">
576
+ <span class="icon iconfont icon-icon_bars"></span>
577
+ <div class="name">
578
+ icon_bars
579
+ </div>
580
+ <div class="code-name">.icon-icon_bars
581
+ </div>
582
+ </li>
583
+
584
+ <li class="dib">
585
+ <span class="icon iconfont icon-fuwenbenkuang"></span>
586
+ <div class="name">
587
+ 富文本框
588
+ </div>
589
+ <div class="code-name">.icon-fuwenbenkuang
590
+ </div>
591
+ </li>
592
+
593
+ <li class="dib">
594
+ <span class="icon iconfont icon-date"></span>
595
+ <div class="name">
596
+ date
597
+ </div>
598
+ <div class="code-name">.icon-date
599
+ </div>
600
+ </li>
601
+
602
+ <li class="dib">
603
+ <span class="icon iconfont icon-ic"></span>
604
+ <div class="name">
605
+ 自定义字段
606
+ </div>
607
+ <div class="code-name">.icon-ic
608
+ </div>
609
+ </li>
610
+
611
+ <li class="dib">
612
+ <span class="icon iconfont icon-trash"></span>
613
+ <div class="name">
614
+ trash
615
+ </div>
616
+ <div class="code-name">.icon-trash
617
+ </div>
618
+ </li>
619
+
620
+ <li class="dib">
621
+ <span class="icon iconfont icon-grid-"></span>
622
+ <div class="name">
623
+ grid-45
624
+ </div>
625
+ <div class="code-name">.icon-grid-
626
+ </div>
627
+ </li>
628
+
629
+ <li class="dib">
630
+ <span class="icon iconfont icon-drag"></span>
631
+ <div class="name">
632
+ drag
633
+ </div>
634
+ <div class="code-name">.icon-drag
635
+ </div>
636
+ </li>
637
+
638
+ <li class="dib">
639
+ <span class="icon iconfont icon-shangchuan"></span>
640
+ <div class="name">
641
+ 上传
642
+ </div>
643
+ <div class="code-name">.icon-shangchuan
644
+ </div>
645
+ </li>
646
+
647
+ <li class="dib">
648
+ <span class="icon iconfont icon-zhage"></span>
649
+ <div class="name">
650
+ 栅格
651
+ </div>
652
+ <div class="code-name">.icon-zhage
653
+ </div>
654
+ </li>
655
+
656
+ <li class="dib">
657
+ <span class="icon iconfont icon-number"></span>
658
+ <div class="name">
659
+ number
660
+ </div>
661
+ <div class="code-name">.icon-number
662
+ </div>
663
+ </li>
664
+
665
+ <li class="dib">
666
+ <span class="icon iconfont icon-yulan"></span>
667
+ <div class="name">
668
+ 预览
669
+ </div>
670
+ <div class="code-name">.icon-yulan
671
+ </div>
672
+ </li>
673
+
674
+ <li class="dib">
675
+ <span class="icon iconfont icon-select"></span>
676
+ <div class="name">
677
+ select
678
+ </div>
679
+ <div class="code-name">.icon-select
680
+ </div>
681
+ </li>
682
+
683
+ <li class="dib">
684
+ <span class="icon iconfont icon-wenzishezhi-"></span>
685
+ <div class="name">
686
+ 文字设置-22
687
+ </div>
688
+ <div class="code-name">.icon-wenzishezhi-
689
+ </div>
690
+ </li>
691
+
692
+ <li class="dib">
693
+ <span class="icon iconfont icon-pingfen1"></span>
694
+ <div class="name">
695
+ 评分
696
+ </div>
697
+ <div class="code-name">.icon-pingfen1
698
+ </div>
699
+ </li>
700
+
701
+ <li class="dib">
702
+ <span class="icon iconfont icon-RectangleCopy"></span>
703
+ <div class="name">
704
+ 单栏布局
705
+ </div>
706
+ <div class="code-name">.icon-RectangleCopy
707
+ </div>
708
+ </li>
709
+
710
+ <li class="dib">
711
+ <span class="icon iconfont icon-sync1"></span>
712
+ <div class="name">
713
+ sync
714
+ </div>
715
+ <div class="code-name">.icon-sync1
716
+ </div>
717
+ </li>
718
+
719
+ <li class="dib">
720
+ <span class="icon iconfont icon-tabs"></span>
721
+ <div class="name">
722
+ tabs
723
+ </div>
724
+ <div class="code-name">.icon-tabs
725
+ </div>
726
+ </li>
727
+
728
+ </ul>
729
+ <div class="article markdown">
730
+ <h2 id="font-class-">font-class 引用</h2>
731
+ <hr>
732
+
733
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
734
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
735
+ <ul>
736
+ <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
737
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
738
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
739
+ <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
740
+ </ul>
741
+ <p>使用步骤如下：</p>
742
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
743
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
744
+ </code></pre>
745
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
746
+ <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
747
+ </code></pre>
748
+ <blockquote>
749
+ <p>"
750
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
751
+ </blockquote>
752
+ </div>
753
+ </div>
754
+ <div class="content symbol">
755
+ <ul class="icon_lists dib-box">
756
+
757
+ <li class="dib">
758
+ <svg class="icon svg-icon" aria-hidden="true">
759
+ <use xlink:href="#icon-clear"></use>
760
+ </svg>
761
+ <div class="name">clear</div>
762
+ <div class="code-name">#icon-clear</div>
763
+ </li>
764
+
765
+ <li class="dib">
766
+ <svg class="icon svg-icon" aria-hidden="true">
767
+ <use xlink:href="#icon-weibiaoti46"></use>
768
+ </svg>
769
+ <div class="name">代码生成</div>
770
+ <div class="code-name">#icon-weibiaoti46</div>
771
+ </li>
772
+
773
+ <li class="dib">
774
+ <svg class="icon svg-icon" aria-hidden="true">
775
+ <use xlink:href="#icon-delete"></use>
776
+ </svg>
777
+ <div class="name">delete</div>
778
+ <div class="code-name">#icon-delete</div>
779
+ </li>
780
+
781
+ <li class="dib">
782
+ <svg class="icon svg-icon" aria-hidden="true">
783
+ <use xlink:href="#icon-fabu"></use>
784
+ </svg>
785
+ <div class="name">发布</div>
786
+ <div class="code-name">#icon-fabu</div>
787
+ </li>
788
+
789
+ <li class="dib">
790
+ <svg class="icon svg-icon" aria-hidden="true">
791
+ <use xlink:href="#icon-qingkonghuishouzhan"></use>
792
+ </svg>
793
+ <div class="name">清空回收站</div>
794
+ <div class="code-name">#icon-qingkonghuishouzhan</div>
795
+ </li>
796
+
797
+ <li class="dib">
798
+ <svg class="icon svg-icon" aria-hidden="true">
799
+ <use xlink:href="#icon-code"></use>
800
+ </svg>
801
+ <div class="name">code</div>
802
+ <div class="code-name">#icon-code</div>
803
+ </li>
804
+
805
+ <li class="dib">
806
+ <svg class="icon svg-icon" aria-hidden="true">
807
+ <use xlink:href="#icon-table"></use>
808
+ </svg>
809
+ <div class="name">table</div>
810
+ <div class="code-name">#icon-table</div>
811
+ </li>
812
+
813
+ <li class="dib">
814
+ <svg class="icon svg-icon" aria-hidden="true">
815
+ <use xlink:href="#icon-diy-com-textarea"></use>
816
+ </svg>
817
+ <div class="name">diy-com-textarea</div>
818
+ <div class="code-name">#icon-diy-com-textarea</div>
819
+ </li>
820
+
821
+ <li class="dib">
822
+ <svg class="icon svg-icon" aria-hidden="true">
823
+ <use xlink:href="#icon-zidingyishuju"></use>
824
+ </svg>
825
+ <div class="name">自定义数据</div>
826
+ <div class="code-name">#icon-zidingyishuju</div>
827
+ </li>
828
+
829
+ <li class="dib">
830
+ <svg class="icon svg-icon" aria-hidden="true">
831
+ <use xlink:href="#icon-json"></use>
832
+ </svg>
833
+ <div class="name">json</div>
834
+ <div class="code-name">#icon-json</div>
835
+ </li>
836
+
837
+ <li class="dib">
838
+ <svg class="icon svg-icon" aria-hidden="true">
839
+ <use xlink:href="#icon-jilianxuanze"></use>
840
+ </svg>
841
+ <div class="name">符号-级联选择</div>
842
+ <div class="code-name">#icon-jilianxuanze</div>
843
+ </li>
844
+
845
+ <li class="dib">
846
+ <svg class="icon svg-icon" aria-hidden="true">
847
+ <use xlink:href="#icon-icon_clone"></use>
848
+ </svg>
849
+ <div class="name">icon_clone</div>
850
+ <div class="code-name">#icon-icon_clone</div>
851
+ </li>
852
+
853
+ <li class="dib">
854
+ <svg class="icon svg-icon" aria-hidden="true">
855
+ <use xlink:href="#icon-wenjianshangchuan"></use>
856
+ </svg>
857
+ <div class="name">文件上传</div>
858
+ <div class="code-name">#icon-wenjianshangchuan</div>
859
+ </li>
860
+
861
+ <li class="dib">
862
+ <svg class="icon svg-icon" aria-hidden="true">
863
+ <use xlink:href="#icon-fengexian"></use>
864
+ </svg>
865
+ <div class="name">分割线</div>
866
+ <div class="code-name">#icon-fengexian</div>
867
+ </li>
868
+
869
+ <li class="dib">
870
+ <svg class="icon svg-icon" aria-hidden="true">
871
+ <use xlink:href="#icon-tupianyulan"></use>
872
+ </svg>
873
+ <div class="name">图片预览</div>
874
+ <div class="code-name">#icon-tupianyulan</div>
875
+ </li>
876
+
877
+ <li class="dib">
878
+ <svg class="icon svg-icon" aria-hidden="true">
879
+ <use xlink:href="#icon-time"></use>
880
+ </svg>
881
+ <div class="name">time</div>
882
+ <div class="code-name">#icon-time</div>
883
+ </li>
884
+
885
+ <li class="dib">
886
+ <svg class="icon svg-icon" aria-hidden="true">
887
+ <use xlink:href="#icon-icon-test"></use>
888
+ </svg>
889
+ <div class="name">rate</div>
890
+ <div class="code-name">#icon-icon-test</div>
891
+ </li>
892
+
893
+ <li class="dib">
894
+ <svg class="icon svg-icon" aria-hidden="true">
895
+ <use xlink:href="#icon-tupian"></use>
896
+ </svg>
897
+ <div class="name">图片</div>
898
+ <div class="code-name">#icon-tupian</div>
899
+ </li>
900
+
901
+ <li class="dib">
902
+ <svg class="icon svg-icon" aria-hidden="true">
903
+ <use xlink:href="#icon-ad-icon-tooltip"></use>
904
+ </svg>
905
+ <div class="name">ad-icon-tooltip</div>
906
+ <div class="code-name">#icon-ad-icon-tooltip</div>
907
+ </li>
908
+
909
+ <li class="dib">
910
+ <svg class="icon svg-icon" aria-hidden="true">
911
+ <use xlink:href="#icon-check-box"></use>
912
+ </svg>
913
+ <div class="name">check-box</div>
914
+ <div class="code-name">#icon-check-box</div>
915
+ </li>
916
+
917
+ <li class="dib">
918
+ <svg class="icon svg-icon" aria-hidden="true">
919
+ <use xlink:href="#icon-switch"></use>
920
+ </svg>
921
+ <div class="name">switch</div>
922
+ <div class="code-name">#icon-switch</div>
923
+ </li>
924
+
925
+ <li class="dib">
926
+ <svg class="icon svg-icon" aria-hidden="true">
927
+ <use xlink:href="#icon-pingfen"></use>
928
+ </svg>
929
+ <div class="name">评分</div>
930
+ <div class="code-name">#icon-pingfen</div>
931
+ </li>
932
+
933
+ <li class="dib">
934
+ <svg class="icon svg-icon" aria-hidden="true">
935
+ <use xlink:href="#icon-input"></use>
936
+ </svg>
937
+ <div class="name">input</div>
938
+ <div class="code-name">#icon-input</div>
939
+ </li>
940
+
941
+ <li class="dib">
942
+ <svg class="icon svg-icon" aria-hidden="true">
943
+ <use xlink:href="#icon-radio-active"></use>
944
+ </svg>
945
+ <div class="name">radio</div>
946
+ <div class="code-name">#icon-radio-active</div>
947
+ </li>
948
+
949
+ <li class="dib">
950
+ <svg class="icon svg-icon" aria-hidden="true">
951
+ <use xlink:href="#icon-color"></use>
952
+ </svg>
953
+ <div class="name">color</div>
954
+ <div class="code-name">#icon-color</div>
955
+ </li>
956
+
957
+ <li class="dib">
958
+ <svg class="icon svg-icon" aria-hidden="true">
959
+ <use xlink:href="#icon-slider"></use>
960
+ </svg>
961
+ <div class="name">slider</div>
962
+ <div class="code-name">#icon-slider</div>
963
+ </li>
964
+
965
+ <li class="dib">
966
+ <svg class="icon svg-icon" aria-hidden="true">
967
+ <use xlink:href="#icon-icon_bars"></use>
968
+ </svg>
969
+ <div class="name">icon_bars</div>
970
+ <div class="code-name">#icon-icon_bars</div>
971
+ </li>
972
+
973
+ <li class="dib">
974
+ <svg class="icon svg-icon" aria-hidden="true">
975
+ <use xlink:href="#icon-fuwenbenkuang"></use>
976
+ </svg>
977
+ <div class="name">富文本框</div>
978
+ <div class="code-name">#icon-fuwenbenkuang</div>
979
+ </li>
980
+
981
+ <li class="dib">
982
+ <svg class="icon svg-icon" aria-hidden="true">
983
+ <use xlink:href="#icon-date"></use>
984
+ </svg>
985
+ <div class="name">date</div>
986
+ <div class="code-name">#icon-date</div>
987
+ </li>
988
+
989
+ <li class="dib">
990
+ <svg class="icon svg-icon" aria-hidden="true">
991
+ <use xlink:href="#icon-ic"></use>
992
+ </svg>
993
+ <div class="name">自定义字段</div>
994
+ <div class="code-name">#icon-ic</div>
995
+ </li>
996
+
997
+ <li class="dib">
998
+ <svg class="icon svg-icon" aria-hidden="true">
999
+ <use xlink:href="#icon-trash"></use>
1000
+ </svg>
1001
+ <div class="name">trash</div>
1002
+ <div class="code-name">#icon-trash</div>
1003
+ </li>
1004
+
1005
+ <li class="dib">
1006
+ <svg class="icon svg-icon" aria-hidden="true">
1007
+ <use xlink:href="#icon-grid-"></use>
1008
+ </svg>
1009
+ <div class="name">grid-45</div>
1010
+ <div class="code-name">#icon-grid-</div>
1011
+ </li>
1012
+
1013
+ <li class="dib">
1014
+ <svg class="icon svg-icon" aria-hidden="true">
1015
+ <use xlink:href="#icon-drag"></use>
1016
+ </svg>
1017
+ <div class="name">drag</div>
1018
+ <div class="code-name">#icon-drag</div>
1019
+ </li>
1020
+
1021
+ <li class="dib">
1022
+ <svg class="icon svg-icon" aria-hidden="true">
1023
+ <use xlink:href="#icon-shangchuan"></use>
1024
+ </svg>
1025
+ <div class="name">上传</div>
1026
+ <div class="code-name">#icon-shangchuan</div>
1027
+ </li>
1028
+
1029
+ <li class="dib">
1030
+ <svg class="icon svg-icon" aria-hidden="true">
1031
+ <use xlink:href="#icon-zhage"></use>
1032
+ </svg>
1033
+ <div class="name">栅格</div>
1034
+ <div class="code-name">#icon-zhage</div>
1035
+ </li>
1036
+
1037
+ <li class="dib">
1038
+ <svg class="icon svg-icon" aria-hidden="true">
1039
+ <use xlink:href="#icon-number"></use>
1040
+ </svg>
1041
+ <div class="name">number</div>
1042
+ <div class="code-name">#icon-number</div>
1043
+ </li>
1044
+
1045
+ <li class="dib">
1046
+ <svg class="icon svg-icon" aria-hidden="true">
1047
+ <use xlink:href="#icon-yulan"></use>
1048
+ </svg>
1049
+ <div class="name">预览</div>
1050
+ <div class="code-name">#icon-yulan</div>
1051
+ </li>
1052
+
1053
+ <li class="dib">
1054
+ <svg class="icon svg-icon" aria-hidden="true">
1055
+ <use xlink:href="#icon-select"></use>
1056
+ </svg>
1057
+ <div class="name">select</div>
1058
+ <div class="code-name">#icon-select</div>
1059
+ </li>
1060
+
1061
+ <li class="dib">
1062
+ <svg class="icon svg-icon" aria-hidden="true">
1063
+ <use xlink:href="#icon-wenzishezhi-"></use>
1064
+ </svg>
1065
+ <div class="name">文字设置-22</div>
1066
+ <div class="code-name">#icon-wenzishezhi-</div>
1067
+ </li>
1068
+
1069
+ <li class="dib">
1070
+ <svg class="icon svg-icon" aria-hidden="true">
1071
+ <use xlink:href="#icon-pingfen1"></use>
1072
+ </svg>
1073
+ <div class="name">评分</div>
1074
+ <div class="code-name">#icon-pingfen1</div>
1075
+ </li>
1076
+
1077
+ <li class="dib">
1078
+ <svg class="icon svg-icon" aria-hidden="true">
1079
+ <use xlink:href="#icon-RectangleCopy"></use>
1080
+ </svg>
1081
+ <div class="name">单栏布局</div>
1082
+ <div class="code-name">#icon-RectangleCopy</div>
1083
+ </li>
1084
+
1085
+ <li class="dib">
1086
+ <svg class="icon svg-icon" aria-hidden="true">
1087
+ <use xlink:href="#icon-sync1"></use>
1088
+ </svg>
1089
+ <div class="name">sync</div>
1090
+ <div class="code-name">#icon-sync1</div>
1091
+ </li>
1092
+
1093
+ <li class="dib">
1094
+ <svg class="icon svg-icon" aria-hidden="true">
1095
+ <use xlink:href="#icon-tabs"></use>
1096
+ </svg>
1097
+ <div class="name">tabs</div>
1098
+ <div class="code-name">#icon-tabs</div>
1099
+ </li>
1100
+
1101
+ </ul>
1102
+ <div class="article markdown">
1103
+ <h2 id="symbol-">Symbol 引用</h2>
1104
+ <hr>
1105
+
1106
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1107
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1108
+ <ul>
1109
+ <li>支持多色图标了，不再受单色限制。</li>
1110
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1111
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1112
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1113
+ </ul>
1114
+ <p>使用步骤如下：</p>
1115
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1116
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1117
+ </code></pre>
1118
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1119
+ <pre><code class="language-html">&lt;style&gt;
1120
+ .icon {
1121
+ width: 1em;
1122
+ height: 1em;
1123
+ vertical-align: -0.15em;
1124
+ fill: currentColor;
1125
+ overflow: hidden;
1126
+ }
1127
+ &lt;/style&gt;
1128
+ </code></pre>
1129
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1130
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1131
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1132
+ &lt;/svg&gt;
1133
+ </code></pre>
1134
+ </div>
1135
+ </div>
1136
+
1137
+ </div>
1138
+ </div>
1139
+ <script>
1140
+ $(document).ready(function () {
1141
+ $('.tab-container .content:first').show()
1142
+
1143
+ $('#tabs li').click(function (e) {
1144
+ var tabContent = $('.tab-container .content')
1145
+ var index = $(this).index()
1146
+
1147
+ if ($(this).hasClass('active')) {
1148
+ return
1149
+ } else {
1150
+ $('#tabs li').removeClass('active')
1151
+ $(this).addClass('active')
1152
+
1153
+ tabContent.hide().eq(index).fadeIn()
1154
+ }
1155
+ })
1156
+ })
1157
+ </script>
1158
+ </body>
1159
+ </html>