@zgfe/business-lib 1.2.70-hxd.9 → 1.2.71-hxd.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (395) hide show
  1. package/README.md +12 -12
  2. package/config.js +41 -41
  3. package/es/AUMFormulaTarget/components/formula/index.js +16 -14
  4. package/es/AUMFormulaTarget/components/formula/index.less +86 -86
  5. package/es/AUMFormulaTarget/components/formula/util.js +6 -6
  6. package/es/AUMFormulaTarget/components/formulaItem/index.js +23 -23
  7. package/es/AUMFormulaTarget/components/panel/cdpCshCondition.js +52 -52
  8. package/es/AUMFormulaTarget/components/panel/index.js +30 -30
  9. package/es/AUMFormulaTarget/components/panel/index.less +269 -269
  10. package/es/AUMFormulaTarget/components/panel/item.js +22 -22
  11. package/es/AUMFormulaTarget/components/symbol/index.js +5 -5
  12. package/es/AUMFormulaTarget/components/symbol/index.less +49 -49
  13. package/es/AUMFormulaTarget/demo/group.js +13 -13
  14. package/es/AUMFormulaTarget/demo/index.js +1 -1
  15. package/es/AUMFormulaTarget/index.d.ts +4 -1
  16. package/es/AUMFormulaTarget/index.js +11 -11
  17. package/es/AUMFormulaTarget/styles/index.less +74 -74
  18. package/es/addToPanel/components/addPanel.js +5 -5
  19. package/es/addToPanel/components/numberChart.js +5 -5
  20. package/es/addToPanel/components/radioGroup.d.ts +4 -1
  21. package/es/addToPanel/components/styleList.d.ts +4 -1
  22. package/es/addToPanel/components/styleList.js +5 -5
  23. package/es/addToPanel/components/wholeChart.js +5 -5
  24. package/es/addToPanel/demo/edit.js +7 -7
  25. package/es/addToPanel/demo/index.js +7 -7
  26. package/es/addToPanel/index.d.ts +4 -1
  27. package/es/addToPanel/index.js +22 -22
  28. package/es/addToPanel/styles/addPanel.less +25 -25
  29. package/es/addToPanel/styles/index.less +17 -17
  30. package/es/addToPanel/styles/style.less +66 -66
  31. package/es/addToScene/demo/index.js +7 -7
  32. package/es/addToScene/index.js +11 -16
  33. package/es/addToScene/styles/index.less +30 -30
  34. package/es/amountSelector/demo/index.d.ts +3 -0
  35. package/es/amountSelector/demo/index.js +9 -0
  36. package/es/amountSelector/index.d.ts +10 -0
  37. package/es/amountSelector/index.js +21 -0
  38. package/es/amountSelector/styles/index.less +27 -0
  39. package/es/amountSelector/types.d.ts +4 -0
  40. package/es/amountSelector/types.js +1 -0
  41. package/es/amountSelector/util.d.ts +3 -0
  42. package/es/amountSelector/util.js +18 -0
  43. package/es/assets/colorIcon/demo.css +539 -539
  44. package/es/assets/colorIcon/demo_index.html +1985 -1454
  45. package/es/assets/colorIcon/iconfont.css +329 -236
  46. package/es/assets/colorIcon/iconfont.js +13 -14
  47. package/es/assets/colorIcon/iconfont.json +555 -394
  48. package/es/assets/colorIcon/iconfont.ttf +0 -0
  49. package/es/assets/colorIcon/iconfont.woff +0 -0
  50. package/es/assets/colorIcon/iconfont.woff2 +0 -0
  51. package/es/assets/demo/dropdown.js +5 -5
  52. package/es/assets/demo/input.js +5 -5
  53. package/es/assets/iconfont/demo.css +539 -539
  54. package/es/assets/iconfont/demo_index.html +5563 -5708
  55. package/es/assets/iconfont/iconfont.css +1015 -975
  56. package/es/assets/iconfont/iconfont.js +1 -1
  57. package/es/assets/iconfont/iconfont.json +1584 -1689
  58. package/es/assets/styles/chunks.less +183 -183
  59. package/es/assets/styles/inner.less +3 -3
  60. package/es/assets/styles/resetAntd.less +568 -564
  61. package/es/assets/styles/variable.less +21 -21
  62. package/es/assets/theme.js +2 -2
  63. package/es/attrCondition/demo/group.js +1 -1
  64. package/es/attrCondition/group.js +15 -10
  65. package/es/attrCondition/index.js +20 -15
  66. package/es/attrCondition/styles/index.less +101 -101
  67. package/es/attrCondition/useAttrCondition.js +14 -12
  68. package/es/attrCondition/useConditionGroup.js +8 -8
  69. package/es/attrConditions/components/operateList.js +16 -13
  70. package/es/attrConditions/components/stringList.js +26 -31
  71. package/es/attrConditions/components/valuesList.js +5 -5
  72. package/es/attrConditions/demo/group.js +7 -7
  73. package/es/attrConditions/demo/index.js +5 -5
  74. package/es/attrConditions/group.js +3 -3
  75. package/es/attrConditions/index.d.ts +4 -1
  76. package/es/attrConditions/index.js +4 -2
  77. package/es/attrConditions/styles/group.less +49 -49
  78. package/es/attrConditions/styles/index.less +151 -151
  79. package/es/attrConditions/types.d.ts +4 -0
  80. package/es/attrConditions/utils/operates.d.ts +4 -0
  81. package/es/attrConditions/utils/operates.js +37 -0
  82. package/es/attributeSelector/demo/disable.js +5 -5
  83. package/es/attributeSelector/demo/extra.js +5 -5
  84. package/es/attributeSelector/demo/funnel.js +5 -5
  85. package/es/attributeSelector/demo/index.js +5 -5
  86. package/es/attributeSelector/index.js +43 -37
  87. package/es/attributeSelector/listPanel.js +332 -125
  88. package/es/attributeSelector/styles/index.less +141 -141
  89. package/es/attributeSelector/types.d.ts +2 -0
  90. package/es/attributeSelector/util.js +3 -0
  91. package/es/chart/demo/data/data5 copy.js +2 -2
  92. package/es/chart/demo/index.js +6 -6
  93. package/es/chart/demo/line_bar_stack.js +25 -25
  94. package/es/chart/demo/stack.js +6 -6
  95. package/es/chart/index.js +21 -23
  96. package/es/chart/styles/index.less +113 -113
  97. package/es/chart/util/chartOptionConfig.js +6 -6
  98. package/es/chart/util/color.js +1 -1
  99. package/es/chart/util/data/china.js +18 -18
  100. package/es/chart/util/formatData.js +6 -6
  101. package/es/chart/util/mapUtil.js +11 -11
  102. package/es/colorIcon/index.js +2 -4
  103. package/es/constants/apis.d.ts +4 -0
  104. package/es/constants/apis.js +6 -2
  105. package/es/constants/common.d.ts +11 -0
  106. package/es/constants/common.js +31 -0
  107. package/es/context/index.d.ts +2 -0
  108. package/es/cycleTime/demo/hour.js +5 -5
  109. package/es/cycleTime/index.js +22 -24
  110. package/es/cycleTime/month.js +9 -12
  111. package/es/cycleTime/styles/index.less +24 -24
  112. package/es/cycleTime/styles/month.less +95 -95
  113. package/es/dataSetGroup/index.js +5 -6
  114. package/es/dataSetGroup/overlay.js +10 -10
  115. package/es/dataSetGroup/styles/index.less +146 -146
  116. package/es/datePicker/datePicker.js +8 -8
  117. package/es/datePicker/demo/customType.js +5 -5
  118. package/es/datePicker/demo/day.js +5 -5
  119. package/es/datePicker/demo/index.js +5 -5
  120. package/es/datePicker/index.d.ts +4 -1
  121. package/es/datePicker/index.js +19 -19
  122. package/es/datePicker/shortcut.js +5 -5
  123. package/es/datePicker/styles/index.less +53 -53
  124. package/es/datePickerV2/datePicker.d.ts +1 -1
  125. package/es/datePickerV2/datePicker.js +11 -8
  126. package/es/datePickerV2/demo/customType.js +5 -5
  127. package/es/datePickerV2/demo/day.js +5 -5
  128. package/es/datePickerV2/demo/index.js +6 -6
  129. package/es/datePickerV2/index.d.ts +4 -1
  130. package/es/datePickerV2/index.js +40 -26
  131. package/es/datePickerV2/popoverContent.d.ts +1 -1
  132. package/es/datePickerV2/popoverContent.js +9 -9
  133. package/es/datePickerV2/shortcut.js +8 -8
  134. package/es/datePickerV2/styles/index.less +194 -194
  135. package/es/datePickerV2/types.d.ts +3 -1
  136. package/es/datePickerV2/types.js +1 -0
  137. package/es/datePickerV2/utils.js +24 -2
  138. package/es/demoWrapper/content.js +46 -47
  139. package/es/demoWrapper/index.js +15 -15
  140. package/es/demoWrapper/index.less +3 -3
  141. package/es/demoWrapper/innerDemo.js +1 -1
  142. package/es/dialog/demo/index.js +5 -5
  143. package/es/dialog/index.d.ts +4 -1
  144. package/es/dialog/index.js +6 -6
  145. package/es/dialog/styles/index.less +22 -22
  146. package/es/dnd/demo/data.js +5 -5
  147. package/es/dnd/demo/handle.js +5 -5
  148. package/es/dnd/demo/index.js +5 -1
  149. package/es/dnd/demo/styles/index.less +34 -34
  150. package/es/dnd/index.d.ts +4 -1
  151. package/es/dnd/index.js +10 -11
  152. package/es/dnd/item.js +20 -6
  153. package/es/dnd/styles/index.less +19 -19
  154. package/es/empty/index.js +6 -6
  155. package/es/eventSelector/demo/index.js +5 -5
  156. package/es/eventSelector/demo/multiple.js +5 -5
  157. package/es/eventSelector/index.d.ts +4 -1
  158. package/es/eventSelector/index.js +10 -9
  159. package/es/eventSelector/listPanel.js +42 -46
  160. package/es/eventSelector/option.d.ts +1 -0
  161. package/es/eventSelector/option.js +15 -4
  162. package/es/eventSelector/styles/index.less +127 -123
  163. package/es/eventSelector/types.d.ts +1 -0
  164. package/es/formulaTarget/components/formula/index.js +9 -8
  165. package/es/formulaTarget/components/formula/index.less +76 -76
  166. package/es/formulaTarget/components/formula/types.d.ts +1 -0
  167. package/es/formulaTarget/components/formula/util.js +6 -6
  168. package/es/formulaTarget/components/formulaItem/index.js +27 -22
  169. package/es/formulaTarget/components/formulaItem/types.d.ts +1 -0
  170. package/es/formulaTarget/components/panel/index.js +34 -33
  171. package/es/formulaTarget/components/panel/index.less +139 -139
  172. package/es/formulaTarget/components/panel/item.js +17 -10
  173. package/es/formulaTarget/components/panel/types.d.ts +2 -0
  174. package/es/formulaTarget/components/symbol/index.js +5 -5
  175. package/es/formulaTarget/components/symbol/index.less +49 -49
  176. package/es/formulaTarget/demo/group.js +13 -13
  177. package/es/formulaTarget/index.d.ts +4 -1
  178. package/es/formulaTarget/index.js +27 -26
  179. package/es/formulaTarget/styles/index.less +74 -74
  180. package/es/formulaTarget/types.d.ts +1 -0
  181. package/es/hooks/types/subject.d.ts +14 -14
  182. package/es/hooks/useBizStore.js +38 -44
  183. package/es/hooks/useChanged.js +5 -5
  184. package/es/hooks/useSubject.js +5 -5
  185. package/es/icon/demo/list.less +32 -32
  186. package/es/icon/iconFont.d.ts +4 -1
  187. package/es/icon/iconFont.js +8 -8
  188. package/es/index.d.ts +2 -1
  189. package/es/index.js +2 -1
  190. package/es/layout/analysisLayout/demo/index.less +12 -12
  191. package/es/layout/analysisLayout/index.d.ts +4 -1
  192. package/es/layout/analysisLayout/index.js +8 -8
  193. package/es/layout/analysisLayout/index.less +118 -118
  194. package/es/layout/columnLayout/demo/data.js +9 -9
  195. package/es/layout/columnLayout/demo/index.js +5 -5
  196. package/es/layout/columnLayout/demo/index.less +15 -15
  197. package/es/layout/columnLayout/demo/panel.js +5 -5
  198. package/es/layout/columnLayout/index.d.ts +4 -1
  199. package/es/layout/columnLayout/index.js +10 -10
  200. package/es/layout/columnLayout/index.less +81 -81
  201. package/es/layout/detail/index.less +27 -27
  202. package/es/layout/optionTitle/components/btnMenu/demo.js +2 -2
  203. package/es/layout/optionTitle/components/btnMenu/index.js +6 -6
  204. package/es/layout/optionTitle/components/btnMenu/index.less +18 -18
  205. package/es/layout/optionTitle/components/changePanelModal/index.js +14 -14
  206. package/es/layout/optionTitle/components/changePanelModal/panelItem.js +10 -10
  207. package/es/layout/optionTitle/components/changePanelModal/styles/index.less +92 -92
  208. package/es/layout/optionTitle/components/title/demo.js +5 -5
  209. package/es/layout/optionTitle/components/title/index.d.ts +1 -2
  210. package/es/layout/optionTitle/components/title/index.js +19 -15
  211. package/es/layout/optionTitle/components/title/index.less +43 -43
  212. package/es/layout/optionTitle/demo/index.js +5 -5
  213. package/es/layout/optionTitle/demo/index.less +12 -12
  214. package/es/layout/optionTitle/demo/layout.js +5 -5
  215. package/es/layout/optionTitle/demo/panelCreate.js +5 -5
  216. package/es/layout/optionTitle/index.js +16 -16
  217. package/es/layout/optionTitle/layout.js +9 -9
  218. package/es/layout/optionTitle/styles/index.less +30 -30
  219. package/es/layout/optionTitle/styles/layout.less +90 -90
  220. package/es/layout/optionTitle/styles/search.less +27 -27
  221. package/es/loading/styles/index.less +20 -20
  222. package/es/loginForm/index.js +5 -5
  223. package/es/loginForm/index.less +7 -7
  224. package/es/platformSelector/index.js +5 -5
  225. package/es/platformSelector/styles/index.less +26 -26
  226. package/es/productCondition/conditionTypeList.d.ts +4 -1
  227. package/es/productCondition/conditionTypeList.js +2 -2
  228. package/es/productCondition/conditions/cdpCshCondition.js +54 -51
  229. package/es/productCondition/conditions/constants.d.ts +2 -0
  230. package/es/productCondition/conditions/constants.js +2 -0
  231. package/es/productCondition/conditions/eventCondition.js +8 -8
  232. package/es/productCondition/conditions/order/runPeriodCondition.js +8 -10
  233. package/es/productCondition/conditions/order/runTimesCondition.js +13 -13
  234. package/es/productCondition/conditions/periodCondition.d.ts +4 -1
  235. package/es/productCondition/conditions/periodCondition.js +8 -8
  236. package/es/productCondition/conditions/propCondition.d.ts +4 -1
  237. package/es/productCondition/conditions/propCondition.js +14 -14
  238. package/es/productCondition/conditions/runTimesCondition.js +6 -6
  239. package/es/productCondition/conditions/styles/cdpCondition.less +31 -31
  240. package/es/productCondition/conditions/styles/cdpCshCondition.less +41 -41
  241. package/es/productCondition/conditions/styles/eventCondition.less +51 -51
  242. package/es/productCondition/conditions/styles/periodCondition.less +26 -26
  243. package/es/productCondition/conditions/styles/propCondition.less +43 -43
  244. package/es/productCondition/conditions/styles/runTimesCondition.less +19 -19
  245. package/es/productCondition/conditions/styles/tagsCondition.less +20 -20
  246. package/es/productCondition/conditions/styles/textDesc.less +17 -17
  247. package/es/productCondition/conditions/textDesc.js +6 -6
  248. package/es/productCondition/conditions/timeDimension.js +18 -18
  249. package/es/productCondition/demo/business.js +5 -5
  250. package/es/productCondition/demo/index.js +5 -5
  251. package/es/productCondition/index.d.ts +4 -1
  252. package/es/productCondition/index.js +17 -17
  253. package/es/productCondition/orConditions.js +8 -8
  254. package/es/productCondition/relationLabel.js +2 -2
  255. package/es/productCondition/styles/conditionTypeList.less +32 -30
  256. package/es/productCondition/styles/conditionWrap.less +18 -18
  257. package/es/productCondition/styles/index.less +33 -33
  258. package/es/productCondition/styles/orConditions.less +34 -34
  259. package/es/productCondition/styles/relationLabel.less +19 -19
  260. package/es/productCondition/types.d.ts +3 -1
  261. package/es/productCondition/util.d.ts +4 -0
  262. package/es/productCondition/util.js +10 -8
  263. package/es/quickDatePicker/demo/index.js +36 -16
  264. package/es/quickDatePicker/index.js +119 -22
  265. package/es/quickDatePicker/styles/index.less +141 -138
  266. package/es/quickDatePicker/types.d.ts +13 -0
  267. package/es/quickDatePicker/utils.d.ts +6 -0
  268. package/es/quickDatePicker/utils.js +54 -1
  269. package/es/select/demo/children.js +5 -5
  270. package/es/select/demo/group.js +5 -5
  271. package/es/select/demo/index.js +7 -6
  272. package/es/select/demo/loading.js +5 -5
  273. package/es/select/demo/multiple.js +5 -5
  274. package/es/select/handle.js +14 -21
  275. package/es/select/index.d.ts +4 -1
  276. package/es/select/index.js +16 -17
  277. package/es/select/option.js +14 -14
  278. package/es/select/overlay.js +17 -18
  279. package/es/select/styles/handle.less +206 -193
  280. package/es/select/styles/index.less +129 -129
  281. package/es/socket/demo/demo.js +10 -10
  282. package/es/socket/demo/index.less +27 -27
  283. package/es/socket/index.js +23 -26
  284. package/es/subjectWrapper/index.js +16 -14
  285. package/es/subjectWrapper/index.less +12 -12
  286. package/es/table/demo/data/color.js +1 -1
  287. package/es/table/demo/index.js +15 -15
  288. package/es/table/demo/index2.js +5 -5
  289. package/es/table/demo/index3.js +8 -8
  290. package/es/table/index.js +11 -38
  291. package/es/table/styles/index.less +5 -5
  292. package/es/targetConditionGroup/components/targetDimension.js +157 -64
  293. package/es/targetConditionGroup/demo/group.js +18 -31
  294. package/es/targetConditionGroup/demo/index.js +5 -5
  295. package/es/targetConditionGroup/demo/styles/index.less +29 -29
  296. package/es/targetConditionGroup/index.d.ts +4 -1
  297. package/es/targetConditionGroup/index.js +41 -39
  298. package/es/targetConditionGroup/styles/index.less +53 -53
  299. package/es/targetConditionGroup/types.d.ts +1 -0
  300. package/es/targetSelector/demo/index.js +5 -5
  301. package/es/targetSelector/editBox.d.ts +1 -0
  302. package/es/targetSelector/editBox.js +13 -8
  303. package/es/targetSelector/index.js +9 -8
  304. package/es/targetSelector/optionIcon.d.ts +4 -1
  305. package/es/targetSelector/optionIcon.js +3 -0
  306. package/es/targetSelector/styles/index.less +142 -110
  307. package/es/userCondition/conditionTypeList.d.ts +4 -1
  308. package/es/userCondition/conditionTypeList.js +13 -12
  309. package/es/userCondition/conditions/business/operatorCondition.js +15 -15
  310. package/es/userCondition/conditions/business/paramsCondition.js +10 -10
  311. package/es/userCondition/conditions/businessCondition.js +15 -15
  312. package/es/userCondition/conditions/cdpCondition.js +36 -33
  313. package/es/userCondition/conditions/cdpCshCondition.js +54 -51
  314. package/es/userCondition/conditions/constants.d.ts +2 -0
  315. package/es/userCondition/conditions/constants.js +2 -0
  316. package/es/userCondition/conditions/dataAttribute.js +22 -18
  317. package/es/userCondition/conditions/eventCondition.js +31 -39
  318. package/es/userCondition/conditions/order/runPeriodCondition.d.ts +4 -1
  319. package/es/userCondition/conditions/order/runPeriodCondition.js +6 -6
  320. package/es/userCondition/conditions/order/runTimesCondition.js +13 -13
  321. package/es/userCondition/conditions/periodCondition.d.ts +4 -1
  322. package/es/userCondition/conditions/periodCondition.js +26 -18
  323. package/es/userCondition/conditions/propCondition.js +23 -23
  324. package/es/userCondition/conditions/runTimesCondition.js +6 -6
  325. package/es/userCondition/conditions/styles/cdpCondition.less +37 -37
  326. package/es/userCondition/conditions/styles/cdpCshCondition.less +47 -47
  327. package/es/userCondition/conditions/styles/eventCondition.less +71 -57
  328. package/es/userCondition/conditions/styles/periodCondition.less +32 -26
  329. package/es/userCondition/conditions/styles/propCondition.less +43 -43
  330. package/es/userCondition/conditions/styles/runTimesCondition.less +19 -19
  331. package/es/userCondition/conditions/styles/tagsCondition.less +20 -20
  332. package/es/userCondition/conditions/styles/textDesc.less +16 -17
  333. package/es/userCondition/conditions/tagsCondition.js +23 -16
  334. package/es/userCondition/conditions/textDesc.js +20 -16
  335. package/es/userCondition/conditions/timeDimension.js +18 -18
  336. package/es/userCondition/demo/business.js +5 -5
  337. package/es/userCondition/demo/index.js +25 -19
  338. package/es/userCondition/demo/mockData.d.ts +20 -94
  339. package/es/userCondition/demo/mockData.js +31 -76
  340. package/es/userCondition/index.d.ts +5 -1
  341. package/es/userCondition/index.js +91 -72
  342. package/es/userCondition/orConditions.js +8 -8
  343. package/es/userCondition/relationLabel.js +2 -2
  344. package/es/userCondition/styles/conditionTypeList.less +32 -30
  345. package/es/userCondition/styles/conditionWrap.less +18 -18
  346. package/es/userCondition/styles/index.less +33 -33
  347. package/es/userCondition/styles/orConditions.less +34 -34
  348. package/es/userCondition/styles/relationLabel.less +19 -19
  349. package/es/userCondition/types.d.ts +5 -2
  350. package/es/userCondition/util.d.ts +4 -0
  351. package/es/userCondition/util.js +10 -8
  352. package/es/userGroup/demo/group.js +13 -13
  353. package/es/userGroup/demo/index.js +8 -15
  354. package/es/userGroup/index.d.ts +4 -1
  355. package/es/userGroup/index.js +71 -24
  356. package/es/userGroup/overlay.js +32 -18
  357. package/es/userGroup/styles/index.less +199 -145
  358. package/es/userGroup/types.d.ts +2 -0
  359. package/es/userGroup/util.d.ts +2 -0
  360. package/es/userGroup/util.js +47 -0
  361. package/es/userGroupHeader/demo/index.js +1 -1
  362. package/es/userGroupHeader/index.d.ts +1 -0
  363. package/es/userGroupHeader/index.js +61 -14
  364. package/es/userGroupHeader/styles/index.less +50 -31
  365. package/es/userTagsSelector/cascaderOverlay.d.ts +4 -1
  366. package/es/userTagsSelector/cascaderOverlay.js +36 -29
  367. package/es/userTagsSelector/components/search/index.less +6 -6
  368. package/es/userTagsSelector/components/tagList/index.d.ts +4 -1
  369. package/es/userTagsSelector/components/tagList/index.js +5 -5
  370. package/es/userTagsSelector/components/tagList/index.less +13 -13
  371. package/es/userTagsSelector/demo/index.js +5 -5
  372. package/es/userTagsSelector/groups/index.d.ts +4 -1
  373. package/es/userTagsSelector/groups/index.js +5 -5
  374. package/es/userTagsSelector/groups/styles/option.less +55 -55
  375. package/es/userTagsSelector/index.d.ts +4 -1
  376. package/es/userTagsSelector/index.js +43 -13
  377. package/es/userTagsSelector/multipleCheckPanel/index.js +5 -5
  378. package/es/userTagsSelector/multipleCheckPanel/styles/option.less +40 -40
  379. package/es/userTagsSelector/styles/cascaderOverlay.less +34 -34
  380. package/es/userTagsSelector/styles/index.less +20 -10
  381. package/es/userTagsSelector/types.d.ts +2 -0
  382. package/es/userTagsSelector/util.d.ts +1 -0
  383. package/es/userTagsSelector/util.js +20 -0
  384. package/es/utils/ajax.js +83 -49
  385. package/es/utils/demo/interruption.js +5 -5
  386. package/es/utils/eventApi.d.ts +14 -0
  387. package/es/utils/eventApi.js +120 -0
  388. package/es/utils/index.d.ts +2 -1
  389. package/es/utils/index.js +2 -1
  390. package/es/utils/type.d.ts +1 -0
  391. package/es/utils/type.js +6 -6
  392. package/es/utils/util.d.ts +1 -0
  393. package/es/utils/util.js +18 -0
  394. package/package.json +2 -2
  395. package/es/assets/colorIcon/iconfont.svg +0 -129
package/es/assets/colorIcon/demo_index.html CHANGED
@@ -1,1454 +1,1985 @@
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=3950596" target="_blank" class="nav-more">查看项目</a>
51
-
52
- </div>
53
- <div class="tab-container">
54
- <div class="content unicode" style="display: block;">
55
- <ul class="icon_lists dib-box">
56
-
57
- <li class="dib">
58
- <span class="icon iconfont">&#xe7a0;</span>
59
- <div class="name">压缩包</div>
60
- <div class="code-name">&amp;#xe7a0;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon iconfont">&#xe63b;</span>
65
- <div class="name">业务场景</div>
66
- <div class="code-name">&amp;#xe63b;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon iconfont">&#xe638;</span>
71
- <div class="name">用户营销</div>
72
- <div class="code-name">&amp;#xe638;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon iconfont">&#xe637;</span>
77
- <div class="name">信用卡分期</div>
78
- <div class="code-name">&amp;#xe637;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon iconfont">&#xe636;</span>
83
- <div class="name">信用卡业务</div>
84
- <div class="code-name">&amp;#xe636;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon iconfont">&#xe634;</span>
89
- <div class="name">智能营销多色</div>
90
- <div class="code-name">&amp;#xe634;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon iconfont">&#xe799;</span>
95
- <div class="name">存款业务分析</div>
96
- <div class="code-name">&amp;#xe799;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon iconfont">&#xe78d;</span>
101
- <div class="name">数据质量</div>
102
- <div class="code-name">&amp;#xe78d;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon iconfont">&#xe78a;</span>
107
- <div class="name">新版logo</div>
108
- <div class="code-name">&amp;#xe78a;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon iconfont">&#xe78b;</span>
113
- <div class="name">新版logo-基础版</div>
114
- <div class="code-name">&amp;#xe78b;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon iconfont">&#xe78c;</span>
119
- <div class="name">新版logo-企业版</div>
120
- <div class="code-name">&amp;#xe78c;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon iconfont">&#xe787;</span>
125
- <div class="name">新版logo-专业版</div>
126
- <div class="code-name">&amp;#xe787;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon iconfont">&#xe788;</span>
131
- <div class="name">新版logo-试用版</div>
132
- <div class="code-name">&amp;#xe788;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon iconfont">&#xe789;</span>
137
- <div class="name">新版logo-已过期</div>
138
- <div class="code-name">&amp;#xe789;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon iconfont">&#xe781;</span>
143
- <div class="name">常用分析场景</div>
144
- <div class="code-name">&amp;#xe781;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon iconfont">&#xe77e;</span>
149
- <div class="name">营销活动</div>
150
- <div class="code-name">&amp;#xe77e;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon iconfont">&#xe77d;</span>
155
- <div class="name">信贷业务</div>
156
- <div class="code-name">&amp;#xe77d;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon iconfont">&#xe6ee;</span>
161
- <div class="name">营销看板</div>
162
- <div class="code-name">&amp;#xe6ee;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon iconfont">&#xe6ef;</span>
167
- <div class="name">营销数据</div>
168
- <div class="code-name">&amp;#xe6ef;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon iconfont">&#xe6f0;</span>
173
- <div class="name">营销中心</div>
174
- <div class="code-name">&amp;#xe6f0;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon iconfont">&#xe6f1;</span>
179
- <div class="name">群组旅程</div>
180
- <div class="code-name">&amp;#xe6f1;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon iconfont">&#xe6f2;</span>
185
- <div class="name">营销素材</div>
186
- <div class="code-name">&amp;#xe6f2;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon iconfont">&#xe6f3;</span>
191
- <div class="name">营销设置</div>
192
- <div class="code-name">&amp;#xe6f3;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon iconfont">&#xe778;</span>
197
- <div class="name">分析工具箱</div>
198
- <div class="code-name">&amp;#xe778;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon iconfont">&#xe777;</span>
203
- <div class="name">产品标签</div>
204
- <div class="code-name">&amp;#xe777;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon iconfont">&#xe770;</span>
209
- <div class="name">用户分群</div>
210
- <div class="code-name">&amp;#xe770;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon iconfont">&#xe771;</span>
215
- <div class="name">营销收据分析</div>
216
- <div class="code-name">&amp;#xe771;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon iconfont">&#xe772;</span>
221
- <div class="name">用户体验监控</div>
222
- <div class="code-name">&amp;#xe772;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon iconfont">&#xe773;</span>
227
- <div class="name">用户标签</div>
228
- <div class="code-name">&amp;#xe773;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon iconfont">&#xe75b;</span>
233
- <div class="name">用户旅程</div>
234
- <div class="code-name">&amp;#xe75b;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon iconfont">&#xe75a;</span>
239
- <div class="name">数据开放</div>
240
- <div class="code-name">&amp;#xe75a;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon iconfont">&#xe759;</span>
245
- <div class="name">菜单-idmapping</div>
246
- <div class="code-name">&amp;#xe759;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon iconfont">&#xe754;</span>
251
- <div class="name">logo-基础版</div>
252
- <div class="code-name">&amp;#xe754;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon iconfont">&#xe755;</span>
257
- <div class="name">logo-企业版</div>
258
- <div class="code-name">&amp;#xe755;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon iconfont">&#xe756;</span>
263
- <div class="name">logo-已过期</div>
264
- <div class="code-name">&amp;#xe756;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon iconfont">&#xe757;</span>
269
- <div class="name">logo-试用版</div>
270
- <div class="code-name">&amp;#xe757;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon iconfont">&#xe758;</span>
275
- <div class="name">logo-专业版</div>
276
- <div class="code-name">&amp;#xe758;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon iconfont">&#xe742;</span>
281
- <div class="name">菜单-广告监测</div>
282
- <div class="code-name">&amp;#xe742;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon iconfont">&#xe743;</span>
287
- <div class="name">菜单-分析方法论</div>
288
- <div class="code-name">&amp;#xe743;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon iconfont">&#xe744;</span>
293
- <div class="name">菜单-数据集</div>
294
- <div class="code-name">&amp;#xe744;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon iconfont">&#xe745;</span>
299
- <div class="name">菜单-数据接入</div>
300
- <div class="code-name">&amp;#xe745;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon iconfont">&#xe746;</span>
305
- <div class="name">菜单-来源管理</div>
306
- <div class="code-name">&amp;#xe746;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon iconfont">&#xe747;</span>
311
- <div class="name">菜单-分析数据看板</div>
312
- <div class="code-name">&amp;#xe747;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon iconfont">&#xe748;</span>
317
- <div class="name">菜单-埋点管理</div>
318
- <div class="code-name">&amp;#xe748;</div>
319
- </li>
320
-
321
- <li class="dib">
322
- <span class="icon iconfont">&#xe749;</span>
323
- <div class="name">菜单-产品迭代</div>
324
- <div class="code-name">&amp;#xe749;</div>
325
- </li>
326
-
327
- <li class="dib">
328
- <span class="icon iconfont">&#xe74a;</span>
329
- <div class="name">菜单-用户增长（2A3R)</div>
330
- <div class="code-name">&amp;#xe74a;</div>
331
- </li>
332
-
333
- <li class="dib">
334
- <span class="icon iconfont">&#xe74b;</span>
335
- <div class="name">菜单-用户</div>
336
- <div class="code-name">&amp;#xe74b;</div>
337
- </li>
338
-
339
- <li class="dib">
340
- <span class="icon iconfont">&#xe74c;</span>
341
- <div class="name">菜单-自定义数据报告</div>
342
- <div class="code-name">&amp;#xe74c;</div>
343
- </li>
344
-
345
- <li class="dib">
346
- <span class="icon iconfont">&#xe74d;</span>
347
- <div class="name">菜单-微信生态运营</div>
348
- <div class="code-name">&amp;#xe74d;</div>
349
- </li>
350
-
351
- <li class="dib">
352
- <span class="icon iconfont">&#xe74e;</span>
353
- <div class="name">菜单-运营概览报表</div>
354
- <div class="code-name">&amp;#xe74e;</div>
355
- </li>
356
-
357
- <li class="dib">
358
- <span class="icon iconfont">&#xe74f;</span>
359
- <div class="name">菜单-CEP</div>
360
- <div class="code-name">&amp;#xe74f;</div>
361
- </li>
362
-
363
- <li class="dib">
364
- <span class="icon iconfont">&#xe750;</span>
365
- <div class="name">菜单-自定义BI报表</div>
366
- <div class="code-name">&amp;#xe750;</div>
367
- </li>
368
-
369
- <li class="dib">
370
- <span class="icon iconfont">&#xe751;</span>
371
- <div class="name">菜单-智能触达</div>
372
- <div class="code-name">&amp;#xe751;</div>
373
- </li>
374
-
375
- <li class="dib">
376
- <span class="icon iconfont">&#xe752;</span>
377
- <div class="name">默认头像</div>
378
- <div class="code-name">&amp;#xe752;</div>
379
- </li>
380
-
381
- <li class="dib">
382
- <span class="icon iconfont">&#xe753;</span>
383
- <div class="name">logo</div>
384
- <div class="code-name">&amp;#xe753;</div>
385
- </li>
386
-
387
- </ul>
388
- <div class="article markdown">
389
- <h2 id="unicode-">Unicode 引用</h2>
390
- <hr>
391
-
392
- <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
393
- <ul>
394
- <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
395
- <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
396
- </ul>
397
- <blockquote>
398
- <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
399
- </blockquote>
400
- <p>Unicode 使用步骤如下：</p>
401
- <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
402
- <pre><code class="language-css"
403
- >@font-face {
404
- font-family: 'iconfont';
405
- src: url('iconfont.woff2?t=1721787187002') format('woff2'),
406
- url('iconfont.woff?t=1721787187002') format('woff'),
407
- url('iconfont.ttf?t=1721787187002') format('truetype'),
408
- url('iconfont.svg?t=1721787187002#iconfont') format('svg');
409
- }
410
- </code></pre>
411
- <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
412
- <pre><code class="language-css"
413
- >.iconfont {
414
- font-family: "iconfont" !important;
415
- font-size: 16px;
416
- font-style: normal;
417
- -webkit-font-smoothing: antialiased;
418
- -moz-osx-font-smoothing: grayscale;
419
- }
420
- </code></pre>
421
- <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
422
- <pre>
423
- <code class="language-html"
424
- >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
425
- </code></pre>
426
- <blockquote>
427
- <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
428
- </blockquote>
429
- </div>
430
- </div>
431
- <div class="content font-class">
432
- <ul class="icon_lists dib-box">
433
-
434
- <li class="dib">
435
- <span class="icon iconfont icon-yasuobao"></span>
436
- <div class="name">
437
- 压缩包
438
- </div>
439
- <div class="code-name">.icon-yasuobao
440
- </div>
441
- </li>
442
-
443
- <li class="dib">
444
- <span class="icon iconfont icon-yewuchangjing"></span>
445
- <div class="name">
446
- 业务场景
447
- </div>
448
- <div class="code-name">.icon-yewuchangjing
449
- </div>
450
- </li>
451
-
452
- <li class="dib">
453
- <span class="icon iconfont icon-yonghuyingxiao"></span>
454
- <div class="name">
455
- 用户营销
456
- </div>
457
- <div class="code-name">.icon-yonghuyingxiao
458
- </div>
459
- </li>
460
-
461
- <li class="dib">
462
- <span class="icon iconfont icon-xinyongkafenqi"></span>
463
- <div class="name">
464
- 信用卡分期
465
- </div>
466
- <div class="code-name">.icon-xinyongkafenqi
467
- </div>
468
- </li>
469
-
470
- <li class="dib">
471
- <span class="icon iconfont icon-xinyongkayewu"></span>
472
- <div class="name">
473
- 信用卡业务
474
- </div>
475
- <div class="code-name">.icon-xinyongkayewu
476
- </div>
477
- </li>
478
-
479
- <li class="dib">
480
- <span class="icon iconfont icon-zhinengyingxiaoduose"></span>
481
- <div class="name">
482
- 智能营销多色
483
- </div>
484
- <div class="code-name">.icon-zhinengyingxiaoduose
485
- </div>
486
- </li>
487
-
488
- <li class="dib">
489
- <span class="icon iconfont icon-cunkuanyewufenxi"></span>
490
- <div class="name">
491
- 存款业务分析
492
- </div>
493
- <div class="code-name">.icon-cunkuanyewufenxi
494
- </div>
495
- </li>
496
-
497
- <li class="dib">
498
- <span class="icon iconfont icon-shujuzhiliang"></span>
499
- <div class="name">
500
- 数据质量
501
- </div>
502
- <div class="code-name">.icon-shujuzhiliang
503
- </div>
504
- </li>
505
-
506
- <li class="dib">
507
- <span class="icon iconfont icon-xinbanlogo"></span>
508
- <div class="name">
509
- 新版logo
510
- </div>
511
- <div class="code-name">.icon-xinbanlogo
512
- </div>
513
- </li>
514
-
515
- <li class="dib">
516
- <span class="icon iconfont icon-xinbanlogo-jichuban"></span>
517
- <div class="name">
518
- 新版logo-基础版
519
- </div>
520
- <div class="code-name">.icon-xinbanlogo-jichuban
521
- </div>
522
- </li>
523
-
524
- <li class="dib">
525
- <span class="icon iconfont icon-xinbanlogo-qiyeban"></span>
526
- <div class="name">
527
- 新版logo-企业版
528
- </div>
529
- <div class="code-name">.icon-xinbanlogo-qiyeban
530
- </div>
531
- </li>
532
-
533
- <li class="dib">
534
- <span class="icon iconfont icon-xinbanlogo-zhuanyeban"></span>
535
- <div class="name">
536
- 新版logo-专业版
537
- </div>
538
- <div class="code-name">.icon-xinbanlogo-zhuanyeban
539
- </div>
540
- </li>
541
-
542
- <li class="dib">
543
- <span class="icon iconfont icon-xinbanlogo-shiyongban"></span>
544
- <div class="name">
545
- 新版logo-试用版
546
- </div>
547
- <div class="code-name">.icon-xinbanlogo-shiyongban
548
- </div>
549
- </li>
550
-
551
- <li class="dib">
552
- <span class="icon iconfont icon-xinbanlogo-yiguoqi"></span>
553
- <div class="name">
554
- 新版logo-已过期
555
- </div>
556
- <div class="code-name">.icon-xinbanlogo-yiguoqi
557
- </div>
558
- </li>
559
-
560
- <li class="dib">
561
- <span class="icon iconfont icon-general"></span>
562
- <div class="name">
563
- 常用分析场景
564
- </div>
565
- <div class="code-name">.icon-general
566
- </div>
567
- </li>
568
-
569
- <li class="dib">
570
- <span class="icon iconfont icon-yingxiaohuodong"></span>
571
- <div class="name">
572
- 营销活动
573
- </div>
574
- <div class="code-name">.icon-yingxiaohuodong
575
- </div>
576
- </li>
577
-
578
- <li class="dib">
579
- <span class="icon iconfont icon-credit"></span>
580
- <div class="name">
581
- 信贷业务
582
- </div>
583
- <div class="code-name">.icon-credit
584
- </div>
585
- </li>
586
-
587
- <li class="dib">
588
- <span class="icon iconfont icon-yingxiaokanban"></span>
589
- <div class="name">
590
- 营销看板
591
- </div>
592
- <div class="code-name">.icon-yingxiaokanban
593
- </div>
594
- </li>
595
-
596
- <li class="dib">
597
- <span class="icon iconfont icon-yingxiaoshuju"></span>
598
- <div class="name">
599
- 营销数据
600
- </div>
601
- <div class="code-name">.icon-yingxiaoshuju
602
- </div>
603
- </li>
604
-
605
- <li class="dib">
606
- <span class="icon iconfont icon-yingxiaozhongxin"></span>
607
- <div class="name">
608
- 营销中心
609
- </div>
610
- <div class="code-name">.icon-yingxiaozhongxin
611
- </div>
612
- </li>
613
-
614
- <li class="dib">
615
- <span class="icon iconfont icon-qunzulvcheng"></span>
616
- <div class="name">
617
- 群组旅程
618
- </div>
619
- <div class="code-name">.icon-qunzulvcheng
620
- </div>
621
- </li>
622
-
623
- <li class="dib">
624
- <span class="icon iconfont icon-yingxiaosucai"></span>
625
- <div class="name">
626
- 营销素材
627
- </div>
628
- <div class="code-name">.icon-yingxiaosucai
629
- </div>
630
- </li>
631
-
632
- <li class="dib">
633
- <span class="icon iconfont icon-yingxiaoshezhi"></span>
634
- <div class="name">
635
- 营销设置
636
- </div>
637
- <div class="code-name">.icon-yingxiaoshezhi
638
- </div>
639
- </li>
640
-
641
- <li class="dib">
642
- <span class="icon iconfont icon-fenxigongjuxiang"></span>
643
- <div class="name">
644
- 分析工具箱
645
- </div>
646
- <div class="code-name">.icon-fenxigongjuxiang
647
- </div>
648
- </li>
649
-
650
- <li class="dib">
651
- <span class="icon iconfont icon-chanpinbiaoqian"></span>
652
- <div class="name">
653
- 产品标签
654
- </div>
655
- <div class="code-name">.icon-chanpinbiaoqian
656
- </div>
657
- </li>
658
-
659
- <li class="dib">
660
- <span class="icon iconfont icon-yonghufenqun"></span>
661
- <div class="name">
662
- 用户分群
663
- </div>
664
- <div class="code-name">.icon-yonghufenqun
665
- </div>
666
- </li>
667
-
668
- <li class="dib">
669
- <span class="icon iconfont icon-yingxiaoshoujufenxi"></span>
670
- <div class="name">
671
- 营销收据分析
672
- </div>
673
- <div class="code-name">.icon-yingxiaoshoujufenxi
674
- </div>
675
- </li>
676
-
677
- <li class="dib">
678
- <span class="icon iconfont icon-yonghutiyanjiankong"></span>
679
- <div class="name">
680
- 用户体验监控
681
- </div>
682
- <div class="code-name">.icon-yonghutiyanjiankong
683
- </div>
684
- </li>
685
-
686
- <li class="dib">
687
- <span class="icon iconfont icon-yonghubiaoqian"></span>
688
- <div class="name">
689
- 用户标签
690
- </div>
691
- <div class="code-name">.icon-yonghubiaoqian
692
- </div>
693
- </li>
694
-
695
- <li class="dib">
696
- <span class="icon iconfont icon-yonghulvcheng"></span>
697
- <div class="name">
698
- 用户旅程
699
- </div>
700
- <div class="code-name">.icon-yonghulvcheng
701
- </div>
702
- </li>
703
-
704
- <li class="dib">
705
- <span class="icon iconfont icon-shujukaifang"></span>
706
- <div class="name">
707
- 数据开放
708
- </div>
709
- <div class="code-name">.icon-shujukaifang
710
- </div>
711
- </li>
712
-
713
- <li class="dib">
714
- <span class="icon iconfont icon-caidan-idmapping"></span>
715
- <div class="name">
716
- 菜单-idmapping
717
- </div>
718
- <div class="code-name">.icon-caidan-idmapping
719
- </div>
720
- </li>
721
-
722
- <li class="dib">
723
- <span class="icon iconfont icon-logo-jichuban"></span>
724
- <div class="name">
725
- logo-基础版
726
- </div>
727
- <div class="code-name">.icon-logo-jichuban
728
- </div>
729
- </li>
730
-
731
- <li class="dib">
732
- <span class="icon iconfont icon-logo-qiyeban"></span>
733
- <div class="name">
734
- logo-企业版
735
- </div>
736
- <div class="code-name">.icon-logo-qiyeban
737
- </div>
738
- </li>
739
-
740
- <li class="dib">
741
- <span class="icon iconfont icon-logo-yiguoqi"></span>
742
- <div class="name">
743
- logo-已过期
744
- </div>
745
- <div class="code-name">.icon-logo-yiguoqi
746
- </div>
747
- </li>
748
-
749
- <li class="dib">
750
- <span class="icon iconfont icon-logo-shiyongban"></span>
751
- <div class="name">
752
- logo-试用版
753
- </div>
754
- <div class="code-name">.icon-logo-shiyongban
755
- </div>
756
- </li>
757
-
758
- <li class="dib">
759
- <span class="icon iconfont icon-logo-zhuanyeban"></span>
760
- <div class="name">
761
- logo-专业版
762
- </div>
763
- <div class="code-name">.icon-logo-zhuanyeban
764
- </div>
765
- </li>
766
-
767
- <li class="dib">
768
- <span class="icon iconfont icon-caidan-guanggaojiance"></span>
769
- <div class="name">
770
- 菜单-广告监测
771
- </div>
772
- <div class="code-name">.icon-caidan-guanggaojiance
773
- </div>
774
- </li>
775
-
776
- <li class="dib">
777
- <span class="icon iconfont icon-caidan-fenxifangfalun"></span>
778
- <div class="name">
779
- 菜单-分析方法论
780
- </div>
781
- <div class="code-name">.icon-caidan-fenxifangfalun
782
- </div>
783
- </li>
784
-
785
- <li class="dib">
786
- <span class="icon iconfont icon-caidan-shujuji"></span>
787
- <div class="name">
788
- 菜单-数据集
789
- </div>
790
- <div class="code-name">.icon-caidan-shujuji
791
- </div>
792
- </li>
793
-
794
- <li class="dib">
795
- <span class="icon iconfont icon-caidan-shujujieru"></span>
796
- <div class="name">
797
- 菜单-数据接入
798
- </div>
799
- <div class="code-name">.icon-caidan-shujujieru
800
- </div>
801
- </li>
802
-
803
- <li class="dib">
804
- <span class="icon iconfont icon-caidan-laiyuanguanli"></span>
805
- <div class="name">
806
- 菜单-来源管理
807
- </div>
808
- <div class="code-name">.icon-caidan-laiyuanguanli
809
- </div>
810
- </li>
811
-
812
- <li class="dib">
813
- <span class="icon iconfont icon-caidan-fenxishujukanban"></span>
814
- <div class="name">
815
- 菜单-分析数据看板
816
- </div>
817
- <div class="code-name">.icon-caidan-fenxishujukanban
818
- </div>
819
- </li>
820
-
821
- <li class="dib">
822
- <span class="icon iconfont icon-caidan-maidianguanli"></span>
823
- <div class="name">
824
- 菜单-埋点管理
825
- </div>
826
- <div class="code-name">.icon-caidan-maidianguanli
827
- </div>
828
- </li>
829
-
830
- <li class="dib">
831
- <span class="icon iconfont icon-caidan-chanpindiedai"></span>
832
- <div class="name">
833
- 菜单-产品迭代
834
- </div>
835
- <div class="code-name">.icon-caidan-chanpindiedai
836
- </div>
837
- </li>
838
-
839
- <li class="dib">
840
- <span class="icon iconfont icon-a-caidan-yonghuzengchang2A3R"></span>
841
- <div class="name">
842
- 菜单-用户增长（2A3R)
843
- </div>
844
- <div class="code-name">.icon-a-caidan-yonghuzengchang2A3R
845
- </div>
846
- </li>
847
-
848
- <li class="dib">
849
- <span class="icon iconfont icon-caidan-yonghu"></span>
850
- <div class="name">
851
- 菜单-用户
852
- </div>
853
- <div class="code-name">.icon-caidan-yonghu
854
- </div>
855
- </li>
856
-
857
- <li class="dib">
858
- <span class="icon iconfont icon-caidan-zidingyishujubaogao"></span>
859
- <div class="name">
860
- 菜单-自定义数据报告
861
- </div>
862
- <div class="code-name">.icon-caidan-zidingyishujubaogao
863
- </div>
864
- </li>
865
-
866
- <li class="dib">
867
- <span class="icon iconfont icon-caidan-weixinshengtaiyunying"></span>
868
- <div class="name">
869
- 菜单-微信生态运营
870
- </div>
871
- <div class="code-name">.icon-caidan-weixinshengtaiyunying
872
- </div>
873
- </li>
874
-
875
- <li class="dib">
876
- <span class="icon iconfont icon-caidan-yunyinggailanbaobiao"></span>
877
- <div class="name">
878
- 菜单-运营概览报表
879
- </div>
880
- <div class="code-name">.icon-caidan-yunyinggailanbaobiao
881
- </div>
882
- </li>
883
-
884
- <li class="dib">
885
- <span class="icon iconfont icon-caidan-CEP"></span>
886
- <div class="name">
887
- 菜单-CEP
888
- </div>
889
- <div class="code-name">.icon-caidan-CEP
890
- </div>
891
- </li>
892
-
893
- <li class="dib">
894
- <span class="icon iconfont icon-caidan-zidingyiBIbaobiao"></span>
895
- <div class="name">
896
- 菜单-自定义BI报表
897
- </div>
898
- <div class="code-name">.icon-caidan-zidingyiBIbaobiao
899
- </div>
900
- </li>
901
-
902
- <li class="dib">
903
- <span class="icon iconfont icon-caidan-zhinengchuda"></span>
904
- <div class="name">
905
- 菜单-智能触达
906
- </div>
907
- <div class="code-name">.icon-caidan-zhinengchuda
908
- </div>
909
- </li>
910
-
911
- <li class="dib">
912
- <span class="icon iconfont icon-morentouxiang"></span>
913
- <div class="name">
914
- 默认头像
915
- </div>
916
- <div class="code-name">.icon-morentouxiang
917
- </div>
918
- </li>
919
-
920
- <li class="dib">
921
- <span class="icon iconfont icon-logo"></span>
922
- <div class="name">
923
- logo
924
- </div>
925
- <div class="code-name">.icon-logo
926
- </div>
927
- </li>
928
-
929
- </ul>
930
- <div class="article markdown">
931
- <h2 id="font-class-">font-class 引用</h2>
932
- <hr>
933
-
934
- <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
935
- <p>与 Unicode 使用方式相比，具有如下特点：</p>
936
- <ul>
937
- <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
938
- <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
939
- </ul>
940
- <p>使用步骤如下：</p>
941
- <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
942
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
943
- </code></pre>
944
- <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
945
- <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
946
- </code></pre>
947
- <blockquote>
948
- <p>"
949
- iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
950
- </blockquote>
951
- </div>
952
- </div>
953
- <div class="content symbol">
954
- <ul class="icon_lists dib-box">
955
-
956
- <li class="dib">
957
- <svg class="icon svg-icon" aria-hidden="true">
958
- <use xlink:href="#icon-yasuobao"></use>
959
- </svg>
960
- <div class="name">压缩包</div>
961
- <div class="code-name">#icon-yasuobao</div>
962
- </li>
963
-
964
- <li class="dib">
965
- <svg class="icon svg-icon" aria-hidden="true">
966
- <use xlink:href="#icon-yewuchangjing"></use>
967
- </svg>
968
- <div class="name">业务场景</div>
969
- <div class="code-name">#icon-yewuchangjing</div>
970
- </li>
971
-
972
- <li class="dib">
973
- <svg class="icon svg-icon" aria-hidden="true">
974
- <use xlink:href="#icon-yonghuyingxiao"></use>
975
- </svg>
976
- <div class="name">用户营销</div>
977
- <div class="code-name">#icon-yonghuyingxiao</div>
978
- </li>
979
-
980
- <li class="dib">
981
- <svg class="icon svg-icon" aria-hidden="true">
982
- <use xlink:href="#icon-xinyongkafenqi"></use>
983
- </svg>
984
- <div class="name">信用卡分期</div>
985
- <div class="code-name">#icon-xinyongkafenqi</div>
986
- </li>
987
-
988
- <li class="dib">
989
- <svg class="icon svg-icon" aria-hidden="true">
990
- <use xlink:href="#icon-xinyongkayewu"></use>
991
- </svg>
992
- <div class="name">信用卡业务</div>
993
- <div class="code-name">#icon-xinyongkayewu</div>
994
- </li>
995
-
996
- <li class="dib">
997
- <svg class="icon svg-icon" aria-hidden="true">
998
- <use xlink:href="#icon-zhinengyingxiaoduose"></use>
999
- </svg>
1000
- <div class="name">智能营销多色</div>
1001
- <div class="code-name">#icon-zhinengyingxiaoduose</div>
1002
- </li>
1003
-
1004
- <li class="dib">
1005
- <svg class="icon svg-icon" aria-hidden="true">
1006
- <use xlink:href="#icon-cunkuanyewufenxi"></use>
1007
- </svg>
1008
- <div class="name">存款业务分析</div>
1009
- <div class="code-name">#icon-cunkuanyewufenxi</div>
1010
- </li>
1011
-
1012
- <li class="dib">
1013
- <svg class="icon svg-icon" aria-hidden="true">
1014
- <use xlink:href="#icon-shujuzhiliang"></use>
1015
- </svg>
1016
- <div class="name">数据质量</div>
1017
- <div class="code-name">#icon-shujuzhiliang</div>
1018
- </li>
1019
-
1020
- <li class="dib">
1021
- <svg class="icon svg-icon" aria-hidden="true">
1022
- <use xlink:href="#icon-xinbanlogo"></use>
1023
- </svg>
1024
- <div class="name">新版logo</div>
1025
- <div class="code-name">#icon-xinbanlogo</div>
1026
- </li>
1027
-
1028
- <li class="dib">
1029
- <svg class="icon svg-icon" aria-hidden="true">
1030
- <use xlink:href="#icon-xinbanlogo-jichuban"></use>
1031
- </svg>
1032
- <div class="name">新版logo-基础版</div>
1033
- <div class="code-name">#icon-xinbanlogo-jichuban</div>
1034
- </li>
1035
-
1036
- <li class="dib">
1037
- <svg class="icon svg-icon" aria-hidden="true">
1038
- <use xlink:href="#icon-xinbanlogo-qiyeban"></use>
1039
- </svg>
1040
- <div class="name">新版logo-企业版</div>
1041
- <div class="code-name">#icon-xinbanlogo-qiyeban</div>
1042
- </li>
1043
-
1044
- <li class="dib">
1045
- <svg class="icon svg-icon" aria-hidden="true">
1046
- <use xlink:href="#icon-xinbanlogo-zhuanyeban"></use>
1047
- </svg>
1048
- <div class="name">新版logo-专业版</div>
1049
- <div class="code-name">#icon-xinbanlogo-zhuanyeban</div>
1050
- </li>
1051
-
1052
- <li class="dib">
1053
- <svg class="icon svg-icon" aria-hidden="true">
1054
- <use xlink:href="#icon-xinbanlogo-shiyongban"></use>
1055
- </svg>
1056
- <div class="name">新版logo-试用版</div>
1057
- <div class="code-name">#icon-xinbanlogo-shiyongban</div>
1058
- </li>
1059
-
1060
- <li class="dib">
1061
- <svg class="icon svg-icon" aria-hidden="true">
1062
- <use xlink:href="#icon-xinbanlogo-yiguoqi"></use>
1063
- </svg>
1064
- <div class="name">新版logo-已过期</div>
1065
- <div class="code-name">#icon-xinbanlogo-yiguoqi</div>
1066
- </li>
1067
-
1068
- <li class="dib">
1069
- <svg class="icon svg-icon" aria-hidden="true">
1070
- <use xlink:href="#icon-general"></use>
1071
- </svg>
1072
- <div class="name">常用分析场景</div>
1073
- <div class="code-name">#icon-general</div>
1074
- </li>
1075
-
1076
- <li class="dib">
1077
- <svg class="icon svg-icon" aria-hidden="true">
1078
- <use xlink:href="#icon-yingxiaohuodong"></use>
1079
- </svg>
1080
- <div class="name">营销活动</div>
1081
- <div class="code-name">#icon-yingxiaohuodong</div>
1082
- </li>
1083
-
1084
- <li class="dib">
1085
- <svg class="icon svg-icon" aria-hidden="true">
1086
- <use xlink:href="#icon-credit"></use>
1087
- </svg>
1088
- <div class="name">信贷业务</div>
1089
- <div class="code-name">#icon-credit</div>
1090
- </li>
1091
-
1092
- <li class="dib">
1093
- <svg class="icon svg-icon" aria-hidden="true">
1094
- <use xlink:href="#icon-yingxiaokanban"></use>
1095
- </svg>
1096
- <div class="name">营销看板</div>
1097
- <div class="code-name">#icon-yingxiaokanban</div>
1098
- </li>
1099
-
1100
- <li class="dib">
1101
- <svg class="icon svg-icon" aria-hidden="true">
1102
- <use xlink:href="#icon-yingxiaoshuju"></use>
1103
- </svg>
1104
- <div class="name">营销数据</div>
1105
- <div class="code-name">#icon-yingxiaoshuju</div>
1106
- </li>
1107
-
1108
- <li class="dib">
1109
- <svg class="icon svg-icon" aria-hidden="true">
1110
- <use xlink:href="#icon-yingxiaozhongxin"></use>
1111
- </svg>
1112
- <div class="name">营销中心</div>
1113
- <div class="code-name">#icon-yingxiaozhongxin</div>
1114
- </li>
1115
-
1116
- <li class="dib">
1117
- <svg class="icon svg-icon" aria-hidden="true">
1118
- <use xlink:href="#icon-qunzulvcheng"></use>
1119
- </svg>
1120
- <div class="name">群组旅程</div>
1121
- <div class="code-name">#icon-qunzulvcheng</div>
1122
- </li>
1123
-
1124
- <li class="dib">
1125
- <svg class="icon svg-icon" aria-hidden="true">
1126
- <use xlink:href="#icon-yingxiaosucai"></use>
1127
- </svg>
1128
- <div class="name">营销素材</div>
1129
- <div class="code-name">#icon-yingxiaosucai</div>
1130
- </li>
1131
-
1132
- <li class="dib">
1133
- <svg class="icon svg-icon" aria-hidden="true">
1134
- <use xlink:href="#icon-yingxiaoshezhi"></use>
1135
- </svg>
1136
- <div class="name">营销设置</div>
1137
- <div class="code-name">#icon-yingxiaoshezhi</div>
1138
- </li>
1139
-
1140
- <li class="dib">
1141
- <svg class="icon svg-icon" aria-hidden="true">
1142
- <use xlink:href="#icon-fenxigongjuxiang"></use>
1143
- </svg>
1144
- <div class="name">分析工具箱</div>
1145
- <div class="code-name">#icon-fenxigongjuxiang</div>
1146
- </li>
1147
-
1148
- <li class="dib">
1149
- <svg class="icon svg-icon" aria-hidden="true">
1150
- <use xlink:href="#icon-chanpinbiaoqian"></use>
1151
- </svg>
1152
- <div class="name">产品标签</div>
1153
- <div class="code-name">#icon-chanpinbiaoqian</div>
1154
- </li>
1155
-
1156
- <li class="dib">
1157
- <svg class="icon svg-icon" aria-hidden="true">
1158
- <use xlink:href="#icon-yonghufenqun"></use>
1159
- </svg>
1160
- <div class="name">用户分群</div>
1161
- <div class="code-name">#icon-yonghufenqun</div>
1162
- </li>
1163
-
1164
- <li class="dib">
1165
- <svg class="icon svg-icon" aria-hidden="true">
1166
- <use xlink:href="#icon-yingxiaoshoujufenxi"></use>
1167
- </svg>
1168
- <div class="name">营销收据分析</div>
1169
- <div class="code-name">#icon-yingxiaoshoujufenxi</div>
1170
- </li>
1171
-
1172
- <li class="dib">
1173
- <svg class="icon svg-icon" aria-hidden="true">
1174
- <use xlink:href="#icon-yonghutiyanjiankong"></use>
1175
- </svg>
1176
- <div class="name">用户体验监控</div>
1177
- <div class="code-name">#icon-yonghutiyanjiankong</div>
1178
- </li>
1179
-
1180
- <li class="dib">
1181
- <svg class="icon svg-icon" aria-hidden="true">
1182
- <use xlink:href="#icon-yonghubiaoqian"></use>
1183
- </svg>
1184
- <div class="name">用户标签</div>
1185
- <div class="code-name">#icon-yonghubiaoqian</div>
1186
- </li>
1187
-
1188
- <li class="dib">
1189
- <svg class="icon svg-icon" aria-hidden="true">
1190
- <use xlink:href="#icon-yonghulvcheng"></use>
1191
- </svg>
1192
- <div class="name">用户旅程</div>
1193
- <div class="code-name">#icon-yonghulvcheng</div>
1194
- </li>
1195
-
1196
- <li class="dib">
1197
- <svg class="icon svg-icon" aria-hidden="true">
1198
- <use xlink:href="#icon-shujukaifang"></use>
1199
- </svg>
1200
- <div class="name">数据开放</div>
1201
- <div class="code-name">#icon-shujukaifang</div>
1202
- </li>
1203
-
1204
- <li class="dib">
1205
- <svg class="icon svg-icon" aria-hidden="true">
1206
- <use xlink:href="#icon-caidan-idmapping"></use>
1207
- </svg>
1208
- <div class="name">菜单-idmapping</div>
1209
- <div class="code-name">#icon-caidan-idmapping</div>
1210
- </li>
1211
-
1212
- <li class="dib">
1213
- <svg class="icon svg-icon" aria-hidden="true">
1214
- <use xlink:href="#icon-logo-jichuban"></use>
1215
- </svg>
1216
- <div class="name">logo-基础版</div>
1217
- <div class="code-name">#icon-logo-jichuban</div>
1218
- </li>
1219
-
1220
- <li class="dib">
1221
- <svg class="icon svg-icon" aria-hidden="true">
1222
- <use xlink:href="#icon-logo-qiyeban"></use>
1223
- </svg>
1224
- <div class="name">logo-企业版</div>
1225
- <div class="code-name">#icon-logo-qiyeban</div>
1226
- </li>
1227
-
1228
- <li class="dib">
1229
- <svg class="icon svg-icon" aria-hidden="true">
1230
- <use xlink:href="#icon-logo-yiguoqi"></use>
1231
- </svg>
1232
- <div class="name">logo-已过期</div>
1233
- <div class="code-name">#icon-logo-yiguoqi</div>
1234
- </li>
1235
-
1236
- <li class="dib">
1237
- <svg class="icon svg-icon" aria-hidden="true">
1238
- <use xlink:href="#icon-logo-shiyongban"></use>
1239
- </svg>
1240
- <div class="name">logo-试用版</div>
1241
- <div class="code-name">#icon-logo-shiyongban</div>
1242
- </li>
1243
-
1244
- <li class="dib">
1245
- <svg class="icon svg-icon" aria-hidden="true">
1246
- <use xlink:href="#icon-logo-zhuanyeban"></use>
1247
- </svg>
1248
- <div class="name">logo-专业版</div>
1249
- <div class="code-name">#icon-logo-zhuanyeban</div>
1250
- </li>
1251
-
1252
- <li class="dib">
1253
- <svg class="icon svg-icon" aria-hidden="true">
1254
- <use xlink:href="#icon-caidan-guanggaojiance"></use>
1255
- </svg>
1256
- <div class="name">菜单-广告监测</div>
1257
- <div class="code-name">#icon-caidan-guanggaojiance</div>
1258
- </li>
1259
-
1260
- <li class="dib">
1261
- <svg class="icon svg-icon" aria-hidden="true">
1262
- <use xlink:href="#icon-caidan-fenxifangfalun"></use>
1263
- </svg>
1264
- <div class="name">菜单-分析方法论</div>
1265
- <div class="code-name">#icon-caidan-fenxifangfalun</div>
1266
- </li>
1267
-
1268
- <li class="dib">
1269
- <svg class="icon svg-icon" aria-hidden="true">
1270
- <use xlink:href="#icon-caidan-shujuji"></use>
1271
- </svg>
1272
- <div class="name">菜单-数据集</div>
1273
- <div class="code-name">#icon-caidan-shujuji</div>
1274
- </li>
1275
-
1276
- <li class="dib">
1277
- <svg class="icon svg-icon" aria-hidden="true">
1278
- <use xlink:href="#icon-caidan-shujujieru"></use>
1279
- </svg>
1280
- <div class="name">菜单-数据接入</div>
1281
- <div class="code-name">#icon-caidan-shujujieru</div>
1282
- </li>
1283
-
1284
- <li class="dib">
1285
- <svg class="icon svg-icon" aria-hidden="true">
1286
- <use xlink:href="#icon-caidan-laiyuanguanli"></use>
1287
- </svg>
1288
- <div class="name">菜单-来源管理</div>
1289
- <div class="code-name">#icon-caidan-laiyuanguanli</div>
1290
- </li>
1291
-
1292
- <li class="dib">
1293
- <svg class="icon svg-icon" aria-hidden="true">
1294
- <use xlink:href="#icon-caidan-fenxishujukanban"></use>
1295
- </svg>
1296
- <div class="name">菜单-分析数据看板</div>
1297
- <div class="code-name">#icon-caidan-fenxishujukanban</div>
1298
- </li>
1299
-
1300
- <li class="dib">
1301
- <svg class="icon svg-icon" aria-hidden="true">
1302
- <use xlink:href="#icon-caidan-maidianguanli"></use>
1303
- </svg>
1304
- <div class="name">菜单-埋点管理</div>
1305
- <div class="code-name">#icon-caidan-maidianguanli</div>
1306
- </li>
1307
-
1308
- <li class="dib">
1309
- <svg class="icon svg-icon" aria-hidden="true">
1310
- <use xlink:href="#icon-caidan-chanpindiedai"></use>
1311
- </svg>
1312
- <div class="name">菜单-产品迭代</div>
1313
- <div class="code-name">#icon-caidan-chanpindiedai</div>
1314
- </li>
1315
-
1316
- <li class="dib">
1317
- <svg class="icon svg-icon" aria-hidden="true">
1318
- <use xlink:href="#icon-a-caidan-yonghuzengchang2A3R"></use>
1319
- </svg>
1320
- <div class="name">菜单-用户增长（2A3R)</div>
1321
- <div class="code-name">#icon-a-caidan-yonghuzengchang2A3R</div>
1322
- </li>
1323
-
1324
- <li class="dib">
1325
- <svg class="icon svg-icon" aria-hidden="true">
1326
- <use xlink:href="#icon-caidan-yonghu"></use>
1327
- </svg>
1328
- <div class="name">菜单-用户</div>
1329
- <div class="code-name">#icon-caidan-yonghu</div>
1330
- </li>
1331
-
1332
- <li class="dib">
1333
- <svg class="icon svg-icon" aria-hidden="true">
1334
- <use xlink:href="#icon-caidan-zidingyishujubaogao"></use>
1335
- </svg>
1336
- <div class="name">菜单-自定义数据报告</div>
1337
- <div class="code-name">#icon-caidan-zidingyishujubaogao</div>
1338
- </li>
1339
-
1340
- <li class="dib">
1341
- <svg class="icon svg-icon" aria-hidden="true">
1342
- <use xlink:href="#icon-caidan-weixinshengtaiyunying"></use>
1343
- </svg>
1344
- <div class="name">菜单-微信生态运营</div>
1345
- <div class="code-name">#icon-caidan-weixinshengtaiyunying</div>
1346
- </li>
1347
-
1348
- <li class="dib">
1349
- <svg class="icon svg-icon" aria-hidden="true">
1350
- <use xlink:href="#icon-caidan-yunyinggailanbaobiao"></use>
1351
- </svg>
1352
- <div class="name">菜单-运营概览报表</div>
1353
- <div class="code-name">#icon-caidan-yunyinggailanbaobiao</div>
1354
- </li>
1355
-
1356
- <li class="dib">
1357
- <svg class="icon svg-icon" aria-hidden="true">
1358
- <use xlink:href="#icon-caidan-CEP"></use>
1359
- </svg>
1360
- <div class="name">菜单-CEP</div>
1361
- <div class="code-name">#icon-caidan-CEP</div>
1362
- </li>
1363
-
1364
- <li class="dib">
1365
- <svg class="icon svg-icon" aria-hidden="true">
1366
- <use xlink:href="#icon-caidan-zidingyiBIbaobiao"></use>
1367
- </svg>
1368
- <div class="name">菜单-自定义BI报表</div>
1369
- <div class="code-name">#icon-caidan-zidingyiBIbaobiao</div>
1370
- </li>
1371
-
1372
- <li class="dib">
1373
- <svg class="icon svg-icon" aria-hidden="true">
1374
- <use xlink:href="#icon-caidan-zhinengchuda"></use>
1375
- </svg>
1376
- <div class="name">菜单-智能触达</div>
1377
- <div class="code-name">#icon-caidan-zhinengchuda</div>
1378
- </li>
1379
-
1380
- <li class="dib">
1381
- <svg class="icon svg-icon" aria-hidden="true">
1382
- <use xlink:href="#icon-morentouxiang"></use>
1383
- </svg>
1384
- <div class="name">默认头像</div>
1385
- <div class="code-name">#icon-morentouxiang</div>
1386
- </li>
1387
-
1388
- <li class="dib">
1389
- <svg class="icon svg-icon" aria-hidden="true">
1390
- <use xlink:href="#icon-logo"></use>
1391
- </svg>
1392
- <div class="name">logo</div>
1393
- <div class="code-name">#icon-logo</div>
1394
- </li>
1395
-
1396
- </ul>
1397
- <div class="article markdown">
1398
- <h2 id="symbol-">Symbol 引用</h2>
1399
- <hr>
1400
-
1401
- <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1402
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1403
- <ul>
1404
- <li>支持多色图标了，不再受单色限制。</li>
1405
- <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1406
- <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1407
- <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1408
- </ul>
1409
- <p>使用步骤如下：</p>
1410
- <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1411
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1412
- </code></pre>
1413
- <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1414
- <pre><code class="language-html">&lt;style&gt;
1415
- .icon {
1416
- width: 1em;
1417
- height: 1em;
1418
- vertical-align: -0.15em;
1419
- fill: currentColor;
1420
- overflow: hidden;
1421
- }
1422
- &lt;/style&gt;
1423
- </code></pre>
1424
- <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1425
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1426
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1427
- &lt;/svg&gt;
1428
- </code></pre>
1429
- </div>
1430
- </div>
1431
-
1432
- </div>
1433
- </div>
1434
- <script>
1435
- $(document).ready(function () {
1436
- $('.tab-container .content:first').show()
1437
-
1438
- $('#tabs li').click(function (e) {
1439
- var tabContent = $('.tab-container .content')
1440
- var index = $(this).index()
1441
-
1442
- if ($(this).hasClass('active')) {
1443
- return
1444
- } else {
1445
- $('#tabs li').removeClass('active')
1446
- $(this).addClass('active')
1447
-
1448
- tabContent.hide().eq(index).fadeIn()
1449
- }
1450
- })
1451
- })
1452
- </script>
1453
- </body>
1454
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>iconfont Demo</title>
6
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
+ <link rel="stylesheet" href="demo.css">
10
+ <link rel="stylesheet" href="iconfont.css">
11
+ <script src="iconfont.js"></script>
12
+ <!-- jQuery -->
13
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
+ <!-- 代码高亮 -->
15
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
+ <style>
17
+ .main .logo {
18
+ margin-top: 0;
19
+ height: auto;
20
+ }
21
+
22
+ .main .logo a {
23
+ display: flex;
24
+ align-items: center;
25
+ }
26
+
27
+ .main .logo .sub-title {
28
+ margin-left: 0.5em;
29
+ font-size: 22px;
30
+ color: #fff;
31
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="main">
39
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
+ <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
+
42
+ <span class="sub-title">彩色字体</span>
43
+
44
+ </a></h1>
45
+ <div class="nav-tabs">
46
+ <ul id="tabs" class="dib-box">
47
+ <li class="dib active"><span>Unicode</span></li>
48
+ <li class="dib"><span>Font class</span></li>
49
+ <li class="dib"><span>Symbol</span></li>
50
+ </ul>
51
+
52
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4877165" target="_blank" class="nav-more">查看项目</a>
53
+
54
+ </div>
55
+ <div class="tab-container">
56
+ <div class="content unicode" style="display: block;">
57
+ <ul class="icon_lists dib-box">
58
+
59
+ <li class="dib">
60
+ <span class="icon iconfont">&#xe7ff;</span>
61
+ <div class="name">strategy-on</div>
62
+ <div class="code-name">&amp;#xe7ff;</div>
63
+ </li>
64
+
65
+ <li class="dib">
66
+ <span class="icon iconfont">&#xe800;</span>
67
+ <div class="name">yonghubiaoqian-off</div>
68
+ <div class="code-name">&amp;#xe800;</div>
69
+ </li>
70
+
71
+ <li class="dib">
72
+ <span class="icon iconfont">&#xe801;</span>
73
+ <div class="name">xinyongkafenqi-on</div>
74
+ <div class="code-name">&amp;#xe801;</div>
75
+ </li>
76
+
77
+ <li class="dib">
78
+ <span class="icon iconfont">&#xe802;</span>
79
+ <div class="name">xinyongdaikuanfenxi-off</div>
80
+ <div class="code-name">&amp;#xe802;</div>
81
+ </li>
82
+
83
+ <li class="dib">
84
+ <span class="icon iconfont">&#xe803;</span>
85
+ <div class="name">xinyongdaikuanfenxi-on</div>
86
+ <div class="code-name">&amp;#xe803;</div>
87
+ </li>
88
+
89
+ <li class="dib">
90
+ <span class="icon iconfont">&#xe804;</span>
91
+ <div class="name">a-caidan-shujukanbanBI-off</div>
92
+ <div class="code-name">&amp;#xe804;</div>
93
+ </li>
94
+
95
+ <li class="dib">
96
+ <span class="icon iconfont">&#xe805;</span>
97
+ <div class="name">strategy-off</div>
98
+ <div class="code-name">&amp;#xe805;</div>
99
+ </li>
100
+
101
+ <li class="dib">
102
+ <span class="icon iconfont">&#xe806;</span>
103
+ <div class="name">licaiyewufenxi-on</div>
104
+ <div class="code-name">&amp;#xe806;</div>
105
+ </li>
106
+
107
+ <li class="dib">
108
+ <span class="icon iconfont">&#xe807;</span>
109
+ <div class="name">chanpinbiaoqian-on</div>
110
+ <div class="code-name">&amp;#xe807;</div>
111
+ </li>
112
+
113
+ <li class="dib">
114
+ <span class="icon iconfont">&#xe808;</span>
115
+ <div class="name">chanpinbiaoqian-off</div>
116
+ <div class="code-name">&amp;#xe808;</div>
117
+ </li>
118
+
119
+ <li class="dib">
120
+ <span class="icon iconfont">&#xe809;</span>
121
+ <div class="name">cunkuanyewu-on</div>
122
+ <div class="code-name">&amp;#xe809;</div>
123
+ </li>
124
+
125
+ <li class="dib">
126
+ <span class="icon iconfont">&#xe80a;</span>
127
+ <div class="name">licaiyewufenxi-off</div>
128
+ <div class="code-name">&amp;#xe80a;</div>
129
+ </li>
130
+
131
+ <li class="dib">
132
+ <span class="icon iconfont">&#xe80b;</span>
133
+ <div class="name">cunkuanyewu-off</div>
134
+ <div class="code-name">&amp;#xe80b;</div>
135
+ </li>
136
+
137
+ <li class="dib">
138
+ <span class="icon iconfont">&#xe7f6;</span>
139
+ <div class="name">a-caidan-shujukanbanBI-on</div>
140
+ <div class="code-name">&amp;#xe7f6;</div>
141
+ </li>
142
+
143
+ <li class="dib">
144
+ <span class="icon iconfont">&#xe7f7;</span>
145
+ <div class="name">yonghubiaoqian-on</div>
146
+ <div class="code-name">&amp;#xe7f7;</div>
147
+ </li>
148
+
149
+ <li class="dib">
150
+ <span class="icon iconfont">&#xe7f8;</span>
151
+ <div class="name">xinyongkayewu-off</div>
152
+ <div class="code-name">&amp;#xe7f8;</div>
153
+ </li>
154
+
155
+ <li class="dib">
156
+ <span class="icon iconfont">&#xe7f9;</span>
157
+ <div class="name">yingxiaoshujufenxi-on</div>
158
+ <div class="code-name">&amp;#xe7f9;</div>
159
+ </li>
160
+
161
+ <li class="dib">
162
+ <span class="icon iconfont">&#xe7fa;</span>
163
+ <div class="name">yingxiaoshujufenxi-off</div>
164
+ <div class="code-name">&amp;#xe7fa;</div>
165
+ </li>
166
+
167
+ <li class="dib">
168
+ <span class="icon iconfont">&#xe7fb;</span>
169
+ <div class="name">xinyongkafenqi-off</div>
170
+ <div class="code-name">&amp;#xe7fb;</div>
171
+ </li>
172
+
173
+ <li class="dib">
174
+ <span class="icon iconfont">&#xe7fc;</span>
175
+ <div class="name">yonghutiyanjiankong-on</div>
176
+ <div class="code-name">&amp;#xe7fc;</div>
177
+ </li>
178
+
179
+ <li class="dib">
180
+ <span class="icon iconfont">&#xe7fd;</span>
181
+ <div class="name">xinyongkayewu-on</div>
182
+ <div class="code-name">&amp;#xe7fd;</div>
183
+ </li>
184
+
185
+ <li class="dib">
186
+ <span class="icon iconfont">&#xe7fe;</span>
187
+ <div class="name">yonghutiyanjiankong-off</div>
188
+ <div class="code-name">&amp;#xe7fe;</div>
189
+ </li>
190
+
191
+ <li class="dib">
192
+ <span class="icon iconfont">&#xe7ef;</span>
193
+ <div class="name">caidan-zidingyiBIbaobiao</div>
194
+ <div class="code-name">&amp;#xe7ef;</div>
195
+ </li>
196
+
197
+ <li class="dib">
198
+ <span class="icon iconfont">&#xe7f0;</span>
199
+ <div class="name">caidan-guanggaojiance</div>
200
+ <div class="code-name">&amp;#xe7f0;</div>
201
+ </li>
202
+
203
+ <li class="dib">
204
+ <span class="icon iconfont">&#xe7f1;</span>
205
+ <div class="name">caidan-CEP</div>
206
+ <div class="code-name">&amp;#xe7f1;</div>
207
+ </li>
208
+
209
+ <li class="dib">
210
+ <span class="icon iconfont">&#xe7f2;</span>
211
+ <div class="name">caidan-shujuji</div>
212
+ <div class="code-name">&amp;#xe7f2;</div>
213
+ </li>
214
+
215
+ <li class="dib">
216
+ <span class="icon iconfont">&#xe7f3;</span>
217
+ <div class="name">caidan-shujujieru</div>
218
+ <div class="code-name">&amp;#xe7f3;</div>
219
+ </li>
220
+
221
+ <li class="dib">
222
+ <span class="icon iconfont">&#xe7f4;</span>
223
+ <div class="name">caidan-fenxishujukanban</div>
224
+ <div class="code-name">&amp;#xe7f4;</div>
225
+ </li>
226
+
227
+ <li class="dib">
228
+ <span class="icon iconfont">&#xe7f5;</span>
229
+ <div class="name">a-caidan-yonghuzengchang2A3R</div>
230
+ <div class="code-name">&amp;#xe7f5;</div>
231
+ </li>
232
+
233
+ <li class="dib">
234
+ <span class="icon iconfont">&#xe7dd;</span>
235
+ <div class="name">xinbanlogo-jichuban</div>
236
+ <div class="code-name">&amp;#xe7dd;</div>
237
+ </li>
238
+
239
+ <li class="dib">
240
+ <span class="icon iconfont">&#xe7de;</span>
241
+ <div class="name">yingxiaohuodong</div>
242
+ <div class="code-name">&amp;#xe7de;</div>
243
+ </li>
244
+
245
+ <li class="dib">
246
+ <span class="icon iconfont">&#xe7df;</span>
247
+ <div class="name">caidan-yunyinggailanbaobiao</div>
248
+ <div class="code-name">&amp;#xe7df;</div>
249
+ </li>
250
+
251
+ <li class="dib">
252
+ <span class="icon iconfont">&#xe7e0;</span>
253
+ <div class="name">yewuchangjing</div>
254
+ <div class="code-name">&amp;#xe7e0;</div>
255
+ </li>
256
+
257
+ <li class="dib">
258
+ <span class="icon iconfont">&#xe7e1;</span>
259
+ <div class="name">yasuobao</div>
260
+ <div class="code-name">&amp;#xe7e1;</div>
261
+ </li>
262
+
263
+ <li class="dib">
264
+ <span class="icon iconfont">&#xe7e2;</span>
265
+ <div class="name">shujuzhiliang</div>
266
+ <div class="code-name">&amp;#xe7e2;</div>
267
+ </li>
268
+
269
+ <li class="dib">
270
+ <span class="icon iconfont">&#xe7e3;</span>
271
+ <div class="name">caidan-weixinshengtaiyunying</div>
272
+ <div class="code-name">&amp;#xe7e3;</div>
273
+ </li>
274
+
275
+ <li class="dib">
276
+ <span class="icon iconfont">&#xe7e4;</span>
277
+ <div class="name">caidan-yonghu</div>
278
+ <div class="code-name">&amp;#xe7e4;</div>
279
+ </li>
280
+
281
+ <li class="dib">
282
+ <span class="icon iconfont">&#xe7e5;</span>
283
+ <div class="name">qunzulvcheng</div>
284
+ <div class="code-name">&amp;#xe7e5;</div>
285
+ </li>
286
+
287
+ <li class="dib">
288
+ <span class="icon iconfont">&#xe7e6;</span>
289
+ <div class="name">morentouxiang</div>
290
+ <div class="code-name">&amp;#xe7e6;</div>
291
+ </li>
292
+
293
+ <li class="dib">
294
+ <span class="icon iconfont">&#xe7e7;</span>
295
+ <div class="name">caidan-zhinengchuda</div>
296
+ <div class="code-name">&amp;#xe7e7;</div>
297
+ </li>
298
+
299
+ <li class="dib">
300
+ <span class="icon iconfont">&#xe7e8;</span>
301
+ <div class="name">general</div>
302
+ <div class="code-name">&amp;#xe7e8;</div>
303
+ </li>
304
+
305
+ <li class="dib">
306
+ <span class="icon iconfont">&#xe7e9;</span>
307
+ <div class="name">caidan-zidingyishujubaogao</div>
308
+ <div class="code-name">&amp;#xe7e9;</div>
309
+ </li>
310
+
311
+ <li class="dib">
312
+ <span class="icon iconfont">&#xe7ea;</span>
313
+ <div class="name">chanpinbiaoqian</div>
314
+ <div class="code-name">&amp;#xe7ea;</div>
315
+ </li>
316
+
317
+ <li class="dib">
318
+ <span class="icon iconfont">&#xe7eb;</span>
319
+ <div class="name">fenxigongjuxiang</div>
320
+ <div class="code-name">&amp;#xe7eb;</div>
321
+ </li>
322
+
323
+ <li class="dib">
324
+ <span class="icon iconfont">&#xe7ec;</span>
325
+ <div class="name">caidan-fenxifangfalun</div>
326
+ <div class="code-name">&amp;#xe7ec;</div>
327
+ </li>
328
+
329
+ <li class="dib">
330
+ <span class="icon iconfont">&#xe7ed;</span>
331
+ <div class="name">caidan-chanpindiedai</div>
332
+ <div class="code-name">&amp;#xe7ed;</div>
333
+ </li>
334
+
335
+ <li class="dib">
336
+ <span class="icon iconfont">&#xe7ee;</span>
337
+ <div class="name">credit</div>
338
+ <div class="code-name">&amp;#xe7ee;</div>
339
+ </li>
340
+
341
+ <li class="dib">
342
+ <span class="icon iconfont">&#xe7cc;</span>
343
+ <div class="name">logo-wenziban</div>
344
+ <div class="code-name">&amp;#xe7cc;</div>
345
+ </li>
346
+
347
+ <li class="dib">
348
+ <span class="icon iconfont">&#xe7cd;</span>
349
+ <div class="name">yonghulvcheng</div>
350
+ <div class="code-name">&amp;#xe7cd;</div>
351
+ </li>
352
+
353
+ <li class="dib">
354
+ <span class="icon iconfont">&#xe7ce;</span>
355
+ <div class="name">xinbanlogo-yiguoqi</div>
356
+ <div class="code-name">&amp;#xe7ce;</div>
357
+ </li>
358
+
359
+ <li class="dib">
360
+ <span class="icon iconfont">&#xe7cf;</span>
361
+ <div class="name">yonghufenqun</div>
362
+ <div class="code-name">&amp;#xe7cf;</div>
363
+ </li>
364
+
365
+ <li class="dib">
366
+ <span class="icon iconfont">&#xe7be;</span>
367
+ <div class="name">caidan-idmapping</div>
368
+ <div class="code-name">&amp;#xe7be;</div>
369
+ </li>
370
+
371
+ <li class="dib">
372
+ <span class="icon iconfont">&#xe7d0;</span>
373
+ <div class="name">caidan-laiyuanguanli</div>
374
+ <div class="code-name">&amp;#xe7d0;</div>
375
+ </li>
376
+
377
+ <li class="dib">
378
+ <span class="icon iconfont">&#xe7d1;</span>
379
+ <div class="name">logo</div>
380
+ <div class="code-name">&amp;#xe7d1;</div>
381
+ </li>
382
+
383
+ <li class="dib">
384
+ <span class="icon iconfont">&#xe7d2;</span>
385
+ <div class="name">yingxiaosucai</div>
386
+ <div class="code-name">&amp;#xe7d2;</div>
387
+ </li>
388
+
389
+ <li class="dib">
390
+ <span class="icon iconfont">&#xe7d3;</span>
391
+ <div class="name">shujukaifang</div>
392
+ <div class="code-name">&amp;#xe7d3;</div>
393
+ </li>
394
+
395
+ <li class="dib">
396
+ <span class="icon iconfont">&#xe7d4;</span>
397
+ <div class="name">yingxiaokanban</div>
398
+ <div class="code-name">&amp;#xe7d4;</div>
399
+ </li>
400
+
401
+ <li class="dib">
402
+ <span class="icon iconfont">&#xe7d5;</span>
403
+ <div class="name">yingxiaoshuju</div>
404
+ <div class="code-name">&amp;#xe7d5;</div>
405
+ </li>
406
+
407
+ <li class="dib">
408
+ <span class="icon iconfont">&#xe7d6;</span>
409
+ <div class="name">caidan-maidianguanli</div>
410
+ <div class="code-name">&amp;#xe7d6;</div>
411
+ </li>
412
+
413
+ <li class="dib">
414
+ <span class="icon iconfont">&#xe7d7;</span>
415
+ <div class="name">yonghutiyanjiankong</div>
416
+ <div class="code-name">&amp;#xe7d7;</div>
417
+ </li>
418
+
419
+ <li class="dib">
420
+ <span class="icon iconfont">&#xe7d8;</span>
421
+ <div class="name">yingxiaoshoujufenxi</div>
422
+ <div class="code-name">&amp;#xe7d8;</div>
423
+ </li>
424
+
425
+ <li class="dib">
426
+ <span class="icon iconfont">&#xe7d9;</span>
427
+ <div class="name">yingxiaoshezhi</div>
428
+ <div class="code-name">&amp;#xe7d9;</div>
429
+ </li>
430
+
431
+ <li class="dib">
432
+ <span class="icon iconfont">&#xe7da;</span>
433
+ <div class="name">xinbanlogo-qiyeban</div>
434
+ <div class="code-name">&amp;#xe7da;</div>
435
+ </li>
436
+
437
+ <li class="dib">
438
+ <span class="icon iconfont">&#xe7db;</span>
439
+ <div class="name">logo-zhuanyeban</div>
440
+ <div class="code-name">&amp;#xe7db;</div>
441
+ </li>
442
+
443
+ <li class="dib">
444
+ <span class="icon iconfont">&#xe7dc;</span>
445
+ <div class="name">yingxiaozhongxin</div>
446
+ <div class="code-name">&amp;#xe7dc;</div>
447
+ </li>
448
+
449
+ <li class="dib">
450
+ <span class="icon iconfont">&#xe7c2;</span>
451
+ <div class="name">xinbanlogo</div>
452
+ <div class="code-name">&amp;#xe7c2;</div>
453
+ </li>
454
+
455
+ <li class="dib">
456
+ <span class="icon iconfont">&#xe7c4;</span>
457
+ <div class="name">yonghuyingxiao</div>
458
+ <div class="code-name">&amp;#xe7c4;</div>
459
+ </li>
460
+
461
+ <li class="dib">
462
+ <span class="icon iconfont">&#xe7c3;</span>
463
+ <div class="name">xinbanlogo-shiyongban</div>
464
+ <div class="code-name">&amp;#xe7c3;</div>
465
+ </li>
466
+
467
+ <li class="dib">
468
+ <span class="icon iconfont">&#xe7c5;</span>
469
+ <div class="name">xinyongkafenqi</div>
470
+ <div class="code-name">&amp;#xe7c5;</div>
471
+ </li>
472
+
473
+ <li class="dib">
474
+ <span class="icon iconfont">&#xe7c6;</span>
475
+ <div class="name">yonghubiaoqian</div>
476
+ <div class="code-name">&amp;#xe7c6;</div>
477
+ </li>
478
+
479
+ <li class="dib">
480
+ <span class="icon iconfont">&#xe7c7;</span>
481
+ <div class="name">zhinengyingxiaoduose</div>
482
+ <div class="code-name">&amp;#xe7c7;</div>
483
+ </li>
484
+
485
+ <li class="dib">
486
+ <span class="icon iconfont">&#xe7c0;</span>
487
+ <div class="name">logo-qiyeban</div>
488
+ <div class="code-name">&amp;#xe7c0;</div>
489
+ </li>
490
+
491
+ <li class="dib">
492
+ <span class="icon iconfont">&#xe7c1;</span>
493
+ <div class="name">logo-yiguoqi</div>
494
+ <div class="code-name">&amp;#xe7c1;</div>
495
+ </li>
496
+
497
+ <li class="dib">
498
+ <span class="icon iconfont">&#xe7c8;</span>
499
+ <div class="name">xinyongkayewu</div>
500
+ <div class="code-name">&amp;#xe7c8;</div>
501
+ </li>
502
+
503
+ <li class="dib">
504
+ <span class="icon iconfont">&#xe7c9;</span>
505
+ <div class="name">logo-shiyongban</div>
506
+ <div class="code-name">&amp;#xe7c9;</div>
507
+ </li>
508
+
509
+ <li class="dib">
510
+ <span class="icon iconfont">&#xe7ca;</span>
511
+ <div class="name">logo-jichuban</div>
512
+ <div class="code-name">&amp;#xe7ca;</div>
513
+ </li>
514
+
515
+ <li class="dib">
516
+ <span class="icon iconfont">&#xe7cb;</span>
517
+ <div class="name">xinbanlogo-zhuanyeban</div>
518
+ <div class="code-name">&amp;#xe7cb;</div>
519
+ </li>
520
+
521
+ <li class="dib">
522
+ <span class="icon iconfont">&#xe7bf;</span>
523
+ <div class="name">cunkuanyewufenxi</div>
524
+ <div class="code-name">&amp;#xe7bf;</div>
525
+ </li>
526
+
527
+ </ul>
528
+ <div class="article markdown">
529
+ <h2 id="unicode-">Unicode 引用</h2>
530
+ <hr>
531
+
532
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
533
+ <ul>
534
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
535
+ <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
536
+ </ul>
537
+ <blockquote>
538
+ <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
539
+ </blockquote>
540
+ <p>Unicode 使用步骤如下：</p>
541
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
542
+ <pre><code class="language-css"
543
+ >@font-face {
544
+ font-family: 'iconfont';
545
+ src:
546
+ url('iconfont.woff2?t=1743576501448') format('woff2'),
547
+ url('iconfont.woff?t=1743576501448') format('woff'),
548
+ url('iconfont.ttf?t=1743576501448') format('truetype');
549
+ }
550
+ </code></pre>
551
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
552
+ <pre><code class="language-css"
553
+ >.iconfont {
554
+ font-family: "iconfont" !important;
555
+ font-size: 16px;
556
+ font-style: normal;
557
+ -webkit-font-smoothing: antialiased;
558
+ -moz-osx-font-smoothing: grayscale;
559
+ }
560
+ </code></pre>
561
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
562
+ <pre>
563
+ <code class="language-html"
564
+ >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
565
+ </code></pre>
566
+ <blockquote>
567
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
568
+ </blockquote>
569
+ </div>
570
+ </div>
571
+ <div class="content font-class">
572
+ <ul class="icon_lists dib-box">
573
+
574
+ <li class="dib">
575
+ <span class="icon iconfont icon-strategy-on"></span>
576
+ <div class="name">
577
+ strategy-on
578
+ </div>
579
+ <div class="code-name">.icon-strategy-on
580
+ </div>
581
+ </li>
582
+
583
+ <li class="dib">
584
+ <span class="icon iconfont icon-yonghubiaoqian-off"></span>
585
+ <div class="name">
586
+ yonghubiaoqian-off
587
+ </div>
588
+ <div class="code-name">.icon-yonghubiaoqian-off
589
+ </div>
590
+ </li>
591
+
592
+ <li class="dib">
593
+ <span class="icon iconfont icon-xinyongkafenqi-on"></span>
594
+ <div class="name">
595
+ xinyongkafenqi-on
596
+ </div>
597
+ <div class="code-name">.icon-xinyongkafenqi-on
598
+ </div>
599
+ </li>
600
+
601
+ <li class="dib">
602
+ <span class="icon iconfont icon-xinyongdaikuanfenxi-off"></span>
603
+ <div class="name">
604
+ xinyongdaikuanfenxi-off
605
+ </div>
606
+ <div class="code-name">.icon-xinyongdaikuanfenxi-off
607
+ </div>
608
+ </li>
609
+
610
+ <li class="dib">
611
+ <span class="icon iconfont icon-xinyongdaikuanfenxi-on"></span>
612
+ <div class="name">
613
+ xinyongdaikuanfenxi-on
614
+ </div>
615
+ <div class="code-name">.icon-xinyongdaikuanfenxi-on
616
+ </div>
617
+ </li>
618
+
619
+ <li class="dib">
620
+ <span class="icon iconfont icon-a-caidan-shujukanbanBI-off"></span>
621
+ <div class="name">
622
+ a-caidan-shujukanbanBI-off
623
+ </div>
624
+ <div class="code-name">.icon-a-caidan-shujukanbanBI-off
625
+ </div>
626
+ </li>
627
+
628
+ <li class="dib">
629
+ <span class="icon iconfont icon-strategy-off"></span>
630
+ <div class="name">
631
+ strategy-off
632
+ </div>
633
+ <div class="code-name">.icon-strategy-off
634
+ </div>
635
+ </li>
636
+
637
+ <li class="dib">
638
+ <span class="icon iconfont icon-licaiyewufenxi-on"></span>
639
+ <div class="name">
640
+ licaiyewufenxi-on
641
+ </div>
642
+ <div class="code-name">.icon-licaiyewufenxi-on
643
+ </div>
644
+ </li>
645
+
646
+ <li class="dib">
647
+ <span class="icon iconfont icon-chanpinbiaoqian-on"></span>
648
+ <div class="name">
649
+ chanpinbiaoqian-on
650
+ </div>
651
+ <div class="code-name">.icon-chanpinbiaoqian-on
652
+ </div>
653
+ </li>
654
+
655
+ <li class="dib">
656
+ <span class="icon iconfont icon-chanpinbiaoqian-off"></span>
657
+ <div class="name">
658
+ chanpinbiaoqian-off
659
+ </div>
660
+ <div class="code-name">.icon-chanpinbiaoqian-off
661
+ </div>
662
+ </li>
663
+
664
+ <li class="dib">
665
+ <span class="icon iconfont icon-cunkuanyewu-on"></span>
666
+ <div class="name">
667
+ cunkuanyewu-on
668
+ </div>
669
+ <div class="code-name">.icon-cunkuanyewu-on
670
+ </div>
671
+ </li>
672
+
673
+ <li class="dib">
674
+ <span class="icon iconfont icon-licaiyewufenxi-off"></span>
675
+ <div class="name">
676
+ licaiyewufenxi-off
677
+ </div>
678
+ <div class="code-name">.icon-licaiyewufenxi-off
679
+ </div>
680
+ </li>
681
+
682
+ <li class="dib">
683
+ <span class="icon iconfont icon-cunkuanyewu-off"></span>
684
+ <div class="name">
685
+ cunkuanyewu-off
686
+ </div>
687
+ <div class="code-name">.icon-cunkuanyewu-off
688
+ </div>
689
+ </li>
690
+
691
+ <li class="dib">
692
+ <span class="icon iconfont icon-a-caidan-shujukanbanBI-on"></span>
693
+ <div class="name">
694
+ a-caidan-shujukanbanBI-on
695
+ </div>
696
+ <div class="code-name">.icon-a-caidan-shujukanbanBI-on
697
+ </div>
698
+ </li>
699
+
700
+ <li class="dib">
701
+ <span class="icon iconfont icon-yonghubiaoqian-on"></span>
702
+ <div class="name">
703
+ yonghubiaoqian-on
704
+ </div>
705
+ <div class="code-name">.icon-yonghubiaoqian-on
706
+ </div>
707
+ </li>
708
+
709
+ <li class="dib">
710
+ <span class="icon iconfont icon-xinyongkayewu-off"></span>
711
+ <div class="name">
712
+ xinyongkayewu-off
713
+ </div>
714
+ <div class="code-name">.icon-xinyongkayewu-off
715
+ </div>
716
+ </li>
717
+
718
+ <li class="dib">
719
+ <span class="icon iconfont icon-yingxiaoshujufenxi-on"></span>
720
+ <div class="name">
721
+ yingxiaoshujufenxi-on
722
+ </div>
723
+ <div class="code-name">.icon-yingxiaoshujufenxi-on
724
+ </div>
725
+ </li>
726
+
727
+ <li class="dib">
728
+ <span class="icon iconfont icon-yingxiaoshujufenxi-off"></span>
729
+ <div class="name">
730
+ yingxiaoshujufenxi-off
731
+ </div>
732
+ <div class="code-name">.icon-yingxiaoshujufenxi-off
733
+ </div>
734
+ </li>
735
+
736
+ <li class="dib">
737
+ <span class="icon iconfont icon-xinyongkafenqi-off"></span>
738
+ <div class="name">
739
+ xinyongkafenqi-off
740
+ </div>
741
+ <div class="code-name">.icon-xinyongkafenqi-off
742
+ </div>
743
+ </li>
744
+
745
+ <li class="dib">
746
+ <span class="icon iconfont icon-yonghutiyanjiankong-on"></span>
747
+ <div class="name">
748
+ yonghutiyanjiankong-on
749
+ </div>
750
+ <div class="code-name">.icon-yonghutiyanjiankong-on
751
+ </div>
752
+ </li>
753
+
754
+ <li class="dib">
755
+ <span class="icon iconfont icon-xinyongkayewu-on"></span>
756
+ <div class="name">
757
+ xinyongkayewu-on
758
+ </div>
759
+ <div class="code-name">.icon-xinyongkayewu-on
760
+ </div>
761
+ </li>
762
+
763
+ <li class="dib">
764
+ <span class="icon iconfont icon-yonghutiyanjiankong-off"></span>
765
+ <div class="name">
766
+ yonghutiyanjiankong-off
767
+ </div>
768
+ <div class="code-name">.icon-yonghutiyanjiankong-off
769
+ </div>
770
+ </li>
771
+
772
+ <li class="dib">
773
+ <span class="icon iconfont icon-caidan-zidingyiBIbaobiao"></span>
774
+ <div class="name">
775
+ caidan-zidingyiBIbaobiao
776
+ </div>
777
+ <div class="code-name">.icon-caidan-zidingyiBIbaobiao
778
+ </div>
779
+ </li>
780
+
781
+ <li class="dib">
782
+ <span class="icon iconfont icon-caidan-guanggaojiance"></span>
783
+ <div class="name">
784
+ caidan-guanggaojiance
785
+ </div>
786
+ <div class="code-name">.icon-caidan-guanggaojiance
787
+ </div>
788
+ </li>
789
+
790
+ <li class="dib">
791
+ <span class="icon iconfont icon-caidan-CEP"></span>
792
+ <div class="name">
793
+ caidan-CEP
794
+ </div>
795
+ <div class="code-name">.icon-caidan-CEP
796
+ </div>
797
+ </li>
798
+
799
+ <li class="dib">
800
+ <span class="icon iconfont icon-caidan-shujuji"></span>
801
+ <div class="name">
802
+ caidan-shujuji
803
+ </div>
804
+ <div class="code-name">.icon-caidan-shujuji
805
+ </div>
806
+ </li>
807
+
808
+ <li class="dib">
809
+ <span class="icon iconfont icon-caidan-shujujieru"></span>
810
+ <div class="name">
811
+ caidan-shujujieru
812
+ </div>
813
+ <div class="code-name">.icon-caidan-shujujieru
814
+ </div>
815
+ </li>
816
+
817
+ <li class="dib">
818
+ <span class="icon iconfont icon-caidan-fenxishujukanban"></span>
819
+ <div class="name">
820
+ caidan-fenxishujukanban
821
+ </div>
822
+ <div class="code-name">.icon-caidan-fenxishujukanban
823
+ </div>
824
+ </li>
825
+
826
+ <li class="dib">
827
+ <span class="icon iconfont icon-a-caidan-yonghuzengchang2A3R"></span>
828
+ <div class="name">
829
+ a-caidan-yonghuzengchang2A3R
830
+ </div>
831
+ <div class="code-name">.icon-a-caidan-yonghuzengchang2A3R
832
+ </div>
833
+ </li>
834
+
835
+ <li class="dib">
836
+ <span class="icon iconfont icon-xinbanlogo-jichuban"></span>
837
+ <div class="name">
838
+ xinbanlogo-jichuban
839
+ </div>
840
+ <div class="code-name">.icon-xinbanlogo-jichuban
841
+ </div>
842
+ </li>
843
+
844
+ <li class="dib">
845
+ <span class="icon iconfont icon-yingxiaohuodong"></span>
846
+ <div class="name">
847
+ yingxiaohuodong
848
+ </div>
849
+ <div class="code-name">.icon-yingxiaohuodong
850
+ </div>
851
+ </li>
852
+
853
+ <li class="dib">
854
+ <span class="icon iconfont icon-caidan-yunyinggailanbaobiao"></span>
855
+ <div class="name">
856
+ caidan-yunyinggailanbaobiao
857
+ </div>
858
+ <div class="code-name">.icon-caidan-yunyinggailanbaobiao
859
+ </div>
860
+ </li>
861
+
862
+ <li class="dib">
863
+ <span class="icon iconfont icon-yewuchangjing"></span>
864
+ <div class="name">
865
+ yewuchangjing
866
+ </div>
867
+ <div class="code-name">.icon-yewuchangjing
868
+ </div>
869
+ </li>
870
+
871
+ <li class="dib">
872
+ <span class="icon iconfont icon-yasuobao"></span>
873
+ <div class="name">
874
+ yasuobao
875
+ </div>
876
+ <div class="code-name">.icon-yasuobao
877
+ </div>
878
+ </li>
879
+
880
+ <li class="dib">
881
+ <span class="icon iconfont icon-shujuzhiliang"></span>
882
+ <div class="name">
883
+ shujuzhiliang
884
+ </div>
885
+ <div class="code-name">.icon-shujuzhiliang
886
+ </div>
887
+ </li>
888
+
889
+ <li class="dib">
890
+ <span class="icon iconfont icon-caidan-weixinshengtaiyunying"></span>
891
+ <div class="name">
892
+ caidan-weixinshengtaiyunying
893
+ </div>
894
+ <div class="code-name">.icon-caidan-weixinshengtaiyunying
895
+ </div>
896
+ </li>
897
+
898
+ <li class="dib">
899
+ <span class="icon iconfont icon-caidan-yonghu"></span>
900
+ <div class="name">
901
+ caidan-yonghu
902
+ </div>
903
+ <div class="code-name">.icon-caidan-yonghu
904
+ </div>
905
+ </li>
906
+
907
+ <li class="dib">
908
+ <span class="icon iconfont icon-qunzulvcheng"></span>
909
+ <div class="name">
910
+ qunzulvcheng
911
+ </div>
912
+ <div class="code-name">.icon-qunzulvcheng
913
+ </div>
914
+ </li>
915
+
916
+ <li class="dib">
917
+ <span class="icon iconfont icon-morentouxiang"></span>
918
+ <div class="name">
919
+ morentouxiang
920
+ </div>
921
+ <div class="code-name">.icon-morentouxiang
922
+ </div>
923
+ </li>
924
+
925
+ <li class="dib">
926
+ <span class="icon iconfont icon-caidan-zhinengchuda"></span>
927
+ <div class="name">
928
+ caidan-zhinengchuda
929
+ </div>
930
+ <div class="code-name">.icon-caidan-zhinengchuda
931
+ </div>
932
+ </li>
933
+
934
+ <li class="dib">
935
+ <span class="icon iconfont icon-general"></span>
936
+ <div class="name">
937
+ general
938
+ </div>
939
+ <div class="code-name">.icon-general
940
+ </div>
941
+ </li>
942
+
943
+ <li class="dib">
944
+ <span class="icon iconfont icon-caidan-zidingyishujubaogao"></span>
945
+ <div class="name">
946
+ caidan-zidingyishujubaogao
947
+ </div>
948
+ <div class="code-name">.icon-caidan-zidingyishujubaogao
949
+ </div>
950
+ </li>
951
+
952
+ <li class="dib">
953
+ <span class="icon iconfont icon-chanpinbiaoqian"></span>
954
+ <div class="name">
955
+ chanpinbiaoqian
956
+ </div>
957
+ <div class="code-name">.icon-chanpinbiaoqian
958
+ </div>
959
+ </li>
960
+
961
+ <li class="dib">
962
+ <span class="icon iconfont icon-fenxigongjuxiang"></span>
963
+ <div class="name">
964
+ fenxigongjuxiang
965
+ </div>
966
+ <div class="code-name">.icon-fenxigongjuxiang
967
+ </div>
968
+ </li>
969
+
970
+ <li class="dib">
971
+ <span class="icon iconfont icon-caidan-fenxifangfalun"></span>
972
+ <div class="name">
973
+ caidan-fenxifangfalun
974
+ </div>
975
+ <div class="code-name">.icon-caidan-fenxifangfalun
976
+ </div>
977
+ </li>
978
+
979
+ <li class="dib">
980
+ <span class="icon iconfont icon-caidan-chanpindiedai"></span>
981
+ <div class="name">
982
+ caidan-chanpindiedai
983
+ </div>
984
+ <div class="code-name">.icon-caidan-chanpindiedai
985
+ </div>
986
+ </li>
987
+
988
+ <li class="dib">
989
+ <span class="icon iconfont icon-credit"></span>
990
+ <div class="name">
991
+ credit
992
+ </div>
993
+ <div class="code-name">.icon-credit
994
+ </div>
995
+ </li>
996
+
997
+ <li class="dib">
998
+ <span class="icon iconfont icon-logo-wenziban"></span>
999
+ <div class="name">
1000
+ logo-wenziban
1001
+ </div>
1002
+ <div class="code-name">.icon-logo-wenziban
1003
+ </div>
1004
+ </li>
1005
+
1006
+ <li class="dib">
1007
+ <span class="icon iconfont icon-yonghulvcheng"></span>
1008
+ <div class="name">
1009
+ yonghulvcheng
1010
+ </div>
1011
+ <div class="code-name">.icon-yonghulvcheng
1012
+ </div>
1013
+ </li>
1014
+
1015
+ <li class="dib">
1016
+ <span class="icon iconfont icon-xinbanlogo-yiguoqi"></span>
1017
+ <div class="name">
1018
+ xinbanlogo-yiguoqi
1019
+ </div>
1020
+ <div class="code-name">.icon-xinbanlogo-yiguoqi
1021
+ </div>
1022
+ </li>
1023
+
1024
+ <li class="dib">
1025
+ <span class="icon iconfont icon-yonghufenqun"></span>
1026
+ <div class="name">
1027
+ yonghufenqun
1028
+ </div>
1029
+ <div class="code-name">.icon-yonghufenqun
1030
+ </div>
1031
+ </li>
1032
+
1033
+ <li class="dib">
1034
+ <span class="icon iconfont icon-caidan-idmapping"></span>
1035
+ <div class="name">
1036
+ caidan-idmapping
1037
+ </div>
1038
+ <div class="code-name">.icon-caidan-idmapping
1039
+ </div>
1040
+ </li>
1041
+
1042
+ <li class="dib">
1043
+ <span class="icon iconfont icon-caidan-laiyuanguanli"></span>
1044
+ <div class="name">
1045
+ caidan-laiyuanguanli
1046
+ </div>
1047
+ <div class="code-name">.icon-caidan-laiyuanguanli
1048
+ </div>
1049
+ </li>
1050
+
1051
+ <li class="dib">
1052
+ <span class="icon iconfont icon-logo"></span>
1053
+ <div class="name">
1054
+ logo
1055
+ </div>
1056
+ <div class="code-name">.icon-logo
1057
+ </div>
1058
+ </li>
1059
+
1060
+ <li class="dib">
1061
+ <span class="icon iconfont icon-yingxiaosucai"></span>
1062
+ <div class="name">
1063
+ yingxiaosucai
1064
+ </div>
1065
+ <div class="code-name">.icon-yingxiaosucai
1066
+ </div>
1067
+ </li>
1068
+
1069
+ <li class="dib">
1070
+ <span class="icon iconfont icon-shujukaifang"></span>
1071
+ <div class="name">
1072
+ shujukaifang
1073
+ </div>
1074
+ <div class="code-name">.icon-shujukaifang
1075
+ </div>
1076
+ </li>
1077
+
1078
+ <li class="dib">
1079
+ <span class="icon iconfont icon-yingxiaokanban"></span>
1080
+ <div class="name">
1081
+ yingxiaokanban
1082
+ </div>
1083
+ <div class="code-name">.icon-yingxiaokanban
1084
+ </div>
1085
+ </li>
1086
+
1087
+ <li class="dib">
1088
+ <span class="icon iconfont icon-yingxiaoshuju"></span>
1089
+ <div class="name">
1090
+ yingxiaoshuju
1091
+ </div>
1092
+ <div class="code-name">.icon-yingxiaoshuju
1093
+ </div>
1094
+ </li>
1095
+
1096
+ <li class="dib">
1097
+ <span class="icon iconfont icon-caidan-maidianguanli"></span>
1098
+ <div class="name">
1099
+ caidan-maidianguanli
1100
+ </div>
1101
+ <div class="code-name">.icon-caidan-maidianguanli
1102
+ </div>
1103
+ </li>
1104
+
1105
+ <li class="dib">
1106
+ <span class="icon iconfont icon-yonghutiyanjiankong"></span>
1107
+ <div class="name">
1108
+ yonghutiyanjiankong
1109
+ </div>
1110
+ <div class="code-name">.icon-yonghutiyanjiankong
1111
+ </div>
1112
+ </li>
1113
+
1114
+ <li class="dib">
1115
+ <span class="icon iconfont icon-yingxiaoshoujufenxi"></span>
1116
+ <div class="name">
1117
+ yingxiaoshoujufenxi
1118
+ </div>
1119
+ <div class="code-name">.icon-yingxiaoshoujufenxi
1120
+ </div>
1121
+ </li>
1122
+
1123
+ <li class="dib">
1124
+ <span class="icon iconfont icon-yingxiaoshezhi"></span>
1125
+ <div class="name">
1126
+ yingxiaoshezhi
1127
+ </div>
1128
+ <div class="code-name">.icon-yingxiaoshezhi
1129
+ </div>
1130
+ </li>
1131
+
1132
+ <li class="dib">
1133
+ <span class="icon iconfont icon-xinbanlogo-qiyeban"></span>
1134
+ <div class="name">
1135
+ xinbanlogo-qiyeban
1136
+ </div>
1137
+ <div class="code-name">.icon-xinbanlogo-qiyeban
1138
+ </div>
1139
+ </li>
1140
+
1141
+ <li class="dib">
1142
+ <span class="icon iconfont icon-logo-zhuanyeban"></span>
1143
+ <div class="name">
1144
+ logo-zhuanyeban
1145
+ </div>
1146
+ <div class="code-name">.icon-logo-zhuanyeban
1147
+ </div>
1148
+ </li>
1149
+
1150
+ <li class="dib">
1151
+ <span class="icon iconfont icon-yingxiaozhongxin"></span>
1152
+ <div class="name">
1153
+ yingxiaozhongxin
1154
+ </div>
1155
+ <div class="code-name">.icon-yingxiaozhongxin
1156
+ </div>
1157
+ </li>
1158
+
1159
+ <li class="dib">
1160
+ <span class="icon iconfont icon-xinbanlogo"></span>
1161
+ <div class="name">
1162
+ xinbanlogo
1163
+ </div>
1164
+ <div class="code-name">.icon-xinbanlogo
1165
+ </div>
1166
+ </li>
1167
+
1168
+ <li class="dib">
1169
+ <span class="icon iconfont icon-yonghuyingxiao"></span>
1170
+ <div class="name">
1171
+ yonghuyingxiao
1172
+ </div>
1173
+ <div class="code-name">.icon-yonghuyingxiao
1174
+ </div>
1175
+ </li>
1176
+
1177
+ <li class="dib">
1178
+ <span class="icon iconfont icon-xinbanlogo-shiyongban"></span>
1179
+ <div class="name">
1180
+ xinbanlogo-shiyongban
1181
+ </div>
1182
+ <div class="code-name">.icon-xinbanlogo-shiyongban
1183
+ </div>
1184
+ </li>
1185
+
1186
+ <li class="dib">
1187
+ <span class="icon iconfont icon-xinyongkafenqi"></span>
1188
+ <div class="name">
1189
+ xinyongkafenqi
1190
+ </div>
1191
+ <div class="code-name">.icon-xinyongkafenqi
1192
+ </div>
1193
+ </li>
1194
+
1195
+ <li class="dib">
1196
+ <span class="icon iconfont icon-yonghubiaoqian"></span>
1197
+ <div class="name">
1198
+ yonghubiaoqian
1199
+ </div>
1200
+ <div class="code-name">.icon-yonghubiaoqian
1201
+ </div>
1202
+ </li>
1203
+
1204
+ <li class="dib">
1205
+ <span class="icon iconfont icon-zhinengyingxiaoduose"></span>
1206
+ <div class="name">
1207
+ zhinengyingxiaoduose
1208
+ </div>
1209
+ <div class="code-name">.icon-zhinengyingxiaoduose
1210
+ </div>
1211
+ </li>
1212
+
1213
+ <li class="dib">
1214
+ <span class="icon iconfont icon-logo-qiyeban"></span>
1215
+ <div class="name">
1216
+ logo-qiyeban
1217
+ </div>
1218
+ <div class="code-name">.icon-logo-qiyeban
1219
+ </div>
1220
+ </li>
1221
+
1222
+ <li class="dib">
1223
+ <span class="icon iconfont icon-logo-yiguoqi"></span>
1224
+ <div class="name">
1225
+ logo-yiguoqi
1226
+ </div>
1227
+ <div class="code-name">.icon-logo-yiguoqi
1228
+ </div>
1229
+ </li>
1230
+
1231
+ <li class="dib">
1232
+ <span class="icon iconfont icon-xinyongkayewu"></span>
1233
+ <div class="name">
1234
+ xinyongkayewu
1235
+ </div>
1236
+ <div class="code-name">.icon-xinyongkayewu
1237
+ </div>
1238
+ </li>
1239
+
1240
+ <li class="dib">
1241
+ <span class="icon iconfont icon-logo-shiyongban"></span>
1242
+ <div class="name">
1243
+ logo-shiyongban
1244
+ </div>
1245
+ <div class="code-name">.icon-logo-shiyongban
1246
+ </div>
1247
+ </li>
1248
+
1249
+ <li class="dib">
1250
+ <span class="icon iconfont icon-logo-jichuban"></span>
1251
+ <div class="name">
1252
+ logo-jichuban
1253
+ </div>
1254
+ <div class="code-name">.icon-logo-jichuban
1255
+ </div>
1256
+ </li>
1257
+
1258
+ <li class="dib">
1259
+ <span class="icon iconfont icon-xinbanlogo-zhuanyeban"></span>
1260
+ <div class="name">
1261
+ xinbanlogo-zhuanyeban
1262
+ </div>
1263
+ <div class="code-name">.icon-xinbanlogo-zhuanyeban
1264
+ </div>
1265
+ </li>
1266
+
1267
+ <li class="dib">
1268
+ <span class="icon iconfont icon-cunkuanyewufenxi"></span>
1269
+ <div class="name">
1270
+ cunkuanyewufenxi
1271
+ </div>
1272
+ <div class="code-name">.icon-cunkuanyewufenxi
1273
+ </div>
1274
+ </li>
1275
+
1276
+ </ul>
1277
+ <div class="article markdown">
1278
+ <h2 id="font-class-">font-class 引用</h2>
1279
+ <hr>
1280
+
1281
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
1282
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
1283
+ <ul>
1284
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
1285
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
1286
+ </ul>
1287
+ <p>使用步骤如下：</p>
1288
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
1289
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1290
+ </code></pre>
1291
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1292
+ <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
1293
+ </code></pre>
1294
+ <blockquote>
1295
+ <p>"
1296
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
1297
+ </blockquote>
1298
+ </div>
1299
+ </div>
1300
+ <div class="content symbol">
1301
+ <ul class="icon_lists dib-box">
1302
+
1303
+ <li class="dib">
1304
+ <svg class="icon svg-icon" aria-hidden="true">
1305
+ <use xlink:href="#icon-strategy-on"></use>
1306
+ </svg>
1307
+ <div class="name">strategy-on</div>
1308
+ <div class="code-name">#icon-strategy-on</div>
1309
+ </li>
1310
+
1311
+ <li class="dib">
1312
+ <svg class="icon svg-icon" aria-hidden="true">
1313
+ <use xlink:href="#icon-yonghubiaoqian-off"></use>
1314
+ </svg>
1315
+ <div class="name">yonghubiaoqian-off</div>
1316
+ <div class="code-name">#icon-yonghubiaoqian-off</div>
1317
+ </li>
1318
+
1319
+ <li class="dib">
1320
+ <svg class="icon svg-icon" aria-hidden="true">
1321
+ <use xlink:href="#icon-xinyongkafenqi-on"></use>
1322
+ </svg>
1323
+ <div class="name">xinyongkafenqi-on</div>
1324
+ <div class="code-name">#icon-xinyongkafenqi-on</div>
1325
+ </li>
1326
+
1327
+ <li class="dib">
1328
+ <svg class="icon svg-icon" aria-hidden="true">
1329
+ <use xlink:href="#icon-xinyongdaikuanfenxi-off"></use>
1330
+ </svg>
1331
+ <div class="name">xinyongdaikuanfenxi-off</div>
1332
+ <div class="code-name">#icon-xinyongdaikuanfenxi-off</div>
1333
+ </li>
1334
+
1335
+ <li class="dib">
1336
+ <svg class="icon svg-icon" aria-hidden="true">
1337
+ <use xlink:href="#icon-xinyongdaikuanfenxi-on"></use>
1338
+ </svg>
1339
+ <div class="name">xinyongdaikuanfenxi-on</div>
1340
+ <div class="code-name">#icon-xinyongdaikuanfenxi-on</div>
1341
+ </li>
1342
+
1343
+ <li class="dib">
1344
+ <svg class="icon svg-icon" aria-hidden="true">
1345
+ <use xlink:href="#icon-a-caidan-shujukanbanBI-off"></use>
1346
+ </svg>
1347
+ <div class="name">a-caidan-shujukanbanBI-off</div>
1348
+ <div class="code-name">#icon-a-caidan-shujukanbanBI-off</div>
1349
+ </li>
1350
+
1351
+ <li class="dib">
1352
+ <svg class="icon svg-icon" aria-hidden="true">
1353
+ <use xlink:href="#icon-strategy-off"></use>
1354
+ </svg>
1355
+ <div class="name">strategy-off</div>
1356
+ <div class="code-name">#icon-strategy-off</div>
1357
+ </li>
1358
+
1359
+ <li class="dib">
1360
+ <svg class="icon svg-icon" aria-hidden="true">
1361
+ <use xlink:href="#icon-licaiyewufenxi-on"></use>
1362
+ </svg>
1363
+ <div class="name">licaiyewufenxi-on</div>
1364
+ <div class="code-name">#icon-licaiyewufenxi-on</div>
1365
+ </li>
1366
+
1367
+ <li class="dib">
1368
+ <svg class="icon svg-icon" aria-hidden="true">
1369
+ <use xlink:href="#icon-chanpinbiaoqian-on"></use>
1370
+ </svg>
1371
+ <div class="name">chanpinbiaoqian-on</div>
1372
+ <div class="code-name">#icon-chanpinbiaoqian-on</div>
1373
+ </li>
1374
+
1375
+ <li class="dib">
1376
+ <svg class="icon svg-icon" aria-hidden="true">
1377
+ <use xlink:href="#icon-chanpinbiaoqian-off"></use>
1378
+ </svg>
1379
+ <div class="name">chanpinbiaoqian-off</div>
1380
+ <div class="code-name">#icon-chanpinbiaoqian-off</div>
1381
+ </li>
1382
+
1383
+ <li class="dib">
1384
+ <svg class="icon svg-icon" aria-hidden="true">
1385
+ <use xlink:href="#icon-cunkuanyewu-on"></use>
1386
+ </svg>
1387
+ <div class="name">cunkuanyewu-on</div>
1388
+ <div class="code-name">#icon-cunkuanyewu-on</div>
1389
+ </li>
1390
+
1391
+ <li class="dib">
1392
+ <svg class="icon svg-icon" aria-hidden="true">
1393
+ <use xlink:href="#icon-licaiyewufenxi-off"></use>
1394
+ </svg>
1395
+ <div class="name">licaiyewufenxi-off</div>
1396
+ <div class="code-name">#icon-licaiyewufenxi-off</div>
1397
+ </li>
1398
+
1399
+ <li class="dib">
1400
+ <svg class="icon svg-icon" aria-hidden="true">
1401
+ <use xlink:href="#icon-cunkuanyewu-off"></use>
1402
+ </svg>
1403
+ <div class="name">cunkuanyewu-off</div>
1404
+ <div class="code-name">#icon-cunkuanyewu-off</div>
1405
+ </li>
1406
+
1407
+ <li class="dib">
1408
+ <svg class="icon svg-icon" aria-hidden="true">
1409
+ <use xlink:href="#icon-a-caidan-shujukanbanBI-on"></use>
1410
+ </svg>
1411
+ <div class="name">a-caidan-shujukanbanBI-on</div>
1412
+ <div class="code-name">#icon-a-caidan-shujukanbanBI-on</div>
1413
+ </li>
1414
+
1415
+ <li class="dib">
1416
+ <svg class="icon svg-icon" aria-hidden="true">
1417
+ <use xlink:href="#icon-yonghubiaoqian-on"></use>
1418
+ </svg>
1419
+ <div class="name">yonghubiaoqian-on</div>
1420
+ <div class="code-name">#icon-yonghubiaoqian-on</div>
1421
+ </li>
1422
+
1423
+ <li class="dib">
1424
+ <svg class="icon svg-icon" aria-hidden="true">
1425
+ <use xlink:href="#icon-xinyongkayewu-off"></use>
1426
+ </svg>
1427
+ <div class="name">xinyongkayewu-off</div>
1428
+ <div class="code-name">#icon-xinyongkayewu-off</div>
1429
+ </li>
1430
+
1431
+ <li class="dib">
1432
+ <svg class="icon svg-icon" aria-hidden="true">
1433
+ <use xlink:href="#icon-yingxiaoshujufenxi-on"></use>
1434
+ </svg>
1435
+ <div class="name">yingxiaoshujufenxi-on</div>
1436
+ <div class="code-name">#icon-yingxiaoshujufenxi-on</div>
1437
+ </li>
1438
+
1439
+ <li class="dib">
1440
+ <svg class="icon svg-icon" aria-hidden="true">
1441
+ <use xlink:href="#icon-yingxiaoshujufenxi-off"></use>
1442
+ </svg>
1443
+ <div class="name">yingxiaoshujufenxi-off</div>
1444
+ <div class="code-name">#icon-yingxiaoshujufenxi-off</div>
1445
+ </li>
1446
+
1447
+ <li class="dib">
1448
+ <svg class="icon svg-icon" aria-hidden="true">
1449
+ <use xlink:href="#icon-xinyongkafenqi-off"></use>
1450
+ </svg>
1451
+ <div class="name">xinyongkafenqi-off</div>
1452
+ <div class="code-name">#icon-xinyongkafenqi-off</div>
1453
+ </li>
1454
+
1455
+ <li class="dib">
1456
+ <svg class="icon svg-icon" aria-hidden="true">
1457
+ <use xlink:href="#icon-yonghutiyanjiankong-on"></use>
1458
+ </svg>
1459
+ <div class="name">yonghutiyanjiankong-on</div>
1460
+ <div class="code-name">#icon-yonghutiyanjiankong-on</div>
1461
+ </li>
1462
+
1463
+ <li class="dib">
1464
+ <svg class="icon svg-icon" aria-hidden="true">
1465
+ <use xlink:href="#icon-xinyongkayewu-on"></use>
1466
+ </svg>
1467
+ <div class="name">xinyongkayewu-on</div>
1468
+ <div class="code-name">#icon-xinyongkayewu-on</div>
1469
+ </li>
1470
+
1471
+ <li class="dib">
1472
+ <svg class="icon svg-icon" aria-hidden="true">
1473
+ <use xlink:href="#icon-yonghutiyanjiankong-off"></use>
1474
+ </svg>
1475
+ <div class="name">yonghutiyanjiankong-off</div>
1476
+ <div class="code-name">#icon-yonghutiyanjiankong-off</div>
1477
+ </li>
1478
+
1479
+ <li class="dib">
1480
+ <svg class="icon svg-icon" aria-hidden="true">
1481
+ <use xlink:href="#icon-caidan-zidingyiBIbaobiao"></use>
1482
+ </svg>
1483
+ <div class="name">caidan-zidingyiBIbaobiao</div>
1484
+ <div class="code-name">#icon-caidan-zidingyiBIbaobiao</div>
1485
+ </li>
1486
+
1487
+ <li class="dib">
1488
+ <svg class="icon svg-icon" aria-hidden="true">
1489
+ <use xlink:href="#icon-caidan-guanggaojiance"></use>
1490
+ </svg>
1491
+ <div class="name">caidan-guanggaojiance</div>
1492
+ <div class="code-name">#icon-caidan-guanggaojiance</div>
1493
+ </li>
1494
+
1495
+ <li class="dib">
1496
+ <svg class="icon svg-icon" aria-hidden="true">
1497
+ <use xlink:href="#icon-caidan-CEP"></use>
1498
+ </svg>
1499
+ <div class="name">caidan-CEP</div>
1500
+ <div class="code-name">#icon-caidan-CEP</div>
1501
+ </li>
1502
+
1503
+ <li class="dib">
1504
+ <svg class="icon svg-icon" aria-hidden="true">
1505
+ <use xlink:href="#icon-caidan-shujuji"></use>
1506
+ </svg>
1507
+ <div class="name">caidan-shujuji</div>
1508
+ <div class="code-name">#icon-caidan-shujuji</div>
1509
+ </li>
1510
+
1511
+ <li class="dib">
1512
+ <svg class="icon svg-icon" aria-hidden="true">
1513
+ <use xlink:href="#icon-caidan-shujujieru"></use>
1514
+ </svg>
1515
+ <div class="name">caidan-shujujieru</div>
1516
+ <div class="code-name">#icon-caidan-shujujieru</div>
1517
+ </li>
1518
+
1519
+ <li class="dib">
1520
+ <svg class="icon svg-icon" aria-hidden="true">
1521
+ <use xlink:href="#icon-caidan-fenxishujukanban"></use>
1522
+ </svg>
1523
+ <div class="name">caidan-fenxishujukanban</div>
1524
+ <div class="code-name">#icon-caidan-fenxishujukanban</div>
1525
+ </li>
1526
+
1527
+ <li class="dib">
1528
+ <svg class="icon svg-icon" aria-hidden="true">
1529
+ <use xlink:href="#icon-a-caidan-yonghuzengchang2A3R"></use>
1530
+ </svg>
1531
+ <div class="name">a-caidan-yonghuzengchang2A3R</div>
1532
+ <div class="code-name">#icon-a-caidan-yonghuzengchang2A3R</div>
1533
+ </li>
1534
+
1535
+ <li class="dib">
1536
+ <svg class="icon svg-icon" aria-hidden="true">
1537
+ <use xlink:href="#icon-xinbanlogo-jichuban"></use>
1538
+ </svg>
1539
+ <div class="name">xinbanlogo-jichuban</div>
1540
+ <div class="code-name">#icon-xinbanlogo-jichuban</div>
1541
+ </li>
1542
+
1543
+ <li class="dib">
1544
+ <svg class="icon svg-icon" aria-hidden="true">
1545
+ <use xlink:href="#icon-yingxiaohuodong"></use>
1546
+ </svg>
1547
+ <div class="name">yingxiaohuodong</div>
1548
+ <div class="code-name">#icon-yingxiaohuodong</div>
1549
+ </li>
1550
+
1551
+ <li class="dib">
1552
+ <svg class="icon svg-icon" aria-hidden="true">
1553
+ <use xlink:href="#icon-caidan-yunyinggailanbaobiao"></use>
1554
+ </svg>
1555
+ <div class="name">caidan-yunyinggailanbaobiao</div>
1556
+ <div class="code-name">#icon-caidan-yunyinggailanbaobiao</div>
1557
+ </li>
1558
+
1559
+ <li class="dib">
1560
+ <svg class="icon svg-icon" aria-hidden="true">
1561
+ <use xlink:href="#icon-yewuchangjing"></use>
1562
+ </svg>
1563
+ <div class="name">yewuchangjing</div>
1564
+ <div class="code-name">#icon-yewuchangjing</div>
1565
+ </li>
1566
+
1567
+ <li class="dib">
1568
+ <svg class="icon svg-icon" aria-hidden="true">
1569
+ <use xlink:href="#icon-yasuobao"></use>
1570
+ </svg>
1571
+ <div class="name">yasuobao</div>
1572
+ <div class="code-name">#icon-yasuobao</div>
1573
+ </li>
1574
+
1575
+ <li class="dib">
1576
+ <svg class="icon svg-icon" aria-hidden="true">
1577
+ <use xlink:href="#icon-shujuzhiliang"></use>
1578
+ </svg>
1579
+ <div class="name">shujuzhiliang</div>
1580
+ <div class="code-name">#icon-shujuzhiliang</div>
1581
+ </li>
1582
+
1583
+ <li class="dib">
1584
+ <svg class="icon svg-icon" aria-hidden="true">
1585
+ <use xlink:href="#icon-caidan-weixinshengtaiyunying"></use>
1586
+ </svg>
1587
+ <div class="name">caidan-weixinshengtaiyunying</div>
1588
+ <div class="code-name">#icon-caidan-weixinshengtaiyunying</div>
1589
+ </li>
1590
+
1591
+ <li class="dib">
1592
+ <svg class="icon svg-icon" aria-hidden="true">
1593
+ <use xlink:href="#icon-caidan-yonghu"></use>
1594
+ </svg>
1595
+ <div class="name">caidan-yonghu</div>
1596
+ <div class="code-name">#icon-caidan-yonghu</div>
1597
+ </li>
1598
+
1599
+ <li class="dib">
1600
+ <svg class="icon svg-icon" aria-hidden="true">
1601
+ <use xlink:href="#icon-qunzulvcheng"></use>
1602
+ </svg>
1603
+ <div class="name">qunzulvcheng</div>
1604
+ <div class="code-name">#icon-qunzulvcheng</div>
1605
+ </li>
1606
+
1607
+ <li class="dib">
1608
+ <svg class="icon svg-icon" aria-hidden="true">
1609
+ <use xlink:href="#icon-morentouxiang"></use>
1610
+ </svg>
1611
+ <div class="name">morentouxiang</div>
1612
+ <div class="code-name">#icon-morentouxiang</div>
1613
+ </li>
1614
+
1615
+ <li class="dib">
1616
+ <svg class="icon svg-icon" aria-hidden="true">
1617
+ <use xlink:href="#icon-caidan-zhinengchuda"></use>
1618
+ </svg>
1619
+ <div class="name">caidan-zhinengchuda</div>
1620
+ <div class="code-name">#icon-caidan-zhinengchuda</div>
1621
+ </li>
1622
+
1623
+ <li class="dib">
1624
+ <svg class="icon svg-icon" aria-hidden="true">
1625
+ <use xlink:href="#icon-general"></use>
1626
+ </svg>
1627
+ <div class="name">general</div>
1628
+ <div class="code-name">#icon-general</div>
1629
+ </li>
1630
+
1631
+ <li class="dib">
1632
+ <svg class="icon svg-icon" aria-hidden="true">
1633
+ <use xlink:href="#icon-caidan-zidingyishujubaogao"></use>
1634
+ </svg>
1635
+ <div class="name">caidan-zidingyishujubaogao</div>
1636
+ <div class="code-name">#icon-caidan-zidingyishujubaogao</div>
1637
+ </li>
1638
+
1639
+ <li class="dib">
1640
+ <svg class="icon svg-icon" aria-hidden="true">
1641
+ <use xlink:href="#icon-chanpinbiaoqian"></use>
1642
+ </svg>
1643
+ <div class="name">chanpinbiaoqian</div>
1644
+ <div class="code-name">#icon-chanpinbiaoqian</div>
1645
+ </li>
1646
+
1647
+ <li class="dib">
1648
+ <svg class="icon svg-icon" aria-hidden="true">
1649
+ <use xlink:href="#icon-fenxigongjuxiang"></use>
1650
+ </svg>
1651
+ <div class="name">fenxigongjuxiang</div>
1652
+ <div class="code-name">#icon-fenxigongjuxiang</div>
1653
+ </li>
1654
+
1655
+ <li class="dib">
1656
+ <svg class="icon svg-icon" aria-hidden="true">
1657
+ <use xlink:href="#icon-caidan-fenxifangfalun"></use>
1658
+ </svg>
1659
+ <div class="name">caidan-fenxifangfalun</div>
1660
+ <div class="code-name">#icon-caidan-fenxifangfalun</div>
1661
+ </li>
1662
+
1663
+ <li class="dib">
1664
+ <svg class="icon svg-icon" aria-hidden="true">
1665
+ <use xlink:href="#icon-caidan-chanpindiedai"></use>
1666
+ </svg>
1667
+ <div class="name">caidan-chanpindiedai</div>
1668
+ <div class="code-name">#icon-caidan-chanpindiedai</div>
1669
+ </li>
1670
+
1671
+ <li class="dib">
1672
+ <svg class="icon svg-icon" aria-hidden="true">
1673
+ <use xlink:href="#icon-credit"></use>
1674
+ </svg>
1675
+ <div class="name">credit</div>
1676
+ <div class="code-name">#icon-credit</div>
1677
+ </li>
1678
+
1679
+ <li class="dib">
1680
+ <svg class="icon svg-icon" aria-hidden="true">
1681
+ <use xlink:href="#icon-logo-wenziban"></use>
1682
+ </svg>
1683
+ <div class="name">logo-wenziban</div>
1684
+ <div class="code-name">#icon-logo-wenziban</div>
1685
+ </li>
1686
+
1687
+ <li class="dib">
1688
+ <svg class="icon svg-icon" aria-hidden="true">
1689
+ <use xlink:href="#icon-yonghulvcheng"></use>
1690
+ </svg>
1691
+ <div class="name">yonghulvcheng</div>
1692
+ <div class="code-name">#icon-yonghulvcheng</div>
1693
+ </li>
1694
+
1695
+ <li class="dib">
1696
+ <svg class="icon svg-icon" aria-hidden="true">
1697
+ <use xlink:href="#icon-xinbanlogo-yiguoqi"></use>
1698
+ </svg>
1699
+ <div class="name">xinbanlogo-yiguoqi</div>
1700
+ <div class="code-name">#icon-xinbanlogo-yiguoqi</div>
1701
+ </li>
1702
+
1703
+ <li class="dib">
1704
+ <svg class="icon svg-icon" aria-hidden="true">
1705
+ <use xlink:href="#icon-yonghufenqun"></use>
1706
+ </svg>
1707
+ <div class="name">yonghufenqun</div>
1708
+ <div class="code-name">#icon-yonghufenqun</div>
1709
+ </li>
1710
+
1711
+ <li class="dib">
1712
+ <svg class="icon svg-icon" aria-hidden="true">
1713
+ <use xlink:href="#icon-caidan-idmapping"></use>
1714
+ </svg>
1715
+ <div class="name">caidan-idmapping</div>
1716
+ <div class="code-name">#icon-caidan-idmapping</div>
1717
+ </li>
1718
+
1719
+ <li class="dib">
1720
+ <svg class="icon svg-icon" aria-hidden="true">
1721
+ <use xlink:href="#icon-caidan-laiyuanguanli"></use>
1722
+ </svg>
1723
+ <div class="name">caidan-laiyuanguanli</div>
1724
+ <div class="code-name">#icon-caidan-laiyuanguanli</div>
1725
+ </li>
1726
+
1727
+ <li class="dib">
1728
+ <svg class="icon svg-icon" aria-hidden="true">
1729
+ <use xlink:href="#icon-logo"></use>
1730
+ </svg>
1731
+ <div class="name">logo</div>
1732
+ <div class="code-name">#icon-logo</div>
1733
+ </li>
1734
+
1735
+ <li class="dib">
1736
+ <svg class="icon svg-icon" aria-hidden="true">
1737
+ <use xlink:href="#icon-yingxiaosucai"></use>
1738
+ </svg>
1739
+ <div class="name">yingxiaosucai</div>
1740
+ <div class="code-name">#icon-yingxiaosucai</div>
1741
+ </li>
1742
+
1743
+ <li class="dib">
1744
+ <svg class="icon svg-icon" aria-hidden="true">
1745
+ <use xlink:href="#icon-shujukaifang"></use>
1746
+ </svg>
1747
+ <div class="name">shujukaifang</div>
1748
+ <div class="code-name">#icon-shujukaifang</div>
1749
+ </li>
1750
+
1751
+ <li class="dib">
1752
+ <svg class="icon svg-icon" aria-hidden="true">
1753
+ <use xlink:href="#icon-yingxiaokanban"></use>
1754
+ </svg>
1755
+ <div class="name">yingxiaokanban</div>
1756
+ <div class="code-name">#icon-yingxiaokanban</div>
1757
+ </li>
1758
+
1759
+ <li class="dib">
1760
+ <svg class="icon svg-icon" aria-hidden="true">
1761
+ <use xlink:href="#icon-yingxiaoshuju"></use>
1762
+ </svg>
1763
+ <div class="name">yingxiaoshuju</div>
1764
+ <div class="code-name">#icon-yingxiaoshuju</div>
1765
+ </li>
1766
+
1767
+ <li class="dib">
1768
+ <svg class="icon svg-icon" aria-hidden="true">
1769
+ <use xlink:href="#icon-caidan-maidianguanli"></use>
1770
+ </svg>
1771
+ <div class="name">caidan-maidianguanli</div>
1772
+ <div class="code-name">#icon-caidan-maidianguanli</div>
1773
+ </li>
1774
+
1775
+ <li class="dib">
1776
+ <svg class="icon svg-icon" aria-hidden="true">
1777
+ <use xlink:href="#icon-yonghutiyanjiankong"></use>
1778
+ </svg>
1779
+ <div class="name">yonghutiyanjiankong</div>
1780
+ <div class="code-name">#icon-yonghutiyanjiankong</div>
1781
+ </li>
1782
+
1783
+ <li class="dib">
1784
+ <svg class="icon svg-icon" aria-hidden="true">
1785
+ <use xlink:href="#icon-yingxiaoshoujufenxi"></use>
1786
+ </svg>
1787
+ <div class="name">yingxiaoshoujufenxi</div>
1788
+ <div class="code-name">#icon-yingxiaoshoujufenxi</div>
1789
+ </li>
1790
+
1791
+ <li class="dib">
1792
+ <svg class="icon svg-icon" aria-hidden="true">
1793
+ <use xlink:href="#icon-yingxiaoshezhi"></use>
1794
+ </svg>
1795
+ <div class="name">yingxiaoshezhi</div>
1796
+ <div class="code-name">#icon-yingxiaoshezhi</div>
1797
+ </li>
1798
+
1799
+ <li class="dib">
1800
+ <svg class="icon svg-icon" aria-hidden="true">
1801
+ <use xlink:href="#icon-xinbanlogo-qiyeban"></use>
1802
+ </svg>
1803
+ <div class="name">xinbanlogo-qiyeban</div>
1804
+ <div class="code-name">#icon-xinbanlogo-qiyeban</div>
1805
+ </li>
1806
+
1807
+ <li class="dib">
1808
+ <svg class="icon svg-icon" aria-hidden="true">
1809
+ <use xlink:href="#icon-logo-zhuanyeban"></use>
1810
+ </svg>
1811
+ <div class="name">logo-zhuanyeban</div>
1812
+ <div class="code-name">#icon-logo-zhuanyeban</div>
1813
+ </li>
1814
+
1815
+ <li class="dib">
1816
+ <svg class="icon svg-icon" aria-hidden="true">
1817
+ <use xlink:href="#icon-yingxiaozhongxin"></use>
1818
+ </svg>
1819
+ <div class="name">yingxiaozhongxin</div>
1820
+ <div class="code-name">#icon-yingxiaozhongxin</div>
1821
+ </li>
1822
+
1823
+ <li class="dib">
1824
+ <svg class="icon svg-icon" aria-hidden="true">
1825
+ <use xlink:href="#icon-xinbanlogo"></use>
1826
+ </svg>
1827
+ <div class="name">xinbanlogo</div>
1828
+ <div class="code-name">#icon-xinbanlogo</div>
1829
+ </li>
1830
+
1831
+ <li class="dib">
1832
+ <svg class="icon svg-icon" aria-hidden="true">
1833
+ <use xlink:href="#icon-yonghuyingxiao"></use>
1834
+ </svg>
1835
+ <div class="name">yonghuyingxiao</div>
1836
+ <div class="code-name">#icon-yonghuyingxiao</div>
1837
+ </li>
1838
+
1839
+ <li class="dib">
1840
+ <svg class="icon svg-icon" aria-hidden="true">
1841
+ <use xlink:href="#icon-xinbanlogo-shiyongban"></use>
1842
+ </svg>
1843
+ <div class="name">xinbanlogo-shiyongban</div>
1844
+ <div class="code-name">#icon-xinbanlogo-shiyongban</div>
1845
+ </li>
1846
+
1847
+ <li class="dib">
1848
+ <svg class="icon svg-icon" aria-hidden="true">
1849
+ <use xlink:href="#icon-xinyongkafenqi"></use>
1850
+ </svg>
1851
+ <div class="name">xinyongkafenqi</div>
1852
+ <div class="code-name">#icon-xinyongkafenqi</div>
1853
+ </li>
1854
+
1855
+ <li class="dib">
1856
+ <svg class="icon svg-icon" aria-hidden="true">
1857
+ <use xlink:href="#icon-yonghubiaoqian"></use>
1858
+ </svg>
1859
+ <div class="name">yonghubiaoqian</div>
1860
+ <div class="code-name">#icon-yonghubiaoqian</div>
1861
+ </li>
1862
+
1863
+ <li class="dib">
1864
+ <svg class="icon svg-icon" aria-hidden="true">
1865
+ <use xlink:href="#icon-zhinengyingxiaoduose"></use>
1866
+ </svg>
1867
+ <div class="name">zhinengyingxiaoduose</div>
1868
+ <div class="code-name">#icon-zhinengyingxiaoduose</div>
1869
+ </li>
1870
+
1871
+ <li class="dib">
1872
+ <svg class="icon svg-icon" aria-hidden="true">
1873
+ <use xlink:href="#icon-logo-qiyeban"></use>
1874
+ </svg>
1875
+ <div class="name">logo-qiyeban</div>
1876
+ <div class="code-name">#icon-logo-qiyeban</div>
1877
+ </li>
1878
+
1879
+ <li class="dib">
1880
+ <svg class="icon svg-icon" aria-hidden="true">
1881
+ <use xlink:href="#icon-logo-yiguoqi"></use>
1882
+ </svg>
1883
+ <div class="name">logo-yiguoqi</div>
1884
+ <div class="code-name">#icon-logo-yiguoqi</div>
1885
+ </li>
1886
+
1887
+ <li class="dib">
1888
+ <svg class="icon svg-icon" aria-hidden="true">
1889
+ <use xlink:href="#icon-xinyongkayewu"></use>
1890
+ </svg>
1891
+ <div class="name">xinyongkayewu</div>
1892
+ <div class="code-name">#icon-xinyongkayewu</div>
1893
+ </li>
1894
+
1895
+ <li class="dib">
1896
+ <svg class="icon svg-icon" aria-hidden="true">
1897
+ <use xlink:href="#icon-logo-shiyongban"></use>
1898
+ </svg>
1899
+ <div class="name">logo-shiyongban</div>
1900
+ <div class="code-name">#icon-logo-shiyongban</div>
1901
+ </li>
1902
+
1903
+ <li class="dib">
1904
+ <svg class="icon svg-icon" aria-hidden="true">
1905
+ <use xlink:href="#icon-logo-jichuban"></use>
1906
+ </svg>
1907
+ <div class="name">logo-jichuban</div>
1908
+ <div class="code-name">#icon-logo-jichuban</div>
1909
+ </li>
1910
+
1911
+ <li class="dib">
1912
+ <svg class="icon svg-icon" aria-hidden="true">
1913
+ <use xlink:href="#icon-xinbanlogo-zhuanyeban"></use>
1914
+ </svg>
1915
+ <div class="name">xinbanlogo-zhuanyeban</div>
1916
+ <div class="code-name">#icon-xinbanlogo-zhuanyeban</div>
1917
+ </li>
1918
+
1919
+ <li class="dib">
1920
+ <svg class="icon svg-icon" aria-hidden="true">
1921
+ <use xlink:href="#icon-cunkuanyewufenxi"></use>
1922
+ </svg>
1923
+ <div class="name">cunkuanyewufenxi</div>
1924
+ <div class="code-name">#icon-cunkuanyewufenxi</div>
1925
+ </li>
1926
+
1927
+ </ul>
1928
+ <div class="article markdown">
1929
+ <h2 id="symbol-">Symbol 引用</h2>
1930
+ <hr>
1931
+
1932
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1933
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1934
+ <ul>
1935
+ <li>支持多色图标了，不再受单色限制。</li>
1936
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1937
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1938
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1939
+ </ul>
1940
+ <p>使用步骤如下：</p>
1941
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1942
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1943
+ </code></pre>
1944
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1945
+ <pre><code class="language-html">&lt;style&gt;
1946
+ .icon {
1947
+ width: 1em;
1948
+ height: 1em;
1949
+ vertical-align: -0.15em;
1950
+ fill: currentColor;
1951
+ overflow: hidden;
1952
+ }
1953
+ &lt;/style&gt;
1954
+ </code></pre>
1955
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1956
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1957
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1958
+ &lt;/svg&gt;
1959
+ </code></pre>
1960
+ </div>
1961
+ </div>
1962
+
1963
+ </div>
1964
+ </div>
1965
+ <script>
1966
+ $(document).ready(function () {
1967
+ $('.tab-container .content:first').show()
1968
+
1969
+ $('#tabs li').click(function (e) {
1970
+ var tabContent = $('.tab-container .content')
1971
+ var index = $(this).index()
1972
+
1973
+ if ($(this).hasClass('active')) {
1974
+ return
1975
+ } else {
1976
+ $('#tabs li').removeClass('active')
1977
+ $(this).addClass('active')
1978
+
1979
+ tabContent.hide().eq(index).fadeIn()
1980
+ }
1981
+ })
1982
+ })
1983
+ </script>
1984
+ </body>
1985
+ </html>