@x-edu/live-player 0.0.21 → 0.0.23

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 (299) hide show
  1. package/.browserslistrc +10 -10
  2. package/.eslintignore +8 -8
  3. package/.eslintrc.js +26 -26
  4. package/.gem-mine +11 -11
  5. package/.postcssrc.js +6 -6
  6. package/README.md +145 -145
  7. package/babel.config.js +33 -33
  8. package/doc/develop.md +23 -23
  9. package/gem-mine.config.js +86 -86
  10. package/jest.config.js +9 -9
  11. package/jsconfig.json +15 -15
  12. package/mock/helper.js +8 -8
  13. package/mock/index.js +34 -34
  14. package/package.json +99 -99
  15. package/public/3rd/ali-player/alipayercomponents-1.0.8.min.js +26 -26
  16. package/public/3rd/ali-player/aliplayer-hls-min.js +27 -27
  17. package/public/3rd/ali-player/aliplayer-min.js +1 -1
  18. package/public/3rd/im-web-push/index.umd.js +14 -14
  19. package/public/JsBridge.js +1602 -1602
  20. package/public/fish/editor/themes/default/css/ueditor.css +1905 -1905
  21. package/public/fish/editor/third-party/codemirror/codemirror.css +104 -104
  22. package/public/fish/editor/third-party/codemirror/codemirror.js +3581 -3581
  23. package/public/fish/editor/third-party/zeroclipboard/ZeroClipboard.js +1255 -1255
  24. package/public/fish/editor/ueditor.all.min.js +16 -16
  25. package/public/fish/editor/ueditor.config.js +467 -467
  26. package/public/fish/icon/umd-4.1.2.js +1 -1
  27. package/public/fish/video/videoplayer.min.css +6 -6
  28. package/public/fish/video/videoplayer.min.js +31 -31
  29. package/public/fish/video/zh-CN.js +82 -82
  30. package/public/icon/demo.css +539 -539
  31. package/public/icon/demo_index.html +2189 -2189
  32. package/public/icon/iconfont.css +363 -363
  33. package/public/icon/iconfont.json +618 -618
  34. package/public/index.html +50 -50
  35. package/script/image/readme.md +77 -77
  36. package/script/postcss.js +48 -48
  37. package/src/App.jsx +24 -24
  38. package/src/asset/img/course/playing.svg +21 -21
  39. package/src/asset/img/icon-course-white.svg +3 -3
  40. package/src/asset/img/icon-course.svg +3 -3
  41. package/src/asset/img/icon-eye-white.svg +4 -4
  42. package/src/asset/img/icon-eye.svg +4 -4
  43. package/src/asset/img/icon-school-white.svg +3 -3
  44. package/src/asset/img/icon-school.svg +3 -3
  45. package/src/asset/img/loading.svg +52 -52
  46. package/src/asset/img/video-play.svg +6 -6
  47. package/src/asset/style/background.less +19 -19
  48. package/src/asset/style/banner.less +36 -36
  49. package/src/asset/style/base.less +74 -74
  50. package/src/asset/style/index.less +114 -114
  51. package/src/asset/style/reset-theme.less +141 -141
  52. package/src/asset/style/theme/index.less +55 -55
  53. package/src/asset/style/theme/party/global.less +20 -20
  54. package/src/asset/style/theme/party/override.less +57 -57
  55. package/src/asset/style/theme/test/global.less +18 -18
  56. package/src/asset/style/theme/test/override.less +45 -45
  57. package/src/asset/style/variable.less +12 -12
  58. package/src/component/AliPlayer/index.jsx +49 -49
  59. package/src/component/Avatar/index.jsx +50 -50
  60. package/src/component/Empty/index.jsx +34 -34
  61. package/src/component/Empty/index.module.less +37 -37
  62. package/src/component/IMChatroom/component/status/403.jsx +13 -13
  63. package/src/component/IMChatroom/component/status/404.jsx +13 -13
  64. package/src/component/IMChatroom/component/status/Error.jsx +23 -23
  65. package/src/component/IMChatroom/component/status/Loading.jsx +5 -5
  66. package/src/component/IMChatroom/config/app/config.js +118 -118
  67. package/src/component/IMChatroom/config/app/index.js +60 -60
  68. package/src/component/IMChatroom/config/env.js +5 -5
  69. package/src/component/IMChatroom/config/index.js +3 -3
  70. package/src/component/IMChatroom/config/request/config/base.js +124 -124
  71. package/src/component/IMChatroom/config/request/config/chatroom.js +26 -26
  72. package/src/component/IMChatroom/config/request/config/imCoreApi.js +21 -21
  73. package/src/component/IMChatroom/config/request/index.js +21 -21
  74. package/src/component/IMChatroom/config/request/proxy.js +39 -39
  75. package/src/component/IMChatroom/config/url.js +7 -7
  76. package/src/component/IMChatroom/constants/errorCode.js +9 -9
  77. package/src/component/IMChatroom/constants/index.js +84 -84
  78. package/src/component/IMChatroom/constants/origin.js +27 -27
  79. package/src/component/IMChatroom/context/chatroom.js +154 -154
  80. package/src/component/IMChatroom/context/connect.js +28 -28
  81. package/src/component/IMChatroom/i18n/en/index.json +73 -73
  82. package/src/component/IMChatroom/i18n/index.jsx +14 -14
  83. package/src/component/IMChatroom/i18n/language.js +9 -9
  84. package/src/component/IMChatroom/i18n/zh-CN/index.json +73 -73
  85. package/src/component/IMChatroom/index.jsx +49 -49
  86. package/src/component/IMChatroom/page/chat/index.jsx +27 -27
  87. package/src/component/IMChatroom/page/chat/messageEditor/index.jsx +375 -375
  88. package/src/component/IMChatroom/page/chat/messageList/index.jsx +354 -354
  89. package/src/component/IMChatroom/page/chat/stickedMessage/index.jsx +59 -59
  90. package/src/component/IMChatroom/page/chat/stickedMessage/style/index.module.less +7 -7
  91. package/src/component/IMChatroom/page/chat/style/index.module.less +51 -51
  92. package/src/component/IMChatroom/page/home/connect/index.jsx +188 -188
  93. package/src/component/IMChatroom/page/home/connect/status.jsx +124 -124
  94. package/src/component/IMChatroom/page/home/context/cmd.jsx +37 -37
  95. package/src/component/IMChatroom/page/home/context/index.jsx +67 -67
  96. package/src/component/IMChatroom/page/home/index.jsx +164 -164
  97. package/src/component/IMChatroom/page/home/notice/index.jsx +123 -123
  98. package/src/component/IMChatroom/page/home/notice/style/index.module.less +49 -49
  99. package/src/component/IMChatroom/page/home/style/index.module.less +110 -110
  100. package/src/component/IMChatroom/page/member/index.jsx +15 -15
  101. package/src/component/IMChatroom/page/member/memberCount/index.jsx +44 -44
  102. package/src/component/IMChatroom/page/member/memberList/index.jsx +121 -121
  103. package/src/component/IMChatroom/page/member/style/index.module.less +2 -2
  104. package/src/component/IMChatroom/sdk/bridge.js +39 -39
  105. package/src/component/IMChatroom/sdk/cs/constants.js +20 -20
  106. package/src/component/IMChatroom/sdk/cs/index.js +101 -101
  107. package/src/component/IMChatroom/sdk/imChatroom.js +15 -15
  108. package/src/component/IMChatroom/sdk/imcore/constants.js +128 -128
  109. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomDestroyed.js +5 -5
  110. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomInfoGetFail.js +5 -5
  111. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomKickedByAdmin.js +5 -5
  112. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomKickedBySelf.js +5 -5
  113. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomLoginFail.js +5 -5
  114. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomLoginSuccess.js +5 -5
  115. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomMemberLogin.js +5 -5
  116. package/src/component/IMChatroom/sdk/imcore/emitters/chatroomMemberLogout.js +5 -5
  117. package/src/component/IMChatroom/sdk/imcore/emitters/connectionConnected.js +5 -5
  118. package/src/component/IMChatroom/sdk/imcore/emitters/connectionConnecting.js +5 -5
  119. package/src/component/IMChatroom/sdk/imcore/emitters/connectionDisconnect.js +5 -5
  120. package/src/component/IMChatroom/sdk/imcore/emitters/index.js +57 -57
  121. package/src/component/IMChatroom/sdk/imcore/emitters/messageReceive.js +36 -36
  122. package/src/component/IMChatroom/sdk/imcore/index.js +178 -178
  123. package/src/component/IMChatroom/sdk/imcore/interceptors/request.js +7 -7
  124. package/src/component/IMChatroom/sdk/imcore/interceptors/response.js +5 -5
  125. package/src/component/IMChatroom/sdk/imcore/plugins/getAuth.js +64 -64
  126. package/src/component/IMChatroom/sdk/imcore/plugins/getConversationId.js +20 -20
  127. package/src/component/IMChatroom/sdk/imcore/plugins/getExtInfo.js +10 -10
  128. package/src/component/IMChatroom/sdk/imcore/plugins/getLoginInfo.js +48 -48
  129. package/src/component/IMChatroom/sdk/imcore/plugins/getPlatformType.js +12 -12
  130. package/src/component/IMChatroom/sdk/imcore/plugins/index.js +22 -22
  131. package/src/component/IMChatroom/sdk/imcore/util/format.js +177 -177
  132. package/src/component/IMChatroom/sdk/imcore/util/parser.js +35 -35
  133. package/src/component/IMChatroom/sdk/oms.js +18 -18
  134. package/src/component/IMChatroom/sdk/uc.js +3 -3
  135. package/src/component/IMChatroom/subscription/channel/app.js +5 -5
  136. package/src/component/IMChatroom/subscription/channel/ctl.js +22 -22
  137. package/src/component/IMChatroom/subscription/channel/member.js +40 -40
  138. package/src/component/IMChatroom/subscription/channel/message.js +13 -13
  139. package/src/component/IMChatroom/subscription/channel/ntf.js +86 -86
  140. package/src/component/IMChatroom/subscription/channel/tel.js +5 -5
  141. package/src/component/IMChatroom/subscription/channel/websocket.js +5 -5
  142. package/src/component/IMChatroom/subscription/event.js +37 -37
  143. package/src/component/IMChatroom/subscription/index.js +19 -19
  144. package/src/component/IMChatroom/util/account.js +8 -8
  145. package/src/component/IMChatroom/util/chatroom.js +255 -255
  146. package/src/component/IMChatroom/util/jsonBigInt.js +5 -5
  147. package/src/component/IMChatroom/util/location.js +12 -12
  148. package/src/component/Icon/index.jsx +16 -16
  149. package/src/component/Icon/index.module.less +2 -2
  150. package/src/component/Pagination/LocalPagination.jsx +27 -27
  151. package/src/component/Pagination/RemotePagination.jsx +32 -32
  152. package/src/component/Pagination/index.jsx +32 -31
  153. package/src/component/Pagination/index.module.less +117 -110
  154. package/src/component/PlayerTip/index.jsx +34 -34
  155. package/src/component/VideoBase/index.jsx +242 -242
  156. package/src/component/VideoBase/style.less +65 -65
  157. package/src/component/VideoBase/utils.js +81 -81
  158. package/src/component/mixin.less +9 -9
  159. package/src/component/status/403.jsx +15 -15
  160. package/src/component/status/404/index.jsx +73 -73
  161. package/src/component/status/404/index.module.less +36 -36
  162. package/src/component/status/Error/error.module.less +13 -13
  163. package/src/component/status/Error/index.jsx +47 -47
  164. package/src/component/status/Loading/img/loading.svg +52 -52
  165. package/src/component/status/Loading/index.jsx +31 -31
  166. package/src/component/status/Loading/index.less +56 -56
  167. package/src/component/status/None/index.jsx +20 -20
  168. package/src/component/status/None/index.module.less +35 -35
  169. package/src/component/status/Status/index.jsx +26 -26
  170. package/src/component/status/Status/index.module.less +8 -8
  171. package/src/config/constant/commonUrl.js +2 -2
  172. package/src/config/constant/user.js +6 -6
  173. package/src/config/context/site-config.js +48 -48
  174. package/src/config/env/index.js +5 -5
  175. package/src/config/env/local/index.js +13 -13
  176. package/src/config/env/ncet-xedu/api.js +175 -175
  177. package/src/config/env/ncet-xedu/app.js +12 -12
  178. package/src/config/env/ncet-xedu/cs.js +8 -8
  179. package/src/config/env/ncet-xedu/index.js +14 -14
  180. package/src/config/env/ncet-xedu/push.js +5 -5
  181. package/src/config/env/preproduction/api.js +144 -144
  182. package/src/config/env/preproduction/app.js +12 -12
  183. package/src/config/env/preproduction/cs.js +8 -8
  184. package/src/config/env/preproduction/index.js +14 -14
  185. package/src/config/env/preproduction/push.js +5 -5
  186. package/src/config/env/product/api.js +113 -113
  187. package/src/config/env/product/app.js +12 -12
  188. package/src/config/env/product/cs.js +5 -5
  189. package/src/config/env/product/index.js +14 -14
  190. package/src/config/env/product/push.js +5 -5
  191. package/src/config/live.js +80 -80
  192. package/src/config/publicLive.js +53 -53
  193. package/src/config/request/assessments.js +24 -24
  194. package/src/config/request/config-center.js +8 -8
  195. package/src/config/request/helper.js +166 -166
  196. package/src/config/request/im-broadcasts.js +12 -12
  197. package/src/config/request/live-activity-gateway.js +8 -8
  198. package/src/config/request/live-activity.js +13 -13
  199. package/src/config/request/raw.js +6 -6
  200. package/src/config/request/x-cloud-web.js +13 -13
  201. package/src/config/request/x-proxy.js +34 -34
  202. package/src/demo/Detail.jsx +11 -11
  203. package/src/demo/List.jsx +66 -64
  204. package/src/demo/index.jsx +17 -17
  205. package/src/detail/LineSwitch/index.jsx +71 -71
  206. package/src/detail/LiveCountDown/index.jsx +44 -44
  207. package/src/detail/LiveCountDown/index.module.less +31 -31
  208. package/src/detail/LiveOnlineCount/img/icon.svg +15 -15
  209. package/src/detail/LiveOnlineCount/index.jsx +68 -68
  210. package/src/detail/LiveOnlineCount/index.module.less +34 -34
  211. package/src/detail/LiveOnlineCount/util.js +74 -74
  212. package/src/detail/LiveStatus/AnchorOnTheWay.jsx +88 -88
  213. package/src/detail/LiveStatus/index.jsx +202 -202
  214. package/src/detail/LiveStatus/index.module.less +192 -192
  215. package/src/detail/LiveVideo/config.js +37 -37
  216. package/src/detail/LiveVideo/index.jsx +188 -188
  217. package/src/detail/LiveVideo/index.module.less +41 -41
  218. package/src/detail/NotLoginChatroom/index.jsx +37 -37
  219. package/src/detail/NotLoginChatroom/index.module.less +46 -46
  220. package/src/detail/RecordVideo/index.jsx +150 -150
  221. package/src/detail/RecordVideo/index.module.less +31 -31
  222. package/src/detail/ReplayVideo/index.jsx +93 -93
  223. package/src/detail/ReplayVideo/index.module.less +65 -65
  224. package/src/detail/const.js +20 -20
  225. package/src/detail/hook/usePullSource.js +82 -82
  226. package/src/detail/hook/usePullState.js +51 -51
  227. package/src/detail/index.jsx +482 -482
  228. package/src/detail/index.module.less +188 -188
  229. package/src/hook/useAsync.js +84 -84
  230. package/src/hook/useGoToPage.js +83 -83
  231. package/src/hook/useInterval.js +28 -28
  232. package/src/hook/useIsMounted.js +17 -17
  233. package/src/hook/useModuleByRole.js +53 -53
  234. package/src/hook/usePageScrollable.js +52 -52
  235. package/src/hook/usePortal.js +83 -83
  236. package/src/hook/useScrollRestore/index.js +32 -32
  237. package/src/hook/useScrollRestore/scrollContext.js +20 -20
  238. package/src/hook/useTrackRef.js +11 -11
  239. package/src/hook/useWindowSize.js +28 -28
  240. package/src/hook/useZoom.js +47 -47
  241. package/src/index.js +10 -10
  242. package/src/lib/getLiveOnlineCount.js +10 -10
  243. package/src/lib/getServiceConfig.js +102 -102
  244. package/src/list/Empty/index.jsx +20 -20
  245. package/src/list/Empty/index.module.less +23 -23
  246. package/src/list/ListItem/Action/index.jsx +100 -98
  247. package/src/list/ListItem/Action/index.module.less +19 -21
  248. package/src/list/ListItem/img/play.svg +15 -15
  249. package/src/list/ListItem/img/video.svg +3 -0
  250. package/src/list/ListItem/index.jsx +46 -28
  251. package/src/list/ListItem/index.module.less +152 -146
  252. package/src/list/index.module.less +35 -35
  253. package/src/service/common.js +73 -73
  254. package/src/service/content-mgr.js +73 -73
  255. package/src/service/im-group.js +12 -12
  256. package/src/service/im.js +7 -7
  257. package/src/service/imBroadcasts.js +33 -33
  258. package/src/service/like.js +134 -134
  259. package/src/service/manageApi.js +7 -7
  260. package/src/service/managePortal.js +6 -6
  261. package/src/service/myStudyRecord.js +93 -93
  262. package/src/service/navigation.js +47 -47
  263. package/src/service/ndMeeting.js +10 -10
  264. package/src/service/ndr.js +122 -122
  265. package/src/service/news.js +93 -93
  266. package/src/service/personalCenter.js +270 -270
  267. package/src/service/qualityCourse.js +31 -31
  268. package/src/service/recommend.js +81 -81
  269. package/src/service/school.js +323 -323
  270. package/src/service/search.js +170 -170
  271. package/src/service/site-config.js +7 -7
  272. package/src/service/socialCensor.js +45 -45
  273. package/src/service/specialEdu.js +31 -31
  274. package/src/service/suggestion.js +85 -85
  275. package/src/service/syncClassroom.js +321 -321
  276. package/src/service/tCourse.js +204 -204
  277. package/src/service/tchTraining.js +37 -37
  278. package/src/service/uc.js +45 -45
  279. package/src/util/app.js +1 -1
  280. package/src/util/array.js +3 -3
  281. package/src/util/auth/func.js +57 -57
  282. package/src/util/date.js +53 -53
  283. package/src/util/env.js +9 -9
  284. package/src/util/getTimestamp.js +10 -10
  285. package/src/util/hof.js +105 -105
  286. package/src/util/live/index.js +42 -42
  287. package/src/util/netUrl.js +35 -35
  288. package/src/util/object.js +13 -13
  289. package/src/util/push/index.js +58 -58
  290. package/src/util/request.js +227 -227
  291. package/src/util/type.js +17 -17
  292. package/src/util/url.js +203 -203
  293. package/src/util/video.js +26 -26
  294. package/test/setup.js +21 -21
  295. package/test/unit/component/header/logo.spec.jsx +8 -8
  296. package/test/unit/helper.jsx +25 -25
  297. package/test/unit/util/date.spec.js +40 -40
  298. package/dist/XEduLivePlayer.common.js +0 -72605
  299. package/dist/XEduLivePlayerPre.common.js +0 -72625
package/public/icon/demo_index.html CHANGED
@@ -1,2189 +1,2189 @@
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=3678441" 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">&#xe654;</span>
59
- <div class="name">icon_课程_fill</div>
60
- <div class="code-name">&amp;#xe654;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon iconfont">&#xe653;</span>
65
- <div class="name">web_icon_时间_fill</div>
66
- <div class="code-name">&amp;#xe653;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon iconfont">&#xe652;</span>
71
- <div class="name">icon_研修活动_fill</div>
72
- <div class="code-name">&amp;#xe652;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon iconfont">&#xe7e9;</span>
77
- <div class="name">app_icon_企业_line</div>
78
- <div class="code-name">&amp;#xe7e9;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon iconfont">&#xe7e8;</span>
83
- <div class="name">live_fill</div>
84
- <div class="code-name">&amp;#xe7e8;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon iconfont">&#xe7e7;</span>
89
- <div class="name">app_icon_time_linear</div>
90
- <div class="code-name">&amp;#xe7e7;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon iconfont">&#xe64e;</span>
95
- <div class="name">app_icon_课本_line 1</div>
96
- <div class="code-name">&amp;#xe64e;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon iconfont">&#xe64f;</span>
101
- <div class="name">app_icon_课本_line</div>
102
- <div class="code-name">&amp;#xe64f;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon iconfont">&#xe650;</span>
107
- <div class="name">app_icon_application_linear</div>
108
- <div class="code-name">&amp;#xe650;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon iconfont">&#xe651;</span>
113
- <div class="name">选择_full-selection</div>
114
- <div class="code-name">&amp;#xe651;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon iconfont">&#xe64d;</span>
119
- <div class="name">web_icon_课时_fill</div>
120
- <div class="code-name">&amp;#xe64d;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon iconfont">&#xe641;</span>
125
- <div class="name">app_icon_播放_fill</div>
126
- <div class="code-name">&amp;#xe641;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon iconfont">&#xe642;</span>
131
- <div class="name">app_icon_反馈_fill</div>
132
- <div class="code-name">&amp;#xe642;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon iconfont">&#xe643;</span>
137
- <div class="name">app_icon_点赞_fill</div>
138
- <div class="code-name">&amp;#xe643;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon iconfont">&#xe644;</span>
143
- <div class="name">app_icon_下载_fill</div>
144
- <div class="code-name">&amp;#xe644;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon iconfont">&#xe645;</span>
149
- <div class="name">app_icon_收藏_fill</div>
150
- <div class="code-name">&amp;#xe645;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon iconfont">&#xe646;</span>
155
- <div class="name">app_icon_评分_fill</div>
156
- <div class="code-name">&amp;#xe646;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon iconfont">&#xe647;</span>
161
- <div class="name">web__icon_单元_fill</div>
162
- <div class="code-name">&amp;#xe647;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon iconfont">&#xe648;</span>
167
- <div class="name">web_icon_粉丝_fill</div>
168
- <div class="code-name">&amp;#xe648;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon iconfont">&#xe649;</span>
173
- <div class="name">app_icon_暂停_fill</div>
174
- <div class="code-name">&amp;#xe649;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon iconfont">&#xe64a;</span>
179
- <div class="name">web__icon_作者_fill</div>
180
- <div class="code-name">&amp;#xe64a;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon iconfont">&#xe64b;</span>
185
- <div class="name">web_icon_课本_fill</div>
186
- <div class="code-name">&amp;#xe64b;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon iconfont">&#xe64c;</span>
191
- <div class="name">web_icon_关注_fill</div>
192
- <div class="code-name">&amp;#xe64c;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon iconfont">&#xe62e;</span>
197
- <div class="name">app_icon_更多_line</div>
198
- <div class="code-name">&amp;#xe62e;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon iconfont">&#xe635;</span>
203
- <div class="name">app_icon_链接_line</div>
204
- <div class="code-name">&amp;#xe635;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon iconfont">&#xe636;</span>
209
- <div class="name">app_icon_点赞_line</div>
210
- <div class="code-name">&amp;#xe636;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon iconfont">&#xe637;</span>
215
- <div class="name">app_icon_课本_line</div>
216
- <div class="code-name">&amp;#xe637;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon iconfont">&#xe638;</span>
221
- <div class="name">app_icon_投屏_line</div>
222
- <div class="code-name">&amp;#xe638;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon iconfont">&#xe639;</span>
227
- <div class="name">app_icon_讨论_line</div>
228
- <div class="code-name">&amp;#xe639;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon iconfont">&#xe63a;</span>
233
- <div class="name">app_icon_收藏_line</div>
234
- <div class="code-name">&amp;#xe63a;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon iconfont">&#xe63b;</span>
239
- <div class="name">app_icon_循环_line</div>
240
- <div class="code-name">&amp;#xe63b;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon iconfont">&#xe63c;</span>
245
- <div class="name">app_icon_下载_line</div>
246
- <div class="code-name">&amp;#xe63c;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon iconfont">&#xe63d;</span>
251
- <div class="name">app_icon_全屏_line</div>
252
- <div class="code-name">&amp;#xe63d;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon iconfont">&#xe63e;</span>
257
- <div class="name">app_icon_课后练习_line</div>
258
- <div class="code-name">&amp;#xe63e;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon iconfont">&#xe63f;</span>
263
- <div class="name">app_icon_转发_line</div>
264
- <div class="code-name">&amp;#xe63f;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon iconfont">&#xe640;</span>
269
- <div class="name">app_icon_作业_line-2</div>
270
- <div class="code-name">&amp;#xe640;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon iconfont">&#xe62c;</span>
275
- <div class="name">app_icon_application_linear</div>
276
- <div class="code-name">&amp;#xe62c;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon iconfont">&#xe62d;</span>
281
- <div class="name">app_icon_land_linear</div>
282
- <div class="code-name">&amp;#xe62d;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon iconfont">&#xe62f;</span>
287
- <div class="name">app_icon_explain_linear</div>
288
- <div class="code-name">&amp;#xe62f;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon iconfont">&#xe630;</span>
293
- <div class="name">app_icon_problem_linear</div>
294
- <div class="code-name">&amp;#xe630;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon iconfont">&#xe631;</span>
299
- <div class="name">app_icon_play_linear</div>
300
- <div class="code-name">&amp;#xe631;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon iconfont">&#xe632;</span>
305
- <div class="name">app_icon_search_linear</div>
306
- <div class="code-name">&amp;#xe632;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon iconfont">&#xe633;</span>
311
- <div class="name">app_icon_equipment_linear</div>
312
- <div class="code-name">&amp;#xe633;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon iconfont">&#xe634;</span>
317
- <div class="name">app_icon_administrators_linear</div>
318
- <div class="code-name">&amp;#xe634;</div>
319
- </li>
320
-
321
- <li class="dib">
322
- <span class="icon iconfont">&#xe61f;</span>
323
- <div class="name">icon_upload_cloud_line</div>
324
- <div class="code-name">&amp;#xe61f;</div>
325
- </li>
326
-
327
- <li class="dib">
328
- <span class="icon iconfont">&#xe620;</span>
329
- <div class="name">icon_刷新_line</div>
330
- <div class="code-name">&amp;#xe620;</div>
331
- </li>
332
-
333
- <li class="dib">
334
- <span class="icon iconfont">&#xe621;</span>
335
- <div class="name">icon_预览_linear</div>
336
- <div class="code-name">&amp;#xe621;</div>
337
- </li>
338
-
339
- <li class="dib">
340
- <span class="icon iconfont">&#xe622;</span>
341
- <div class="name">icon_more_fill</div>
342
- <div class="code-name">&amp;#xe622;</div>
343
- </li>
344
-
345
- <li class="dib">
346
- <span class="icon iconfont">&#xe623;</span>
347
- <div class="name">icon_calendarCheck_line</div>
348
- <div class="code-name">&amp;#xe623;</div>
349
- </li>
350
-
351
- <li class="dib">
352
- <span class="icon iconfont">&#xe624;</span>
353
- <div class="name">icon_userFollow_line</div>
354
- <div class="code-name">&amp;#xe624;</div>
355
- </li>
356
-
357
- <li class="dib">
358
- <span class="icon iconfont">&#xe625;</span>
359
- <div class="name">icon_下载2_line</div>
360
- <div class="code-name">&amp;#xe625;</div>
361
- </li>
362
-
363
- <li class="dib">
364
- <span class="icon iconfont">&#xe626;</span>
365
- <div class="name">icon_打卡_line</div>
366
- <div class="code-name">&amp;#xe626;</div>
367
- </li>
368
-
369
- <li class="dib">
370
- <span class="icon iconfont">&#xe627;</span>
371
- <div class="name">icon_编辑_line</div>
372
- <div class="code-name">&amp;#xe627;</div>
373
- </li>
374
-
375
- <li class="dib">
376
- <span class="icon iconfont">&#xe628;</span>
377
- <div class="name">icon_filter-line</div>
378
- <div class="code-name">&amp;#xe628;</div>
379
- </li>
380
-
381
- <li class="dib">
382
- <span class="icon iconfont">&#xe629;</span>
383
- <div class="name">icon_download-fill</div>
384
- <div class="code-name">&amp;#xe629;</div>
385
- </li>
386
-
387
- <li class="dib">
388
- <span class="icon iconfont">&#xe62a;</span>
389
- <div class="name">icon_笑脸_line</div>
390
- <div class="code-name">&amp;#xe62a;</div>
391
- </li>
392
-
393
- <li class="dib">
394
- <span class="icon iconfont">&#xe62b;</span>
395
- <div class="name">icon_closeCircle_line</div>
396
- <div class="code-name">&amp;#xe62b;</div>
397
- </li>
398
-
399
- <li class="dib">
400
- <span class="icon iconfont">&#xe61e;</span>
401
- <div class="name">icon_close-fill</div>
402
- <div class="code-name">&amp;#xe61e;</div>
403
- </li>
404
-
405
- <li class="dib">
406
- <span class="icon iconfont">&#xe7e5;</span>
407
- <div class="name">icon_earth_linear</div>
408
- <div class="code-name">&amp;#xe7e5;</div>
409
- </li>
410
-
411
- <li class="dib">
412
- <span class="icon iconfont">&#xe7e4;</span>
413
- <div class="name">icon_delete_linear</div>
414
- <div class="code-name">&amp;#xe7e4;</div>
415
- </li>
416
-
417
- <li class="dib">
418
- <span class="icon iconfont">&#xe61d;</span>
419
- <div class="name">icon_teaching_linear</div>
420
- <div class="code-name">&amp;#xe61d;</div>
421
- </li>
422
-
423
- <li class="dib">
424
- <span class="icon iconfont">&#xe61a;</span>
425
- <div class="name">icon_live_fill</div>
426
- <div class="code-name">&amp;#xe61a;</div>
427
- </li>
428
-
429
- <li class="dib">
430
- <span class="icon iconfont">&#xe61b;</span>
431
- <div class="name">icon_checkbox_fill</div>
432
- <div class="code-name">&amp;#xe61b;</div>
433
- </li>
434
-
435
- <li class="dib">
436
- <span class="icon iconfont">&#xe61c;</span>
437
- <div class="name">icon_processing_fill</div>
438
- <div class="code-name">&amp;#xe61c;</div>
439
- </li>
440
-
441
- <li class="dib">
442
- <span class="icon iconfont">&#xe603;</span>
443
- <div class="name">icon_arrowUp_linear</div>
444
- <div class="code-name">&amp;#xe603;</div>
445
- </li>
446
-
447
- <li class="dib">
448
- <span class="icon iconfont">&#xe604;</span>
449
- <div class="name">icon_arrowDropdown_linear</div>
450
- <div class="code-name">&amp;#xe604;</div>
451
- </li>
452
-
453
- <li class="dib">
454
- <span class="icon iconfont">&#xe605;</span>
455
- <div class="name">icon_arrowRight_linear</div>
456
- <div class="code-name">&amp;#xe605;</div>
457
- </li>
458
-
459
- <li class="dib">
460
- <span class="icon iconfont">&#xe606;</span>
461
- <div class="name">icon_checkbox_linear</div>
462
- <div class="code-name">&amp;#xe606;</div>
463
- </li>
464
-
465
- <li class="dib">
466
- <span class="icon iconfont">&#xe607;</span>
467
- <div class="name">icon_arrowLeft_linear</div>
468
- <div class="code-name">&amp;#xe607;</div>
469
- </li>
470
-
471
- <li class="dib">
472
- <span class="icon iconfont">&#xe608;</span>
473
- <div class="name">icon_download2_linear</div>
474
- <div class="code-name">&amp;#xe608;</div>
475
- </li>
476
-
477
- <li class="dib">
478
- <span class="icon iconfont">&#xe609;</span>
479
- <div class="name">icon_fileList_linear</div>
480
- <div class="code-name">&amp;#xe609;</div>
481
- </li>
482
-
483
- <li class="dib">
484
- <span class="icon iconfont">&#xe615;</span>
485
- <div class="name">icon_fileVideo_linear</div>
486
- <div class="code-name">&amp;#xe615;</div>
487
- </li>
488
-
489
- <li class="dib">
490
- <span class="icon iconfont">&#xe616;</span>
491
- <div class="name">icon_download_linear</div>
492
- <div class="code-name">&amp;#xe616;</div>
493
- </li>
494
-
495
- <li class="dib">
496
- <span class="icon iconfont">&#xe617;</span>
497
- <div class="name">icon_search_linear</div>
498
- <div class="code-name">&amp;#xe617;</div>
499
- </li>
500
-
501
- <li class="dib">
502
- <span class="icon iconfont">&#xe618;</span>
503
- <div class="name">icon_toggle_linear</div>
504
- <div class="code-name">&amp;#xe618;</div>
505
- </li>
506
-
507
- <li class="dib">
508
- <span class="icon iconfont">&#xe619;</span>
509
- <div class="name">icon_star_linear</div>
510
- <div class="code-name">&amp;#xe619;</div>
511
- </li>
512
-
513
- <li class="dib">
514
- <span class="icon iconfont">&#xe60a;</span>
515
- <div class="name">icon_fileText_fill</div>
516
- <div class="code-name">&amp;#xe60a;</div>
517
- </li>
518
-
519
- <li class="dib">
520
- <span class="icon iconfont">&#xe60b;</span>
521
- <div class="name">icon_evaluate_fill</div>
522
- <div class="code-name">&amp;#xe60b;</div>
523
- </li>
524
-
525
- <li class="dib">
526
- <span class="icon iconfont">&#xe60c;</span>
527
- <div class="name">icon_fileVideo_fill</div>
528
- <div class="code-name">&amp;#xe60c;</div>
529
- </li>
530
-
531
- <li class="dib">
532
- <span class="icon iconfont">&#xe60d;</span>
533
- <div class="name">icon_feedback_fill</div>
534
- <div class="code-name">&amp;#xe60d;</div>
535
- </li>
536
-
537
- <li class="dib">
538
- <span class="icon iconfont">&#xe60e;</span>
539
- <div class="name">icon_information_fill</div>
540
- <div class="code-name">&amp;#xe60e;</div>
541
- </li>
542
-
543
- <li class="dib">
544
- <span class="icon iconfont">&#xe60f;</span>
545
- <div class="name">icon_star_fill</div>
546
- <div class="code-name">&amp;#xe60f;</div>
547
- </li>
548
-
549
- <li class="dib">
550
- <span class="icon iconfont">&#xe610;</span>
551
- <div class="name">icon_play_fill</div>
552
- <div class="code-name">&amp;#xe610;</div>
553
- </li>
554
-
555
- <li class="dib">
556
- <span class="icon iconfont">&#xe611;</span>
557
- <div class="name">icon_file_fill</div>
558
- <div class="code-name">&amp;#xe611;</div>
559
- </li>
560
-
561
- <li class="dib">
562
- <span class="icon iconfont">&#xe612;</span>
563
- <div class="name">icon_hotel_fill</div>
564
- <div class="code-name">&amp;#xe612;</div>
565
- </li>
566
-
567
- <li class="dib">
568
- <span class="icon iconfont">&#xe613;</span>
569
- <div class="name">icon_thumb_fill</div>
570
- <div class="code-name">&amp;#xe613;</div>
571
- </li>
572
-
573
- <li class="dib">
574
- <span class="icon iconfont">&#xe614;</span>
575
- <div class="name">icon_draft_fill</div>
576
- <div class="code-name">&amp;#xe614;</div>
577
- </li>
578
-
579
- </ul>
580
- <div class="article markdown">
581
- <h2 id="unicode-">Unicode 引用</h2>
582
- <hr>
583
-
584
- <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
585
- <ul>
586
- <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
587
- <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
588
- </ul>
589
- <blockquote>
590
- <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
591
- </blockquote>
592
- <p>Unicode 使用步骤如下：</p>
593
- <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
594
- <pre><code class="language-css"
595
- >@font-face {
596
- font-family: 'iconfont';
597
- src: url('iconfont.woff2?t=1682865888041') format('woff2'),
598
- url('iconfont.woff?t=1682865888041') format('woff'),
599
- url('iconfont.ttf?t=1682865888041') format('truetype');
600
- }
601
- </code></pre>
602
- <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
603
- <pre><code class="language-css"
604
- >.iconfont {
605
- font-family: "iconfont" !important;
606
- font-size: 16px;
607
- font-style: normal;
608
- -webkit-font-smoothing: antialiased;
609
- -moz-osx-font-smoothing: grayscale;
610
- }
611
- </code></pre>
612
- <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
613
- <pre>
614
- <code class="language-html"
615
- >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
616
- </code></pre>
617
- <blockquote>
618
- <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
619
- </blockquote>
620
- </div>
621
- </div>
622
- <div class="content font-class">
623
- <ul class="icon_lists dib-box">
624
-
625
- <li class="dib">
626
- <span class="icon iconfont icon_kecheng_fill"></span>
627
- <div class="name">
628
- icon_课程_fill
629
- </div>
630
- <div class="code-name">.icon_kecheng_fill
631
- </div>
632
- </li>
633
-
634
- <li class="dib">
635
- <span class="icon iconfont web_icon_shijian_fill"></span>
636
- <div class="name">
637
- web_icon_时间_fill
638
- </div>
639
- <div class="code-name">.web_icon_shijian_fill
640
- </div>
641
- </li>
642
-
643
- <li class="dib">
644
- <span class="icon iconfont icon_yanxiuhuodong_fill"></span>
645
- <div class="name">
646
- icon_研修活动_fill
647
- </div>
648
- <div class="code-name">.icon_yanxiuhuodong_fill
649
- </div>
650
- </li>
651
-
652
- <li class="dib">
653
- <span class="icon iconfont app_icon_qiye_line"></span>
654
- <div class="name">
655
- app_icon_企业_line
656
- </div>
657
- <div class="code-name">.app_icon_qiye_line
658
- </div>
659
- </li>
660
-
661
- <li class="dib">
662
- <span class="icon iconfont live_fill"></span>
663
- <div class="name">
664
- live_fill
665
- </div>
666
- <div class="code-name">.live_fill
667
- </div>
668
- </li>
669
-
670
- <li class="dib">
671
- <span class="icon iconfont app_icon_time_linear"></span>
672
- <div class="name">
673
- app_icon_time_linear
674
- </div>
675
- <div class="code-name">.app_icon_time_linear
676
- </div>
677
- </li>
678
-
679
- <li class="dib">
680
- <span class="icon iconfont a-app_icon_keben_line1"></span>
681
- <div class="name">
682
- app_icon_课本_line 1
683
- </div>
684
- <div class="code-name">.a-app_icon_keben_line1
685
- </div>
686
- </li>
687
-
688
- <li class="dib">
689
- <span class="icon iconfont app_icon_keben_line1"></span>
690
- <div class="name">
691
- app_icon_课本_line
692
- </div>
693
- <div class="code-name">.app_icon_keben_line1
694
- </div>
695
- </li>
696
-
697
- <li class="dib">
698
- <span class="icon iconfont app_icon_application_linear1"></span>
699
- <div class="name">
700
- app_icon_application_linear
701
- </div>
702
- <div class="code-name">.app_icon_application_linear1
703
- </div>
704
- </li>
705
-
706
- <li class="dib">
707
- <span class="icon iconfont xuanze_full-selection"></span>
708
- <div class="name">
709
- 选择_full-selection
710
- </div>
711
- <div class="code-name">.xuanze_full-selection
712
- </div>
713
- </li>
714
-
715
- <li class="dib">
716
- <span class="icon iconfont web_icon_keshi_fill"></span>
717
- <div class="name">
718
- web_icon_课时_fill
719
- </div>
720
- <div class="code-name">.web_icon_keshi_fill
721
- </div>
722
- </li>
723
-
724
- <li class="dib">
725
- <span class="icon iconfont app_icon_bofang_fill"></span>
726
- <div class="name">
727
- app_icon_播放_fill
728
- </div>
729
- <div class="code-name">.app_icon_bofang_fill
730
- </div>
731
- </li>
732
-
733
- <li class="dib">
734
- <span class="icon iconfont app_icon_fankui_fill"></span>
735
- <div class="name">
736
- app_icon_反馈_fill
737
- </div>
738
- <div class="code-name">.app_icon_fankui_fill
739
- </div>
740
- </li>
741
-
742
- <li class="dib">
743
- <span class="icon iconfont app_icon_dianzan_fill"></span>
744
- <div class="name">
745
- app_icon_点赞_fill
746
- </div>
747
- <div class="code-name">.app_icon_dianzan_fill
748
- </div>
749
- </li>
750
-
751
- <li class="dib">
752
- <span class="icon iconfont app_icon_xiazai_fill"></span>
753
- <div class="name">
754
- app_icon_下载_fill
755
- </div>
756
- <div class="code-name">.app_icon_xiazai_fill
757
- </div>
758
- </li>
759
-
760
- <li class="dib">
761
- <span class="icon iconfont app_icon_shoucang_fill"></span>
762
- <div class="name">
763
- app_icon_收藏_fill
764
- </div>
765
- <div class="code-name">.app_icon_shoucang_fill
766
- </div>
767
- </li>
768
-
769
- <li class="dib">
770
- <span class="icon iconfont app_icon_pingfen_fill"></span>
771
- <div class="name">
772
- app_icon_评分_fill
773
- </div>
774
- <div class="code-name">.app_icon_pingfen_fill
775
- </div>
776
- </li>
777
-
778
- <li class="dib">
779
- <span class="icon iconfont web__icon_danyuan_fill"></span>
780
- <div class="name">
781
- web__icon_单元_fill
782
- </div>
783
- <div class="code-name">.web__icon_danyuan_fill
784
- </div>
785
- </li>
786
-
787
- <li class="dib">
788
- <span class="icon iconfont web_icon_fensi_fill"></span>
789
- <div class="name">
790
- web_icon_粉丝_fill
791
- </div>
792
- <div class="code-name">.web_icon_fensi_fill
793
- </div>
794
- </li>
795
-
796
- <li class="dib">
797
- <span class="icon iconfont app_icon_zanting_fill"></span>
798
- <div class="name">
799
- app_icon_暂停_fill
800
- </div>
801
- <div class="code-name">.app_icon_zanting_fill
802
- </div>
803
- </li>
804
-
805
- <li class="dib">
806
- <span class="icon iconfont web__icon_zuozhe_fill"></span>
807
- <div class="name">
808
- web__icon_作者_fill
809
- </div>
810
- <div class="code-name">.web__icon_zuozhe_fill
811
- </div>
812
- </li>
813
-
814
- <li class="dib">
815
- <span class="icon iconfont web_icon_keben_fill"></span>
816
- <div class="name">
817
- web_icon_课本_fill
818
- </div>
819
- <div class="code-name">.web_icon_keben_fill
820
- </div>
821
- </li>
822
-
823
- <li class="dib">
824
- <span class="icon iconfont web_icon_guanzhu_fill"></span>
825
- <div class="name">
826
- web_icon_关注_fill
827
- </div>
828
- <div class="code-name">.web_icon_guanzhu_fill
829
- </div>
830
- </li>
831
-
832
- <li class="dib">
833
- <span class="icon iconfont app_icon_gengduo_line"></span>
834
- <div class="name">
835
- app_icon_更多_line
836
- </div>
837
- <div class="code-name">.app_icon_gengduo_line
838
- </div>
839
- </li>
840
-
841
- <li class="dib">
842
- <span class="icon iconfont app_icon_lianjie_line"></span>
843
- <div class="name">
844
- app_icon_链接_line
845
- </div>
846
- <div class="code-name">.app_icon_lianjie_line
847
- </div>
848
- </li>
849
-
850
- <li class="dib">
851
- <span class="icon iconfont app_icon_dianzan_line"></span>
852
- <div class="name">
853
- app_icon_点赞_line
854
- </div>
855
- <div class="code-name">.app_icon_dianzan_line
856
- </div>
857
- </li>
858
-
859
- <li class="dib">
860
- <span class="icon iconfont app_icon_keben_line"></span>
861
- <div class="name">
862
- app_icon_课本_line
863
- </div>
864
- <div class="code-name">.app_icon_keben_line
865
- </div>
866
- </li>
867
-
868
- <li class="dib">
869
- <span class="icon iconfont app_icon_touping_line"></span>
870
- <div class="name">
871
- app_icon_投屏_line
872
- </div>
873
- <div class="code-name">.app_icon_touping_line
874
- </div>
875
- </li>
876
-
877
- <li class="dib">
878
- <span class="icon iconfont app_icon_taolun_line"></span>
879
- <div class="name">
880
- app_icon_讨论_line
881
- </div>
882
- <div class="code-name">.app_icon_taolun_line
883
- </div>
884
- </li>
885
-
886
- <li class="dib">
887
- <span class="icon iconfont app_icon_shoucang_line"></span>
888
- <div class="name">
889
- app_icon_收藏_line
890
- </div>
891
- <div class="code-name">.app_icon_shoucang_line
892
- </div>
893
- </li>
894
-
895
- <li class="dib">
896
- <span class="icon iconfont app_icon_xunhuan_line"></span>
897
- <div class="name">
898
- app_icon_循环_line
899
- </div>
900
- <div class="code-name">.app_icon_xunhuan_line
901
- </div>
902
- </li>
903
-
904
- <li class="dib">
905
- <span class="icon iconfont app_icon_xiazai_line"></span>
906
- <div class="name">
907
- app_icon_下载_line
908
- </div>
909
- <div class="code-name">.app_icon_xiazai_line
910
- </div>
911
- </li>
912
-
913
- <li class="dib">
914
- <span class="icon iconfont app_icon_quanping_line"></span>
915
- <div class="name">
916
- app_icon_全屏_line
917
- </div>
918
- <div class="code-name">.app_icon_quanping_line
919
- </div>
920
- </li>
921
-
922
- <li class="dib">
923
- <span class="icon iconfont app_icon_zuoye_line"></span>
924
- <div class="name">
925
- app_icon_课后练习_line
926
- </div>
927
- <div class="code-name">.app_icon_zuoye_line
928
- </div>
929
- </li>
930
-
931
- <li class="dib">
932
- <span class="icon iconfont app_icon_zhuanfa_line"></span>
933
- <div class="name">
934
- app_icon_转发_line
935
- </div>
936
- <div class="code-name">.app_icon_zhuanfa_line
937
- </div>
938
- </li>
939
-
940
- <li class="dib">
941
- <span class="icon iconfont app_icon_zuoye_line-2"></span>
942
- <div class="name">
943
- app_icon_作业_line-2
944
- </div>
945
- <div class="code-name">.app_icon_zuoye_line-2
946
- </div>
947
- </li>
948
-
949
- <li class="dib">
950
- <span class="icon iconfont app_icon_application_linear"></span>
951
- <div class="name">
952
- app_icon_application_linear
953
- </div>
954
- <div class="code-name">.app_icon_application_linear
955
- </div>
956
- </li>
957
-
958
- <li class="dib">
959
- <span class="icon iconfont app_icon_land_linear"></span>
960
- <div class="name">
961
- app_icon_land_linear
962
- </div>
963
- <div class="code-name">.app_icon_land_linear
964
- </div>
965
- </li>
966
-
967
- <li class="dib">
968
- <span class="icon iconfont app_icon_explain_linear"></span>
969
- <div class="name">
970
- app_icon_explain_linear
971
- </div>
972
- <div class="code-name">.app_icon_explain_linear
973
- </div>
974
- </li>
975
-
976
- <li class="dib">
977
- <span class="icon iconfont app_icon_problem_linear"></span>
978
- <div class="name">
979
- app_icon_problem_linear
980
- </div>
981
- <div class="code-name">.app_icon_problem_linear
982
- </div>
983
- </li>
984
-
985
- <li class="dib">
986
- <span class="icon iconfont app_icon_play_linear"></span>
987
- <div class="name">
988
- app_icon_play_linear
989
- </div>
990
- <div class="code-name">.app_icon_play_linear
991
- </div>
992
- </li>
993
-
994
- <li class="dib">
995
- <span class="icon iconfont app_icon_search_linear"></span>
996
- <div class="name">
997
- app_icon_search_linear
998
- </div>
999
- <div class="code-name">.app_icon_search_linear
1000
- </div>
1001
- </li>
1002
-
1003
- <li class="dib">
1004
- <span class="icon iconfont app_icon_equipment_linear"></span>
1005
- <div class="name">
1006
- app_icon_equipment_linear
1007
- </div>
1008
- <div class="code-name">.app_icon_equipment_linear
1009
- </div>
1010
- </li>
1011
-
1012
- <li class="dib">
1013
- <span class="icon iconfont app_icon_administrators_linear"></span>
1014
- <div class="name">
1015
- app_icon_administrators_linear
1016
- </div>
1017
- <div class="code-name">.app_icon_administrators_linear
1018
- </div>
1019
- </li>
1020
-
1021
- <li class="dib">
1022
- <span class="icon iconfont icon_upload_cloud_line"></span>
1023
- <div class="name">
1024
- icon_upload_cloud_line
1025
- </div>
1026
- <div class="code-name">.icon_upload_cloud_line
1027
- </div>
1028
- </li>
1029
-
1030
- <li class="dib">
1031
- <span class="icon iconfont icon_shuaxin_line"></span>
1032
- <div class="name">
1033
- icon_刷新_line
1034
- </div>
1035
- <div class="code-name">.icon_shuaxin_line
1036
- </div>
1037
- </li>
1038
-
1039
- <li class="dib">
1040
- <span class="icon iconfont icon_yulan_linear"></span>
1041
- <div class="name">
1042
- icon_预览_linear
1043
- </div>
1044
- <div class="code-name">.icon_yulan_linear
1045
- </div>
1046
- </li>
1047
-
1048
- <li class="dib">
1049
- <span class="icon iconfont icon_more_fill"></span>
1050
- <div class="name">
1051
- icon_more_fill
1052
- </div>
1053
- <div class="code-name">.icon_more_fill
1054
- </div>
1055
- </li>
1056
-
1057
- <li class="dib">
1058
- <span class="icon iconfont icon_calendarCheck_line"></span>
1059
- <div class="name">
1060
- icon_calendarCheck_line
1061
- </div>
1062
- <div class="code-name">.icon_calendarCheck_line
1063
- </div>
1064
- </li>
1065
-
1066
- <li class="dib">
1067
- <span class="icon iconfont icon_userFollow_line"></span>
1068
- <div class="name">
1069
- icon_userFollow_line
1070
- </div>
1071
- <div class="code-name">.icon_userFollow_line
1072
- </div>
1073
- </li>
1074
-
1075
- <li class="dib">
1076
- <span class="icon iconfont icon_xiazai2_line"></span>
1077
- <div class="name">
1078
- icon_下载2_line
1079
- </div>
1080
- <div class="code-name">.icon_xiazai2_line
1081
- </div>
1082
- </li>
1083
-
1084
- <li class="dib">
1085
- <span class="icon iconfont icon_daka_line"></span>
1086
- <div class="name">
1087
- icon_打卡_line
1088
- </div>
1089
- <div class="code-name">.icon_daka_line
1090
- </div>
1091
- </li>
1092
-
1093
- <li class="dib">
1094
- <span class="icon iconfont icon_bianji_line"></span>
1095
- <div class="name">
1096
- icon_编辑_line
1097
- </div>
1098
- <div class="code-name">.icon_bianji_line
1099
- </div>
1100
- </li>
1101
-
1102
- <li class="dib">
1103
- <span class="icon iconfont icon_filter-line"></span>
1104
- <div class="name">
1105
- icon_filter-line
1106
- </div>
1107
- <div class="code-name">.icon_filter-line
1108
- </div>
1109
- </li>
1110
-
1111
- <li class="dib">
1112
- <span class="icon iconfont icon_download-fill"></span>
1113
- <div class="name">
1114
- icon_download-fill
1115
- </div>
1116
- <div class="code-name">.icon_download-fill
1117
- </div>
1118
- </li>
1119
-
1120
- <li class="dib">
1121
- <span class="icon iconfont icon_xiaolian_line"></span>
1122
- <div class="name">
1123
- icon_笑脸_line
1124
- </div>
1125
- <div class="code-name">.icon_xiaolian_line
1126
- </div>
1127
- </li>
1128
-
1129
- <li class="dib">
1130
- <span class="icon iconfont icon_closeCircle_line"></span>
1131
- <div class="name">
1132
- icon_closeCircle_line
1133
- </div>
1134
- <div class="code-name">.icon_closeCircle_line
1135
- </div>
1136
- </li>
1137
-
1138
- <li class="dib">
1139
- <span class="icon iconfont icon_close-fill"></span>
1140
- <div class="name">
1141
- icon_close-fill
1142
- </div>
1143
- <div class="code-name">.icon_close-fill
1144
- </div>
1145
- </li>
1146
-
1147
- <li class="dib">
1148
- <span class="icon iconfont icon_earth_linear"></span>
1149
- <div class="name">
1150
- icon_earth_linear
1151
- </div>
1152
- <div class="code-name">.icon_earth_linear
1153
- </div>
1154
- </li>
1155
-
1156
- <li class="dib">
1157
- <span class="icon iconfont icon_delete_linear"></span>
1158
- <div class="name">
1159
- icon_delete_linear
1160
- </div>
1161
- <div class="code-name">.icon_delete_linear
1162
- </div>
1163
- </li>
1164
-
1165
- <li class="dib">
1166
- <span class="icon iconfont icon_teaching_linear"></span>
1167
- <div class="name">
1168
- icon_teaching_linear
1169
- </div>
1170
- <div class="code-name">.icon_teaching_linear
1171
- </div>
1172
- </li>
1173
-
1174
- <li class="dib">
1175
- <span class="icon iconfont icon_live_fill"></span>
1176
- <div class="name">
1177
- icon_live_fill
1178
- </div>
1179
- <div class="code-name">.icon_live_fill
1180
- </div>
1181
- </li>
1182
-
1183
- <li class="dib">
1184
- <span class="icon iconfont icon_checkbox_fill"></span>
1185
- <div class="name">
1186
- icon_checkbox_fill
1187
- </div>
1188
- <div class="code-name">.icon_checkbox_fill
1189
- </div>
1190
- </li>
1191
-
1192
- <li class="dib">
1193
- <span class="icon iconfont icon_processing_fill"></span>
1194
- <div class="name">
1195
- icon_processing_fill
1196
- </div>
1197
- <div class="code-name">.icon_processing_fill
1198
- </div>
1199
- </li>
1200
-
1201
- <li class="dib">
1202
- <span class="icon iconfont icon_arrowUp_linear"></span>
1203
- <div class="name">
1204
- icon_arrowUp_linear
1205
- </div>
1206
- <div class="code-name">.icon_arrowUp_linear
1207
- </div>
1208
- </li>
1209
-
1210
- <li class="dib">
1211
- <span class="icon iconfont icon_arrowDropdown_linear"></span>
1212
- <div class="name">
1213
- icon_arrowDropdown_linear
1214
- </div>
1215
- <div class="code-name">.icon_arrowDropdown_linear
1216
- </div>
1217
- </li>
1218
-
1219
- <li class="dib">
1220
- <span class="icon iconfont icon_arrowRight_linear"></span>
1221
- <div class="name">
1222
- icon_arrowRight_linear
1223
- </div>
1224
- <div class="code-name">.icon_arrowRight_linear
1225
- </div>
1226
- </li>
1227
-
1228
- <li class="dib">
1229
- <span class="icon iconfont icon_checkbox_linear"></span>
1230
- <div class="name">
1231
- icon_checkbox_linear
1232
- </div>
1233
- <div class="code-name">.icon_checkbox_linear
1234
- </div>
1235
- </li>
1236
-
1237
- <li class="dib">
1238
- <span class="icon iconfont icon_arrowLeft_linear"></span>
1239
- <div class="name">
1240
- icon_arrowLeft_linear
1241
- </div>
1242
- <div class="code-name">.icon_arrowLeft_linear
1243
- </div>
1244
- </li>
1245
-
1246
- <li class="dib">
1247
- <span class="icon iconfont icon_download2_linear"></span>
1248
- <div class="name">
1249
- icon_download2_linear
1250
- </div>
1251
- <div class="code-name">.icon_download2_linear
1252
- </div>
1253
- </li>
1254
-
1255
- <li class="dib">
1256
- <span class="icon iconfont icon_fileList_linear"></span>
1257
- <div class="name">
1258
- icon_fileList_linear
1259
- </div>
1260
- <div class="code-name">.icon_fileList_linear
1261
- </div>
1262
- </li>
1263
-
1264
- <li class="dib">
1265
- <span class="icon iconfont icon_fileVideo_linear"></span>
1266
- <div class="name">
1267
- icon_fileVideo_linear
1268
- </div>
1269
- <div class="code-name">.icon_fileVideo_linear
1270
- </div>
1271
- </li>
1272
-
1273
- <li class="dib">
1274
- <span class="icon iconfont icon_download_linear"></span>
1275
- <div class="name">
1276
- icon_download_linear
1277
- </div>
1278
- <div class="code-name">.icon_download_linear
1279
- </div>
1280
- </li>
1281
-
1282
- <li class="dib">
1283
- <span class="icon iconfont icon_search_linear"></span>
1284
- <div class="name">
1285
- icon_search_linear
1286
- </div>
1287
- <div class="code-name">.icon_search_linear
1288
- </div>
1289
- </li>
1290
-
1291
- <li class="dib">
1292
- <span class="icon iconfont icon_toggle_linear"></span>
1293
- <div class="name">
1294
- icon_toggle_linear
1295
- </div>
1296
- <div class="code-name">.icon_toggle_linear
1297
- </div>
1298
- </li>
1299
-
1300
- <li class="dib">
1301
- <span class="icon iconfont icon_star_linear"></span>
1302
- <div class="name">
1303
- icon_star_linear
1304
- </div>
1305
- <div class="code-name">.icon_star_linear
1306
- </div>
1307
- </li>
1308
-
1309
- <li class="dib">
1310
- <span class="icon iconfont icon_fileText_fill"></span>
1311
- <div class="name">
1312
- icon_fileText_fill
1313
- </div>
1314
- <div class="code-name">.icon_fileText_fill
1315
- </div>
1316
- </li>
1317
-
1318
- <li class="dib">
1319
- <span class="icon iconfont icon_evaluate_fill"></span>
1320
- <div class="name">
1321
- icon_evaluate_fill
1322
- </div>
1323
- <div class="code-name">.icon_evaluate_fill
1324
- </div>
1325
- </li>
1326
-
1327
- <li class="dib">
1328
- <span class="icon iconfont icon_fileVideo_fill"></span>
1329
- <div class="name">
1330
- icon_fileVideo_fill
1331
- </div>
1332
- <div class="code-name">.icon_fileVideo_fill
1333
- </div>
1334
- </li>
1335
-
1336
- <li class="dib">
1337
- <span class="icon iconfont icon_feedback_fill"></span>
1338
- <div class="name">
1339
- icon_feedback_fill
1340
- </div>
1341
- <div class="code-name">.icon_feedback_fill
1342
- </div>
1343
- </li>
1344
-
1345
- <li class="dib">
1346
- <span class="icon iconfont icon_information_fill"></span>
1347
- <div class="name">
1348
- icon_information_fill
1349
- </div>
1350
- <div class="code-name">.icon_information_fill
1351
- </div>
1352
- </li>
1353
-
1354
- <li class="dib">
1355
- <span class="icon iconfont icon_star_fill"></span>
1356
- <div class="name">
1357
- icon_star_fill
1358
- </div>
1359
- <div class="code-name">.icon_star_fill
1360
- </div>
1361
- </li>
1362
-
1363
- <li class="dib">
1364
- <span class="icon iconfont icon_play_fill"></span>
1365
- <div class="name">
1366
- icon_play_fill
1367
- </div>
1368
- <div class="code-name">.icon_play_fill
1369
- </div>
1370
- </li>
1371
-
1372
- <li class="dib">
1373
- <span class="icon iconfont icon_file_fill"></span>
1374
- <div class="name">
1375
- icon_file_fill
1376
- </div>
1377
- <div class="code-name">.icon_file_fill
1378
- </div>
1379
- </li>
1380
-
1381
- <li class="dib">
1382
- <span class="icon iconfont icon_hotel_fill"></span>
1383
- <div class="name">
1384
- icon_hotel_fill
1385
- </div>
1386
- <div class="code-name">.icon_hotel_fill
1387
- </div>
1388
- </li>
1389
-
1390
- <li class="dib">
1391
- <span class="icon iconfont icon_thumb_fill"></span>
1392
- <div class="name">
1393
- icon_thumb_fill
1394
- </div>
1395
- <div class="code-name">.icon_thumb_fill
1396
- </div>
1397
- </li>
1398
-
1399
- <li class="dib">
1400
- <span class="icon iconfont icon_draft_fill"></span>
1401
- <div class="name">
1402
- icon_draft_fill
1403
- </div>
1404
- <div class="code-name">.icon_draft_fill
1405
- </div>
1406
- </li>
1407
-
1408
- </ul>
1409
- <div class="article markdown">
1410
- <h2 id="font-class-">font-class 引用</h2>
1411
- <hr>
1412
-
1413
- <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
1414
- <p>与 Unicode 使用方式相比，具有如下特点：</p>
1415
- <ul>
1416
- <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
1417
- <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
1418
- </ul>
1419
- <p>使用步骤如下：</p>
1420
- <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
1421
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1422
- </code></pre>
1423
- <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1424
- <pre><code class="language-html">&lt;span class="iconfont xxx"&gt;&lt;/span&gt;
1425
- </code></pre>
1426
- <blockquote>
1427
- <p>"
1428
- iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
1429
- </blockquote>
1430
- </div>
1431
- </div>
1432
- <div class="content symbol">
1433
- <ul class="icon_lists dib-box">
1434
-
1435
- <li class="dib">
1436
- <svg class="icon svg-icon" aria-hidden="true">
1437
- <use xlink:href="#icon_kecheng_fill"></use>
1438
- </svg>
1439
- <div class="name">icon_课程_fill</div>
1440
- <div class="code-name">#icon_kecheng_fill</div>
1441
- </li>
1442
-
1443
- <li class="dib">
1444
- <svg class="icon svg-icon" aria-hidden="true">
1445
- <use xlink:href="#web_icon_shijian_fill"></use>
1446
- </svg>
1447
- <div class="name">web_icon_时间_fill</div>
1448
- <div class="code-name">#web_icon_shijian_fill</div>
1449
- </li>
1450
-
1451
- <li class="dib">
1452
- <svg class="icon svg-icon" aria-hidden="true">
1453
- <use xlink:href="#icon_yanxiuhuodong_fill"></use>
1454
- </svg>
1455
- <div class="name">icon_研修活动_fill</div>
1456
- <div class="code-name">#icon_yanxiuhuodong_fill</div>
1457
- </li>
1458
-
1459
- <li class="dib">
1460
- <svg class="icon svg-icon" aria-hidden="true">
1461
- <use xlink:href="#app_icon_qiye_line"></use>
1462
- </svg>
1463
- <div class="name">app_icon_企业_line</div>
1464
- <div class="code-name">#app_icon_qiye_line</div>
1465
- </li>
1466
-
1467
- <li class="dib">
1468
- <svg class="icon svg-icon" aria-hidden="true">
1469
- <use xlink:href="#live_fill"></use>
1470
- </svg>
1471
- <div class="name">live_fill</div>
1472
- <div class="code-name">#live_fill</div>
1473
- </li>
1474
-
1475
- <li class="dib">
1476
- <svg class="icon svg-icon" aria-hidden="true">
1477
- <use xlink:href="#app_icon_time_linear"></use>
1478
- </svg>
1479
- <div class="name">app_icon_time_linear</div>
1480
- <div class="code-name">#app_icon_time_linear</div>
1481
- </li>
1482
-
1483
- <li class="dib">
1484
- <svg class="icon svg-icon" aria-hidden="true">
1485
- <use xlink:href="#a-app_icon_keben_line1"></use>
1486
- </svg>
1487
- <div class="name">app_icon_课本_line 1</div>
1488
- <div class="code-name">#a-app_icon_keben_line1</div>
1489
- </li>
1490
-
1491
- <li class="dib">
1492
- <svg class="icon svg-icon" aria-hidden="true">
1493
- <use xlink:href="#app_icon_keben_line1"></use>
1494
- </svg>
1495
- <div class="name">app_icon_课本_line</div>
1496
- <div class="code-name">#app_icon_keben_line1</div>
1497
- </li>
1498
-
1499
- <li class="dib">
1500
- <svg class="icon svg-icon" aria-hidden="true">
1501
- <use xlink:href="#app_icon_application_linear1"></use>
1502
- </svg>
1503
- <div class="name">app_icon_application_linear</div>
1504
- <div class="code-name">#app_icon_application_linear1</div>
1505
- </li>
1506
-
1507
- <li class="dib">
1508
- <svg class="icon svg-icon" aria-hidden="true">
1509
- <use xlink:href="#xuanze_full-selection"></use>
1510
- </svg>
1511
- <div class="name">选择_full-selection</div>
1512
- <div class="code-name">#xuanze_full-selection</div>
1513
- </li>
1514
-
1515
- <li class="dib">
1516
- <svg class="icon svg-icon" aria-hidden="true">
1517
- <use xlink:href="#web_icon_keshi_fill"></use>
1518
- </svg>
1519
- <div class="name">web_icon_课时_fill</div>
1520
- <div class="code-name">#web_icon_keshi_fill</div>
1521
- </li>
1522
-
1523
- <li class="dib">
1524
- <svg class="icon svg-icon" aria-hidden="true">
1525
- <use xlink:href="#app_icon_bofang_fill"></use>
1526
- </svg>
1527
- <div class="name">app_icon_播放_fill</div>
1528
- <div class="code-name">#app_icon_bofang_fill</div>
1529
- </li>
1530
-
1531
- <li class="dib">
1532
- <svg class="icon svg-icon" aria-hidden="true">
1533
- <use xlink:href="#app_icon_fankui_fill"></use>
1534
- </svg>
1535
- <div class="name">app_icon_反馈_fill</div>
1536
- <div class="code-name">#app_icon_fankui_fill</div>
1537
- </li>
1538
-
1539
- <li class="dib">
1540
- <svg class="icon svg-icon" aria-hidden="true">
1541
- <use xlink:href="#app_icon_dianzan_fill"></use>
1542
- </svg>
1543
- <div class="name">app_icon_点赞_fill</div>
1544
- <div class="code-name">#app_icon_dianzan_fill</div>
1545
- </li>
1546
-
1547
- <li class="dib">
1548
- <svg class="icon svg-icon" aria-hidden="true">
1549
- <use xlink:href="#app_icon_xiazai_fill"></use>
1550
- </svg>
1551
- <div class="name">app_icon_下载_fill</div>
1552
- <div class="code-name">#app_icon_xiazai_fill</div>
1553
- </li>
1554
-
1555
- <li class="dib">
1556
- <svg class="icon svg-icon" aria-hidden="true">
1557
- <use xlink:href="#app_icon_shoucang_fill"></use>
1558
- </svg>
1559
- <div class="name">app_icon_收藏_fill</div>
1560
- <div class="code-name">#app_icon_shoucang_fill</div>
1561
- </li>
1562
-
1563
- <li class="dib">
1564
- <svg class="icon svg-icon" aria-hidden="true">
1565
- <use xlink:href="#app_icon_pingfen_fill"></use>
1566
- </svg>
1567
- <div class="name">app_icon_评分_fill</div>
1568
- <div class="code-name">#app_icon_pingfen_fill</div>
1569
- </li>
1570
-
1571
- <li class="dib">
1572
- <svg class="icon svg-icon" aria-hidden="true">
1573
- <use xlink:href="#web__icon_danyuan_fill"></use>
1574
- </svg>
1575
- <div class="name">web__icon_单元_fill</div>
1576
- <div class="code-name">#web__icon_danyuan_fill</div>
1577
- </li>
1578
-
1579
- <li class="dib">
1580
- <svg class="icon svg-icon" aria-hidden="true">
1581
- <use xlink:href="#web_icon_fensi_fill"></use>
1582
- </svg>
1583
- <div class="name">web_icon_粉丝_fill</div>
1584
- <div class="code-name">#web_icon_fensi_fill</div>
1585
- </li>
1586
-
1587
- <li class="dib">
1588
- <svg class="icon svg-icon" aria-hidden="true">
1589
- <use xlink:href="#app_icon_zanting_fill"></use>
1590
- </svg>
1591
- <div class="name">app_icon_暂停_fill</div>
1592
- <div class="code-name">#app_icon_zanting_fill</div>
1593
- </li>
1594
-
1595
- <li class="dib">
1596
- <svg class="icon svg-icon" aria-hidden="true">
1597
- <use xlink:href="#web__icon_zuozhe_fill"></use>
1598
- </svg>
1599
- <div class="name">web__icon_作者_fill</div>
1600
- <div class="code-name">#web__icon_zuozhe_fill</div>
1601
- </li>
1602
-
1603
- <li class="dib">
1604
- <svg class="icon svg-icon" aria-hidden="true">
1605
- <use xlink:href="#web_icon_keben_fill"></use>
1606
- </svg>
1607
- <div class="name">web_icon_课本_fill</div>
1608
- <div class="code-name">#web_icon_keben_fill</div>
1609
- </li>
1610
-
1611
- <li class="dib">
1612
- <svg class="icon svg-icon" aria-hidden="true">
1613
- <use xlink:href="#web_icon_guanzhu_fill"></use>
1614
- </svg>
1615
- <div class="name">web_icon_关注_fill</div>
1616
- <div class="code-name">#web_icon_guanzhu_fill</div>
1617
- </li>
1618
-
1619
- <li class="dib">
1620
- <svg class="icon svg-icon" aria-hidden="true">
1621
- <use xlink:href="#app_icon_gengduo_line"></use>
1622
- </svg>
1623
- <div class="name">app_icon_更多_line</div>
1624
- <div class="code-name">#app_icon_gengduo_line</div>
1625
- </li>
1626
-
1627
- <li class="dib">
1628
- <svg class="icon svg-icon" aria-hidden="true">
1629
- <use xlink:href="#app_icon_lianjie_line"></use>
1630
- </svg>
1631
- <div class="name">app_icon_链接_line</div>
1632
- <div class="code-name">#app_icon_lianjie_line</div>
1633
- </li>
1634
-
1635
- <li class="dib">
1636
- <svg class="icon svg-icon" aria-hidden="true">
1637
- <use xlink:href="#app_icon_dianzan_line"></use>
1638
- </svg>
1639
- <div class="name">app_icon_点赞_line</div>
1640
- <div class="code-name">#app_icon_dianzan_line</div>
1641
- </li>
1642
-
1643
- <li class="dib">
1644
- <svg class="icon svg-icon" aria-hidden="true">
1645
- <use xlink:href="#app_icon_keben_line"></use>
1646
- </svg>
1647
- <div class="name">app_icon_课本_line</div>
1648
- <div class="code-name">#app_icon_keben_line</div>
1649
- </li>
1650
-
1651
- <li class="dib">
1652
- <svg class="icon svg-icon" aria-hidden="true">
1653
- <use xlink:href="#app_icon_touping_line"></use>
1654
- </svg>
1655
- <div class="name">app_icon_投屏_line</div>
1656
- <div class="code-name">#app_icon_touping_line</div>
1657
- </li>
1658
-
1659
- <li class="dib">
1660
- <svg class="icon svg-icon" aria-hidden="true">
1661
- <use xlink:href="#app_icon_taolun_line"></use>
1662
- </svg>
1663
- <div class="name">app_icon_讨论_line</div>
1664
- <div class="code-name">#app_icon_taolun_line</div>
1665
- </li>
1666
-
1667
- <li class="dib">
1668
- <svg class="icon svg-icon" aria-hidden="true">
1669
- <use xlink:href="#app_icon_shoucang_line"></use>
1670
- </svg>
1671
- <div class="name">app_icon_收藏_line</div>
1672
- <div class="code-name">#app_icon_shoucang_line</div>
1673
- </li>
1674
-
1675
- <li class="dib">
1676
- <svg class="icon svg-icon" aria-hidden="true">
1677
- <use xlink:href="#app_icon_xunhuan_line"></use>
1678
- </svg>
1679
- <div class="name">app_icon_循环_line</div>
1680
- <div class="code-name">#app_icon_xunhuan_line</div>
1681
- </li>
1682
-
1683
- <li class="dib">
1684
- <svg class="icon svg-icon" aria-hidden="true">
1685
- <use xlink:href="#app_icon_xiazai_line"></use>
1686
- </svg>
1687
- <div class="name">app_icon_下载_line</div>
1688
- <div class="code-name">#app_icon_xiazai_line</div>
1689
- </li>
1690
-
1691
- <li class="dib">
1692
- <svg class="icon svg-icon" aria-hidden="true">
1693
- <use xlink:href="#app_icon_quanping_line"></use>
1694
- </svg>
1695
- <div class="name">app_icon_全屏_line</div>
1696
- <div class="code-name">#app_icon_quanping_line</div>
1697
- </li>
1698
-
1699
- <li class="dib">
1700
- <svg class="icon svg-icon" aria-hidden="true">
1701
- <use xlink:href="#app_icon_zuoye_line"></use>
1702
- </svg>
1703
- <div class="name">app_icon_课后练习_line</div>
1704
- <div class="code-name">#app_icon_zuoye_line</div>
1705
- </li>
1706
-
1707
- <li class="dib">
1708
- <svg class="icon svg-icon" aria-hidden="true">
1709
- <use xlink:href="#app_icon_zhuanfa_line"></use>
1710
- </svg>
1711
- <div class="name">app_icon_转发_line</div>
1712
- <div class="code-name">#app_icon_zhuanfa_line</div>
1713
- </li>
1714
-
1715
- <li class="dib">
1716
- <svg class="icon svg-icon" aria-hidden="true">
1717
- <use xlink:href="#app_icon_zuoye_line-2"></use>
1718
- </svg>
1719
- <div class="name">app_icon_作业_line-2</div>
1720
- <div class="code-name">#app_icon_zuoye_line-2</div>
1721
- </li>
1722
-
1723
- <li class="dib">
1724
- <svg class="icon svg-icon" aria-hidden="true">
1725
- <use xlink:href="#app_icon_application_linear"></use>
1726
- </svg>
1727
- <div class="name">app_icon_application_linear</div>
1728
- <div class="code-name">#app_icon_application_linear</div>
1729
- </li>
1730
-
1731
- <li class="dib">
1732
- <svg class="icon svg-icon" aria-hidden="true">
1733
- <use xlink:href="#app_icon_land_linear"></use>
1734
- </svg>
1735
- <div class="name">app_icon_land_linear</div>
1736
- <div class="code-name">#app_icon_land_linear</div>
1737
- </li>
1738
-
1739
- <li class="dib">
1740
- <svg class="icon svg-icon" aria-hidden="true">
1741
- <use xlink:href="#app_icon_explain_linear"></use>
1742
- </svg>
1743
- <div class="name">app_icon_explain_linear</div>
1744
- <div class="code-name">#app_icon_explain_linear</div>
1745
- </li>
1746
-
1747
- <li class="dib">
1748
- <svg class="icon svg-icon" aria-hidden="true">
1749
- <use xlink:href="#app_icon_problem_linear"></use>
1750
- </svg>
1751
- <div class="name">app_icon_problem_linear</div>
1752
- <div class="code-name">#app_icon_problem_linear</div>
1753
- </li>
1754
-
1755
- <li class="dib">
1756
- <svg class="icon svg-icon" aria-hidden="true">
1757
- <use xlink:href="#app_icon_play_linear"></use>
1758
- </svg>
1759
- <div class="name">app_icon_play_linear</div>
1760
- <div class="code-name">#app_icon_play_linear</div>
1761
- </li>
1762
-
1763
- <li class="dib">
1764
- <svg class="icon svg-icon" aria-hidden="true">
1765
- <use xlink:href="#app_icon_search_linear"></use>
1766
- </svg>
1767
- <div class="name">app_icon_search_linear</div>
1768
- <div class="code-name">#app_icon_search_linear</div>
1769
- </li>
1770
-
1771
- <li class="dib">
1772
- <svg class="icon svg-icon" aria-hidden="true">
1773
- <use xlink:href="#app_icon_equipment_linear"></use>
1774
- </svg>
1775
- <div class="name">app_icon_equipment_linear</div>
1776
- <div class="code-name">#app_icon_equipment_linear</div>
1777
- </li>
1778
-
1779
- <li class="dib">
1780
- <svg class="icon svg-icon" aria-hidden="true">
1781
- <use xlink:href="#app_icon_administrators_linear"></use>
1782
- </svg>
1783
- <div class="name">app_icon_administrators_linear</div>
1784
- <div class="code-name">#app_icon_administrators_linear</div>
1785
- </li>
1786
-
1787
- <li class="dib">
1788
- <svg class="icon svg-icon" aria-hidden="true">
1789
- <use xlink:href="#icon_upload_cloud_line"></use>
1790
- </svg>
1791
- <div class="name">icon_upload_cloud_line</div>
1792
- <div class="code-name">#icon_upload_cloud_line</div>
1793
- </li>
1794
-
1795
- <li class="dib">
1796
- <svg class="icon svg-icon" aria-hidden="true">
1797
- <use xlink:href="#icon_shuaxin_line"></use>
1798
- </svg>
1799
- <div class="name">icon_刷新_line</div>
1800
- <div class="code-name">#icon_shuaxin_line</div>
1801
- </li>
1802
-
1803
- <li class="dib">
1804
- <svg class="icon svg-icon" aria-hidden="true">
1805
- <use xlink:href="#icon_yulan_linear"></use>
1806
- </svg>
1807
- <div class="name">icon_预览_linear</div>
1808
- <div class="code-name">#icon_yulan_linear</div>
1809
- </li>
1810
-
1811
- <li class="dib">
1812
- <svg class="icon svg-icon" aria-hidden="true">
1813
- <use xlink:href="#icon_more_fill"></use>
1814
- </svg>
1815
- <div class="name">icon_more_fill</div>
1816
- <div class="code-name">#icon_more_fill</div>
1817
- </li>
1818
-
1819
- <li class="dib">
1820
- <svg class="icon svg-icon" aria-hidden="true">
1821
- <use xlink:href="#icon_calendarCheck_line"></use>
1822
- </svg>
1823
- <div class="name">icon_calendarCheck_line</div>
1824
- <div class="code-name">#icon_calendarCheck_line</div>
1825
- </li>
1826
-
1827
- <li class="dib">
1828
- <svg class="icon svg-icon" aria-hidden="true">
1829
- <use xlink:href="#icon_userFollow_line"></use>
1830
- </svg>
1831
- <div class="name">icon_userFollow_line</div>
1832
- <div class="code-name">#icon_userFollow_line</div>
1833
- </li>
1834
-
1835
- <li class="dib">
1836
- <svg class="icon svg-icon" aria-hidden="true">
1837
- <use xlink:href="#icon_xiazai2_line"></use>
1838
- </svg>
1839
- <div class="name">icon_下载2_line</div>
1840
- <div class="code-name">#icon_xiazai2_line</div>
1841
- </li>
1842
-
1843
- <li class="dib">
1844
- <svg class="icon svg-icon" aria-hidden="true">
1845
- <use xlink:href="#icon_daka_line"></use>
1846
- </svg>
1847
- <div class="name">icon_打卡_line</div>
1848
- <div class="code-name">#icon_daka_line</div>
1849
- </li>
1850
-
1851
- <li class="dib">
1852
- <svg class="icon svg-icon" aria-hidden="true">
1853
- <use xlink:href="#icon_bianji_line"></use>
1854
- </svg>
1855
- <div class="name">icon_编辑_line</div>
1856
- <div class="code-name">#icon_bianji_line</div>
1857
- </li>
1858
-
1859
- <li class="dib">
1860
- <svg class="icon svg-icon" aria-hidden="true">
1861
- <use xlink:href="#icon_filter-line"></use>
1862
- </svg>
1863
- <div class="name">icon_filter-line</div>
1864
- <div class="code-name">#icon_filter-line</div>
1865
- </li>
1866
-
1867
- <li class="dib">
1868
- <svg class="icon svg-icon" aria-hidden="true">
1869
- <use xlink:href="#icon_download-fill"></use>
1870
- </svg>
1871
- <div class="name">icon_download-fill</div>
1872
- <div class="code-name">#icon_download-fill</div>
1873
- </li>
1874
-
1875
- <li class="dib">
1876
- <svg class="icon svg-icon" aria-hidden="true">
1877
- <use xlink:href="#icon_xiaolian_line"></use>
1878
- </svg>
1879
- <div class="name">icon_笑脸_line</div>
1880
- <div class="code-name">#icon_xiaolian_line</div>
1881
- </li>
1882
-
1883
- <li class="dib">
1884
- <svg class="icon svg-icon" aria-hidden="true">
1885
- <use xlink:href="#icon_closeCircle_line"></use>
1886
- </svg>
1887
- <div class="name">icon_closeCircle_line</div>
1888
- <div class="code-name">#icon_closeCircle_line</div>
1889
- </li>
1890
-
1891
- <li class="dib">
1892
- <svg class="icon svg-icon" aria-hidden="true">
1893
- <use xlink:href="#icon_close-fill"></use>
1894
- </svg>
1895
- <div class="name">icon_close-fill</div>
1896
- <div class="code-name">#icon_close-fill</div>
1897
- </li>
1898
-
1899
- <li class="dib">
1900
- <svg class="icon svg-icon" aria-hidden="true">
1901
- <use xlink:href="#icon_earth_linear"></use>
1902
- </svg>
1903
- <div class="name">icon_earth_linear</div>
1904
- <div class="code-name">#icon_earth_linear</div>
1905
- </li>
1906
-
1907
- <li class="dib">
1908
- <svg class="icon svg-icon" aria-hidden="true">
1909
- <use xlink:href="#icon_delete_linear"></use>
1910
- </svg>
1911
- <div class="name">icon_delete_linear</div>
1912
- <div class="code-name">#icon_delete_linear</div>
1913
- </li>
1914
-
1915
- <li class="dib">
1916
- <svg class="icon svg-icon" aria-hidden="true">
1917
- <use xlink:href="#icon_teaching_linear"></use>
1918
- </svg>
1919
- <div class="name">icon_teaching_linear</div>
1920
- <div class="code-name">#icon_teaching_linear</div>
1921
- </li>
1922
-
1923
- <li class="dib">
1924
- <svg class="icon svg-icon" aria-hidden="true">
1925
- <use xlink:href="#icon_live_fill"></use>
1926
- </svg>
1927
- <div class="name">icon_live_fill</div>
1928
- <div class="code-name">#icon_live_fill</div>
1929
- </li>
1930
-
1931
- <li class="dib">
1932
- <svg class="icon svg-icon" aria-hidden="true">
1933
- <use xlink:href="#icon_checkbox_fill"></use>
1934
- </svg>
1935
- <div class="name">icon_checkbox_fill</div>
1936
- <div class="code-name">#icon_checkbox_fill</div>
1937
- </li>
1938
-
1939
- <li class="dib">
1940
- <svg class="icon svg-icon" aria-hidden="true">
1941
- <use xlink:href="#icon_processing_fill"></use>
1942
- </svg>
1943
- <div class="name">icon_processing_fill</div>
1944
- <div class="code-name">#icon_processing_fill</div>
1945
- </li>
1946
-
1947
- <li class="dib">
1948
- <svg class="icon svg-icon" aria-hidden="true">
1949
- <use xlink:href="#icon_arrowUp_linear"></use>
1950
- </svg>
1951
- <div class="name">icon_arrowUp_linear</div>
1952
- <div class="code-name">#icon_arrowUp_linear</div>
1953
- </li>
1954
-
1955
- <li class="dib">
1956
- <svg class="icon svg-icon" aria-hidden="true">
1957
- <use xlink:href="#icon_arrowDropdown_linear"></use>
1958
- </svg>
1959
- <div class="name">icon_arrowDropdown_linear</div>
1960
- <div class="code-name">#icon_arrowDropdown_linear</div>
1961
- </li>
1962
-
1963
- <li class="dib">
1964
- <svg class="icon svg-icon" aria-hidden="true">
1965
- <use xlink:href="#icon_arrowRight_linear"></use>
1966
- </svg>
1967
- <div class="name">icon_arrowRight_linear</div>
1968
- <div class="code-name">#icon_arrowRight_linear</div>
1969
- </li>
1970
-
1971
- <li class="dib">
1972
- <svg class="icon svg-icon" aria-hidden="true">
1973
- <use xlink:href="#icon_checkbox_linear"></use>
1974
- </svg>
1975
- <div class="name">icon_checkbox_linear</div>
1976
- <div class="code-name">#icon_checkbox_linear</div>
1977
- </li>
1978
-
1979
- <li class="dib">
1980
- <svg class="icon svg-icon" aria-hidden="true">
1981
- <use xlink:href="#icon_arrowLeft_linear"></use>
1982
- </svg>
1983
- <div class="name">icon_arrowLeft_linear</div>
1984
- <div class="code-name">#icon_arrowLeft_linear</div>
1985
- </li>
1986
-
1987
- <li class="dib">
1988
- <svg class="icon svg-icon" aria-hidden="true">
1989
- <use xlink:href="#icon_download2_linear"></use>
1990
- </svg>
1991
- <div class="name">icon_download2_linear</div>
1992
- <div class="code-name">#icon_download2_linear</div>
1993
- </li>
1994
-
1995
- <li class="dib">
1996
- <svg class="icon svg-icon" aria-hidden="true">
1997
- <use xlink:href="#icon_fileList_linear"></use>
1998
- </svg>
1999
- <div class="name">icon_fileList_linear</div>
2000
- <div class="code-name">#icon_fileList_linear</div>
2001
- </li>
2002
-
2003
- <li class="dib">
2004
- <svg class="icon svg-icon" aria-hidden="true">
2005
- <use xlink:href="#icon_fileVideo_linear"></use>
2006
- </svg>
2007
- <div class="name">icon_fileVideo_linear</div>
2008
- <div class="code-name">#icon_fileVideo_linear</div>
2009
- </li>
2010
-
2011
- <li class="dib">
2012
- <svg class="icon svg-icon" aria-hidden="true">
2013
- <use xlink:href="#icon_download_linear"></use>
2014
- </svg>
2015
- <div class="name">icon_download_linear</div>
2016
- <div class="code-name">#icon_download_linear</div>
2017
- </li>
2018
-
2019
- <li class="dib">
2020
- <svg class="icon svg-icon" aria-hidden="true">
2021
- <use xlink:href="#icon_search_linear"></use>
2022
- </svg>
2023
- <div class="name">icon_search_linear</div>
2024
- <div class="code-name">#icon_search_linear</div>
2025
- </li>
2026
-
2027
- <li class="dib">
2028
- <svg class="icon svg-icon" aria-hidden="true">
2029
- <use xlink:href="#icon_toggle_linear"></use>
2030
- </svg>
2031
- <div class="name">icon_toggle_linear</div>
2032
- <div class="code-name">#icon_toggle_linear</div>
2033
- </li>
2034
-
2035
- <li class="dib">
2036
- <svg class="icon svg-icon" aria-hidden="true">
2037
- <use xlink:href="#icon_star_linear"></use>
2038
- </svg>
2039
- <div class="name">icon_star_linear</div>
2040
- <div class="code-name">#icon_star_linear</div>
2041
- </li>
2042
-
2043
- <li class="dib">
2044
- <svg class="icon svg-icon" aria-hidden="true">
2045
- <use xlink:href="#icon_fileText_fill"></use>
2046
- </svg>
2047
- <div class="name">icon_fileText_fill</div>
2048
- <div class="code-name">#icon_fileText_fill</div>
2049
- </li>
2050
-
2051
- <li class="dib">
2052
- <svg class="icon svg-icon" aria-hidden="true">
2053
- <use xlink:href="#icon_evaluate_fill"></use>
2054
- </svg>
2055
- <div class="name">icon_evaluate_fill</div>
2056
- <div class="code-name">#icon_evaluate_fill</div>
2057
- </li>
2058
-
2059
- <li class="dib">
2060
- <svg class="icon svg-icon" aria-hidden="true">
2061
- <use xlink:href="#icon_fileVideo_fill"></use>
2062
- </svg>
2063
- <div class="name">icon_fileVideo_fill</div>
2064
- <div class="code-name">#icon_fileVideo_fill</div>
2065
- </li>
2066
-
2067
- <li class="dib">
2068
- <svg class="icon svg-icon" aria-hidden="true">
2069
- <use xlink:href="#icon_feedback_fill"></use>
2070
- </svg>
2071
- <div class="name">icon_feedback_fill</div>
2072
- <div class="code-name">#icon_feedback_fill</div>
2073
- </li>
2074
-
2075
- <li class="dib">
2076
- <svg class="icon svg-icon" aria-hidden="true">
2077
- <use xlink:href="#icon_information_fill"></use>
2078
- </svg>
2079
- <div class="name">icon_information_fill</div>
2080
- <div class="code-name">#icon_information_fill</div>
2081
- </li>
2082
-
2083
- <li class="dib">
2084
- <svg class="icon svg-icon" aria-hidden="true">
2085
- <use xlink:href="#icon_star_fill"></use>
2086
- </svg>
2087
- <div class="name">icon_star_fill</div>
2088
- <div class="code-name">#icon_star_fill</div>
2089
- </li>
2090
-
2091
- <li class="dib">
2092
- <svg class="icon svg-icon" aria-hidden="true">
2093
- <use xlink:href="#icon_play_fill"></use>
2094
- </svg>
2095
- <div class="name">icon_play_fill</div>
2096
- <div class="code-name">#icon_play_fill</div>
2097
- </li>
2098
-
2099
- <li class="dib">
2100
- <svg class="icon svg-icon" aria-hidden="true">
2101
- <use xlink:href="#icon_file_fill"></use>
2102
- </svg>
2103
- <div class="name">icon_file_fill</div>
2104
- <div class="code-name">#icon_file_fill</div>
2105
- </li>
2106
-
2107
- <li class="dib">
2108
- <svg class="icon svg-icon" aria-hidden="true">
2109
- <use xlink:href="#icon_hotel_fill"></use>
2110
- </svg>
2111
- <div class="name">icon_hotel_fill</div>
2112
- <div class="code-name">#icon_hotel_fill</div>
2113
- </li>
2114
-
2115
- <li class="dib">
2116
- <svg class="icon svg-icon" aria-hidden="true">
2117
- <use xlink:href="#icon_thumb_fill"></use>
2118
- </svg>
2119
- <div class="name">icon_thumb_fill</div>
2120
- <div class="code-name">#icon_thumb_fill</div>
2121
- </li>
2122
-
2123
- <li class="dib">
2124
- <svg class="icon svg-icon" aria-hidden="true">
2125
- <use xlink:href="#icon_draft_fill"></use>
2126
- </svg>
2127
- <div class="name">icon_draft_fill</div>
2128
- <div class="code-name">#icon_draft_fill</div>
2129
- </li>
2130
-
2131
- </ul>
2132
- <div class="article markdown">
2133
- <h2 id="symbol-">Symbol 引用</h2>
2134
- <hr>
2135
-
2136
- <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
2137
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
2138
- <ul>
2139
- <li>支持多色图标了，不再受单色限制。</li>
2140
- <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
2141
- <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
2142
- <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
2143
- </ul>
2144
- <p>使用步骤如下：</p>
2145
- <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
2146
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
2147
- </code></pre>
2148
- <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
2149
- <pre><code class="language-html">&lt;style&gt;
2150
- .icon {
2151
- width: 1em;
2152
- height: 1em;
2153
- vertical-align: -0.15em;
2154
- fill: currentColor;
2155
- overflow: hidden;
2156
- }
2157
- &lt;/style&gt;
2158
- </code></pre>
2159
- <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
2160
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
2161
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
2162
- &lt;/svg&gt;
2163
- </code></pre>
2164
- </div>
2165
- </div>
2166
-
2167
- </div>
2168
- </div>
2169
- <script>
2170
- $(document).ready(function () {
2171
- $('.tab-container .content:first').show()
2172
-
2173
- $('#tabs li').click(function (e) {
2174
- var tabContent = $('.tab-container .content')
2175
- var index = $(this).index()
2176
-
2177
- if ($(this).hasClass('active')) {
2178
- return
2179
- } else {
2180
- $('#tabs li').removeClass('active')
2181
- $(this).addClass('active')
2182
-
2183
- tabContent.hide().eq(index).fadeIn()
2184
- }
2185
- })
2186
- })
2187
- </script>
2188
- </body>
2189
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>iconfont Demo</title>
6
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
+ <link rel="stylesheet" href="demo.css">
10
+ <link rel="stylesheet" href="iconfont.css">
11
+ <script src="iconfont.js"></script>
12
+ <!-- jQuery -->
13
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
+ <!-- 代码高亮 -->
15
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
+ <style>
17
+ .main .logo {
18
+ margin-top: 0;
19
+ height: auto;
20
+ }
21
+
22
+ .main .logo a {
23
+ display: flex;
24
+ align-items: center;
25
+ }
26
+
27
+ .main .logo .sub-title {
28
+ margin-left: 0.5em;
29
+ font-size: 22px;
30
+ color: #fff;
31
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="main">
39
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
+ <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
+
42
+ </a></h1>
43
+ <div class="nav-tabs">
44
+ <ul id="tabs" class="dib-box">
45
+ <li class="dib active"><span>Unicode</span></li>
46
+ <li class="dib"><span>Font class</span></li>
47
+ <li class="dib"><span>Symbol</span></li>
48
+ </ul>
49
+
50
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3678441" 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">&#xe654;</span>
59
+ <div class="name">icon_课程_fill</div>
60
+ <div class="code-name">&amp;#xe654;</div>
61
+ </li>
62
+
63
+ <li class="dib">
64
+ <span class="icon iconfont">&#xe653;</span>
65
+ <div class="name">web_icon_时间_fill</div>
66
+ <div class="code-name">&amp;#xe653;</div>
67
+ </li>
68
+
69
+ <li class="dib">
70
+ <span class="icon iconfont">&#xe652;</span>
71
+ <div class="name">icon_研修活动_fill</div>
72
+ <div class="code-name">&amp;#xe652;</div>
73
+ </li>
74
+
75
+ <li class="dib">
76
+ <span class="icon iconfont">&#xe7e9;</span>
77
+ <div class="name">app_icon_企业_line</div>
78
+ <div class="code-name">&amp;#xe7e9;</div>
79
+ </li>
80
+
81
+ <li class="dib">
82
+ <span class="icon iconfont">&#xe7e8;</span>
83
+ <div class="name">live_fill</div>
84
+ <div class="code-name">&amp;#xe7e8;</div>
85
+ </li>
86
+
87
+ <li class="dib">
88
+ <span class="icon iconfont">&#xe7e7;</span>
89
+ <div class="name">app_icon_time_linear</div>
90
+ <div class="code-name">&amp;#xe7e7;</div>
91
+ </li>
92
+
93
+ <li class="dib">
94
+ <span class="icon iconfont">&#xe64e;</span>
95
+ <div class="name">app_icon_课本_line 1</div>
96
+ <div class="code-name">&amp;#xe64e;</div>
97
+ </li>
98
+
99
+ <li class="dib">
100
+ <span class="icon iconfont">&#xe64f;</span>
101
+ <div class="name">app_icon_课本_line</div>
102
+ <div class="code-name">&amp;#xe64f;</div>
103
+ </li>
104
+
105
+ <li class="dib">
106
+ <span class="icon iconfont">&#xe650;</span>
107
+ <div class="name">app_icon_application_linear</div>
108
+ <div class="code-name">&amp;#xe650;</div>
109
+ </li>
110
+
111
+ <li class="dib">
112
+ <span class="icon iconfont">&#xe651;</span>
113
+ <div class="name">选择_full-selection</div>
114
+ <div class="code-name">&amp;#xe651;</div>
115
+ </li>
116
+
117
+ <li class="dib">
118
+ <span class="icon iconfont">&#xe64d;</span>
119
+ <div class="name">web_icon_课时_fill</div>
120
+ <div class="code-name">&amp;#xe64d;</div>
121
+ </li>
122
+
123
+ <li class="dib">
124
+ <span class="icon iconfont">&#xe641;</span>
125
+ <div class="name">app_icon_播放_fill</div>
126
+ <div class="code-name">&amp;#xe641;</div>
127
+ </li>
128
+
129
+ <li class="dib">
130
+ <span class="icon iconfont">&#xe642;</span>
131
+ <div class="name">app_icon_反馈_fill</div>
132
+ <div class="code-name">&amp;#xe642;</div>
133
+ </li>
134
+
135
+ <li class="dib">
136
+ <span class="icon iconfont">&#xe643;</span>
137
+ <div class="name">app_icon_点赞_fill</div>
138
+ <div class="code-name">&amp;#xe643;</div>
139
+ </li>
140
+
141
+ <li class="dib">
142
+ <span class="icon iconfont">&#xe644;</span>
143
+ <div class="name">app_icon_下载_fill</div>
144
+ <div class="code-name">&amp;#xe644;</div>
145
+ </li>
146
+
147
+ <li class="dib">
148
+ <span class="icon iconfont">&#xe645;</span>
149
+ <div class="name">app_icon_收藏_fill</div>
150
+ <div class="code-name">&amp;#xe645;</div>
151
+ </li>
152
+
153
+ <li class="dib">
154
+ <span class="icon iconfont">&#xe646;</span>
155
+ <div class="name">app_icon_评分_fill</div>
156
+ <div class="code-name">&amp;#xe646;</div>
157
+ </li>
158
+
159
+ <li class="dib">
160
+ <span class="icon iconfont">&#xe647;</span>
161
+ <div class="name">web__icon_单元_fill</div>
162
+ <div class="code-name">&amp;#xe647;</div>
163
+ </li>
164
+
165
+ <li class="dib">
166
+ <span class="icon iconfont">&#xe648;</span>
167
+ <div class="name">web_icon_粉丝_fill</div>
168
+ <div class="code-name">&amp;#xe648;</div>
169
+ </li>
170
+
171
+ <li class="dib">
172
+ <span class="icon iconfont">&#xe649;</span>
173
+ <div class="name">app_icon_暂停_fill</div>
174
+ <div class="code-name">&amp;#xe649;</div>
175
+ </li>
176
+
177
+ <li class="dib">
178
+ <span class="icon iconfont">&#xe64a;</span>
179
+ <div class="name">web__icon_作者_fill</div>
180
+ <div class="code-name">&amp;#xe64a;</div>
181
+ </li>
182
+
183
+ <li class="dib">
184
+ <span class="icon iconfont">&#xe64b;</span>
185
+ <div class="name">web_icon_课本_fill</div>
186
+ <div class="code-name">&amp;#xe64b;</div>
187
+ </li>
188
+
189
+ <li class="dib">
190
+ <span class="icon iconfont">&#xe64c;</span>
191
+ <div class="name">web_icon_关注_fill</div>
192
+ <div class="code-name">&amp;#xe64c;</div>
193
+ </li>
194
+
195
+ <li class="dib">
196
+ <span class="icon iconfont">&#xe62e;</span>
197
+ <div class="name">app_icon_更多_line</div>
198
+ <div class="code-name">&amp;#xe62e;</div>
199
+ </li>
200
+
201
+ <li class="dib">
202
+ <span class="icon iconfont">&#xe635;</span>
203
+ <div class="name">app_icon_链接_line</div>
204
+ <div class="code-name">&amp;#xe635;</div>
205
+ </li>
206
+
207
+ <li class="dib">
208
+ <span class="icon iconfont">&#xe636;</span>
209
+ <div class="name">app_icon_点赞_line</div>
210
+ <div class="code-name">&amp;#xe636;</div>
211
+ </li>
212
+
213
+ <li class="dib">
214
+ <span class="icon iconfont">&#xe637;</span>
215
+ <div class="name">app_icon_课本_line</div>
216
+ <div class="code-name">&amp;#xe637;</div>
217
+ </li>
218
+
219
+ <li class="dib">
220
+ <span class="icon iconfont">&#xe638;</span>
221
+ <div class="name">app_icon_投屏_line</div>
222
+ <div class="code-name">&amp;#xe638;</div>
223
+ </li>
224
+
225
+ <li class="dib">
226
+ <span class="icon iconfont">&#xe639;</span>
227
+ <div class="name">app_icon_讨论_line</div>
228
+ <div class="code-name">&amp;#xe639;</div>
229
+ </li>
230
+
231
+ <li class="dib">
232
+ <span class="icon iconfont">&#xe63a;</span>
233
+ <div class="name">app_icon_收藏_line</div>
234
+ <div class="code-name">&amp;#xe63a;</div>
235
+ </li>
236
+
237
+ <li class="dib">
238
+ <span class="icon iconfont">&#xe63b;</span>
239
+ <div class="name">app_icon_循环_line</div>
240
+ <div class="code-name">&amp;#xe63b;</div>
241
+ </li>
242
+
243
+ <li class="dib">
244
+ <span class="icon iconfont">&#xe63c;</span>
245
+ <div class="name">app_icon_下载_line</div>
246
+ <div class="code-name">&amp;#xe63c;</div>
247
+ </li>
248
+
249
+ <li class="dib">
250
+ <span class="icon iconfont">&#xe63d;</span>
251
+ <div class="name">app_icon_全屏_line</div>
252
+ <div class="code-name">&amp;#xe63d;</div>
253
+ </li>
254
+
255
+ <li class="dib">
256
+ <span class="icon iconfont">&#xe63e;</span>
257
+ <div class="name">app_icon_课后练习_line</div>
258
+ <div class="code-name">&amp;#xe63e;</div>
259
+ </li>
260
+
261
+ <li class="dib">
262
+ <span class="icon iconfont">&#xe63f;</span>
263
+ <div class="name">app_icon_转发_line</div>
264
+ <div class="code-name">&amp;#xe63f;</div>
265
+ </li>
266
+
267
+ <li class="dib">
268
+ <span class="icon iconfont">&#xe640;</span>
269
+ <div class="name">app_icon_作业_line-2</div>
270
+ <div class="code-name">&amp;#xe640;</div>
271
+ </li>
272
+
273
+ <li class="dib">
274
+ <span class="icon iconfont">&#xe62c;</span>
275
+ <div class="name">app_icon_application_linear</div>
276
+ <div class="code-name">&amp;#xe62c;</div>
277
+ </li>
278
+
279
+ <li class="dib">
280
+ <span class="icon iconfont">&#xe62d;</span>
281
+ <div class="name">app_icon_land_linear</div>
282
+ <div class="code-name">&amp;#xe62d;</div>
283
+ </li>
284
+
285
+ <li class="dib">
286
+ <span class="icon iconfont">&#xe62f;</span>
287
+ <div class="name">app_icon_explain_linear</div>
288
+ <div class="code-name">&amp;#xe62f;</div>
289
+ </li>
290
+
291
+ <li class="dib">
292
+ <span class="icon iconfont">&#xe630;</span>
293
+ <div class="name">app_icon_problem_linear</div>
294
+ <div class="code-name">&amp;#xe630;</div>
295
+ </li>
296
+
297
+ <li class="dib">
298
+ <span class="icon iconfont">&#xe631;</span>
299
+ <div class="name">app_icon_play_linear</div>
300
+ <div class="code-name">&amp;#xe631;</div>
301
+ </li>
302
+
303
+ <li class="dib">
304
+ <span class="icon iconfont">&#xe632;</span>
305
+ <div class="name">app_icon_search_linear</div>
306
+ <div class="code-name">&amp;#xe632;</div>
307
+ </li>
308
+
309
+ <li class="dib">
310
+ <span class="icon iconfont">&#xe633;</span>
311
+ <div class="name">app_icon_equipment_linear</div>
312
+ <div class="code-name">&amp;#xe633;</div>
313
+ </li>
314
+
315
+ <li class="dib">
316
+ <span class="icon iconfont">&#xe634;</span>
317
+ <div class="name">app_icon_administrators_linear</div>
318
+ <div class="code-name">&amp;#xe634;</div>
319
+ </li>
320
+
321
+ <li class="dib">
322
+ <span class="icon iconfont">&#xe61f;</span>
323
+ <div class="name">icon_upload_cloud_line</div>
324
+ <div class="code-name">&amp;#xe61f;</div>
325
+ </li>
326
+
327
+ <li class="dib">
328
+ <span class="icon iconfont">&#xe620;</span>
329
+ <div class="name">icon_刷新_line</div>
330
+ <div class="code-name">&amp;#xe620;</div>
331
+ </li>
332
+
333
+ <li class="dib">
334
+ <span class="icon iconfont">&#xe621;</span>
335
+ <div class="name">icon_预览_linear</div>
336
+ <div class="code-name">&amp;#xe621;</div>
337
+ </li>
338
+
339
+ <li class="dib">
340
+ <span class="icon iconfont">&#xe622;</span>
341
+ <div class="name">icon_more_fill</div>
342
+ <div class="code-name">&amp;#xe622;</div>
343
+ </li>
344
+
345
+ <li class="dib">
346
+ <span class="icon iconfont">&#xe623;</span>
347
+ <div class="name">icon_calendarCheck_line</div>
348
+ <div class="code-name">&amp;#xe623;</div>
349
+ </li>
350
+
351
+ <li class="dib">
352
+ <span class="icon iconfont">&#xe624;</span>
353
+ <div class="name">icon_userFollow_line</div>
354
+ <div class="code-name">&amp;#xe624;</div>
355
+ </li>
356
+
357
+ <li class="dib">
358
+ <span class="icon iconfont">&#xe625;</span>
359
+ <div class="name">icon_下载2_line</div>
360
+ <div class="code-name">&amp;#xe625;</div>
361
+ </li>
362
+
363
+ <li class="dib">
364
+ <span class="icon iconfont">&#xe626;</span>
365
+ <div class="name">icon_打卡_line</div>
366
+ <div class="code-name">&amp;#xe626;</div>
367
+ </li>
368
+
369
+ <li class="dib">
370
+ <span class="icon iconfont">&#xe627;</span>
371
+ <div class="name">icon_编辑_line</div>
372
+ <div class="code-name">&amp;#xe627;</div>
373
+ </li>
374
+
375
+ <li class="dib">
376
+ <span class="icon iconfont">&#xe628;</span>
377
+ <div class="name">icon_filter-line</div>
378
+ <div class="code-name">&amp;#xe628;</div>
379
+ </li>
380
+
381
+ <li class="dib">
382
+ <span class="icon iconfont">&#xe629;</span>
383
+ <div class="name">icon_download-fill</div>
384
+ <div class="code-name">&amp;#xe629;</div>
385
+ </li>
386
+
387
+ <li class="dib">
388
+ <span class="icon iconfont">&#xe62a;</span>
389
+ <div class="name">icon_笑脸_line</div>
390
+ <div class="code-name">&amp;#xe62a;</div>
391
+ </li>
392
+
393
+ <li class="dib">
394
+ <span class="icon iconfont">&#xe62b;</span>
395
+ <div class="name">icon_closeCircle_line</div>
396
+ <div class="code-name">&amp;#xe62b;</div>
397
+ </li>
398
+
399
+ <li class="dib">
400
+ <span class="icon iconfont">&#xe61e;</span>
401
+ <div class="name">icon_close-fill</div>
402
+ <div class="code-name">&amp;#xe61e;</div>
403
+ </li>
404
+
405
+ <li class="dib">
406
+ <span class="icon iconfont">&#xe7e5;</span>
407
+ <div class="name">icon_earth_linear</div>
408
+ <div class="code-name">&amp;#xe7e5;</div>
409
+ </li>
410
+
411
+ <li class="dib">
412
+ <span class="icon iconfont">&#xe7e4;</span>
413
+ <div class="name">icon_delete_linear</div>
414
+ <div class="code-name">&amp;#xe7e4;</div>
415
+ </li>
416
+
417
+ <li class="dib">
418
+ <span class="icon iconfont">&#xe61d;</span>
419
+ <div class="name">icon_teaching_linear</div>
420
+ <div class="code-name">&amp;#xe61d;</div>
421
+ </li>
422
+
423
+ <li class="dib">
424
+ <span class="icon iconfont">&#xe61a;</span>
425
+ <div class="name">icon_live_fill</div>
426
+ <div class="code-name">&amp;#xe61a;</div>
427
+ </li>
428
+
429
+ <li class="dib">
430
+ <span class="icon iconfont">&#xe61b;</span>
431
+ <div class="name">icon_checkbox_fill</div>
432
+ <div class="code-name">&amp;#xe61b;</div>
433
+ </li>
434
+
435
+ <li class="dib">
436
+ <span class="icon iconfont">&#xe61c;</span>
437
+ <div class="name">icon_processing_fill</div>
438
+ <div class="code-name">&amp;#xe61c;</div>
439
+ </li>
440
+
441
+ <li class="dib">
442
+ <span class="icon iconfont">&#xe603;</span>
443
+ <div class="name">icon_arrowUp_linear</div>
444
+ <div class="code-name">&amp;#xe603;</div>
445
+ </li>
446
+
447
+ <li class="dib">
448
+ <span class="icon iconfont">&#xe604;</span>
449
+ <div class="name">icon_arrowDropdown_linear</div>
450
+ <div class="code-name">&amp;#xe604;</div>
451
+ </li>
452
+
453
+ <li class="dib">
454
+ <span class="icon iconfont">&#xe605;</span>
455
+ <div class="name">icon_arrowRight_linear</div>
456
+ <div class="code-name">&amp;#xe605;</div>
457
+ </li>
458
+
459
+ <li class="dib">
460
+ <span class="icon iconfont">&#xe606;</span>
461
+ <div class="name">icon_checkbox_linear</div>
462
+ <div class="code-name">&amp;#xe606;</div>
463
+ </li>
464
+
465
+ <li class="dib">
466
+ <span class="icon iconfont">&#xe607;</span>
467
+ <div class="name">icon_arrowLeft_linear</div>
468
+ <div class="code-name">&amp;#xe607;</div>
469
+ </li>
470
+
471
+ <li class="dib">
472
+ <span class="icon iconfont">&#xe608;</span>
473
+ <div class="name">icon_download2_linear</div>
474
+ <div class="code-name">&amp;#xe608;</div>
475
+ </li>
476
+
477
+ <li class="dib">
478
+ <span class="icon iconfont">&#xe609;</span>
479
+ <div class="name">icon_fileList_linear</div>
480
+ <div class="code-name">&amp;#xe609;</div>
481
+ </li>
482
+
483
+ <li class="dib">
484
+ <span class="icon iconfont">&#xe615;</span>
485
+ <div class="name">icon_fileVideo_linear</div>
486
+ <div class="code-name">&amp;#xe615;</div>
487
+ </li>
488
+
489
+ <li class="dib">
490
+ <span class="icon iconfont">&#xe616;</span>
491
+ <div class="name">icon_download_linear</div>
492
+ <div class="code-name">&amp;#xe616;</div>
493
+ </li>
494
+
495
+ <li class="dib">
496
+ <span class="icon iconfont">&#xe617;</span>
497
+ <div class="name">icon_search_linear</div>
498
+ <div class="code-name">&amp;#xe617;</div>
499
+ </li>
500
+
501
+ <li class="dib">
502
+ <span class="icon iconfont">&#xe618;</span>
503
+ <div class="name">icon_toggle_linear</div>
504
+ <div class="code-name">&amp;#xe618;</div>
505
+ </li>
506
+
507
+ <li class="dib">
508
+ <span class="icon iconfont">&#xe619;</span>
509
+ <div class="name">icon_star_linear</div>
510
+ <div class="code-name">&amp;#xe619;</div>
511
+ </li>
512
+
513
+ <li class="dib">
514
+ <span class="icon iconfont">&#xe60a;</span>
515
+ <div class="name">icon_fileText_fill</div>
516
+ <div class="code-name">&amp;#xe60a;</div>
517
+ </li>
518
+
519
+ <li class="dib">
520
+ <span class="icon iconfont">&#xe60b;</span>
521
+ <div class="name">icon_evaluate_fill</div>
522
+ <div class="code-name">&amp;#xe60b;</div>
523
+ </li>
524
+
525
+ <li class="dib">
526
+ <span class="icon iconfont">&#xe60c;</span>
527
+ <div class="name">icon_fileVideo_fill</div>
528
+ <div class="code-name">&amp;#xe60c;</div>
529
+ </li>
530
+
531
+ <li class="dib">
532
+ <span class="icon iconfont">&#xe60d;</span>
533
+ <div class="name">icon_feedback_fill</div>
534
+ <div class="code-name">&amp;#xe60d;</div>
535
+ </li>
536
+
537
+ <li class="dib">
538
+ <span class="icon iconfont">&#xe60e;</span>
539
+ <div class="name">icon_information_fill</div>
540
+ <div class="code-name">&amp;#xe60e;</div>
541
+ </li>
542
+
543
+ <li class="dib">
544
+ <span class="icon iconfont">&#xe60f;</span>
545
+ <div class="name">icon_star_fill</div>
546
+ <div class="code-name">&amp;#xe60f;</div>
547
+ </li>
548
+
549
+ <li class="dib">
550
+ <span class="icon iconfont">&#xe610;</span>
551
+ <div class="name">icon_play_fill</div>
552
+ <div class="code-name">&amp;#xe610;</div>
553
+ </li>
554
+
555
+ <li class="dib">
556
+ <span class="icon iconfont">&#xe611;</span>
557
+ <div class="name">icon_file_fill</div>
558
+ <div class="code-name">&amp;#xe611;</div>
559
+ </li>
560
+
561
+ <li class="dib">
562
+ <span class="icon iconfont">&#xe612;</span>
563
+ <div class="name">icon_hotel_fill</div>
564
+ <div class="code-name">&amp;#xe612;</div>
565
+ </li>
566
+
567
+ <li class="dib">
568
+ <span class="icon iconfont">&#xe613;</span>
569
+ <div class="name">icon_thumb_fill</div>
570
+ <div class="code-name">&amp;#xe613;</div>
571
+ </li>
572
+
573
+ <li class="dib">
574
+ <span class="icon iconfont">&#xe614;</span>
575
+ <div class="name">icon_draft_fill</div>
576
+ <div class="code-name">&amp;#xe614;</div>
577
+ </li>
578
+
579
+ </ul>
580
+ <div class="article markdown">
581
+ <h2 id="unicode-">Unicode 引用</h2>
582
+ <hr>
583
+
584
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
585
+ <ul>
586
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
587
+ <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
588
+ </ul>
589
+ <blockquote>
590
+ <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
591
+ </blockquote>
592
+ <p>Unicode 使用步骤如下：</p>
593
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
594
+ <pre><code class="language-css"
595
+ >@font-face {
596
+ font-family: 'iconfont';
597
+ src: url('iconfont.woff2?t=1682865888041') format('woff2'),
598
+ url('iconfont.woff?t=1682865888041') format('woff'),
599
+ url('iconfont.ttf?t=1682865888041') format('truetype');
600
+ }
601
+ </code></pre>
602
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
603
+ <pre><code class="language-css"
604
+ >.iconfont {
605
+ font-family: "iconfont" !important;
606
+ font-size: 16px;
607
+ font-style: normal;
608
+ -webkit-font-smoothing: antialiased;
609
+ -moz-osx-font-smoothing: grayscale;
610
+ }
611
+ </code></pre>
612
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
613
+ <pre>
614
+ <code class="language-html"
615
+ >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
616
+ </code></pre>
617
+ <blockquote>
618
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
619
+ </blockquote>
620
+ </div>
621
+ </div>
622
+ <div class="content font-class">
623
+ <ul class="icon_lists dib-box">
624
+
625
+ <li class="dib">
626
+ <span class="icon iconfont icon_kecheng_fill"></span>
627
+ <div class="name">
628
+ icon_课程_fill
629
+ </div>
630
+ <div class="code-name">.icon_kecheng_fill
631
+ </div>
632
+ </li>
633
+
634
+ <li class="dib">
635
+ <span class="icon iconfont web_icon_shijian_fill"></span>
636
+ <div class="name">
637
+ web_icon_时间_fill
638
+ </div>
639
+ <div class="code-name">.web_icon_shijian_fill
640
+ </div>
641
+ </li>
642
+
643
+ <li class="dib">
644
+ <span class="icon iconfont icon_yanxiuhuodong_fill"></span>
645
+ <div class="name">
646
+ icon_研修活动_fill
647
+ </div>
648
+ <div class="code-name">.icon_yanxiuhuodong_fill
649
+ </div>
650
+ </li>
651
+
652
+ <li class="dib">
653
+ <span class="icon iconfont app_icon_qiye_line"></span>
654
+ <div class="name">
655
+ app_icon_企业_line
656
+ </div>
657
+ <div class="code-name">.app_icon_qiye_line
658
+ </div>
659
+ </li>
660
+
661
+ <li class="dib">
662
+ <span class="icon iconfont live_fill"></span>
663
+ <div class="name">
664
+ live_fill
665
+ </div>
666
+ <div class="code-name">.live_fill
667
+ </div>
668
+ </li>
669
+
670
+ <li class="dib">
671
+ <span class="icon iconfont app_icon_time_linear"></span>
672
+ <div class="name">
673
+ app_icon_time_linear
674
+ </div>
675
+ <div class="code-name">.app_icon_time_linear
676
+ </div>
677
+ </li>
678
+
679
+ <li class="dib">
680
+ <span class="icon iconfont a-app_icon_keben_line1"></span>
681
+ <div class="name">
682
+ app_icon_课本_line 1
683
+ </div>
684
+ <div class="code-name">.a-app_icon_keben_line1
685
+ </div>
686
+ </li>
687
+
688
+ <li class="dib">
689
+ <span class="icon iconfont app_icon_keben_line1"></span>
690
+ <div class="name">
691
+ app_icon_课本_line
692
+ </div>
693
+ <div class="code-name">.app_icon_keben_line1
694
+ </div>
695
+ </li>
696
+
697
+ <li class="dib">
698
+ <span class="icon iconfont app_icon_application_linear1"></span>
699
+ <div class="name">
700
+ app_icon_application_linear
701
+ </div>
702
+ <div class="code-name">.app_icon_application_linear1
703
+ </div>
704
+ </li>
705
+
706
+ <li class="dib">
707
+ <span class="icon iconfont xuanze_full-selection"></span>
708
+ <div class="name">
709
+ 选择_full-selection
710
+ </div>
711
+ <div class="code-name">.xuanze_full-selection
712
+ </div>
713
+ </li>
714
+
715
+ <li class="dib">
716
+ <span class="icon iconfont web_icon_keshi_fill"></span>
717
+ <div class="name">
718
+ web_icon_课时_fill
719
+ </div>
720
+ <div class="code-name">.web_icon_keshi_fill
721
+ </div>
722
+ </li>
723
+
724
+ <li class="dib">
725
+ <span class="icon iconfont app_icon_bofang_fill"></span>
726
+ <div class="name">
727
+ app_icon_播放_fill
728
+ </div>
729
+ <div class="code-name">.app_icon_bofang_fill
730
+ </div>
731
+ </li>
732
+
733
+ <li class="dib">
734
+ <span class="icon iconfont app_icon_fankui_fill"></span>
735
+ <div class="name">
736
+ app_icon_反馈_fill
737
+ </div>
738
+ <div class="code-name">.app_icon_fankui_fill
739
+ </div>
740
+ </li>
741
+
742
+ <li class="dib">
743
+ <span class="icon iconfont app_icon_dianzan_fill"></span>
744
+ <div class="name">
745
+ app_icon_点赞_fill
746
+ </div>
747
+ <div class="code-name">.app_icon_dianzan_fill
748
+ </div>
749
+ </li>
750
+
751
+ <li class="dib">
752
+ <span class="icon iconfont app_icon_xiazai_fill"></span>
753
+ <div class="name">
754
+ app_icon_下载_fill
755
+ </div>
756
+ <div class="code-name">.app_icon_xiazai_fill
757
+ </div>
758
+ </li>
759
+
760
+ <li class="dib">
761
+ <span class="icon iconfont app_icon_shoucang_fill"></span>
762
+ <div class="name">
763
+ app_icon_收藏_fill
764
+ </div>
765
+ <div class="code-name">.app_icon_shoucang_fill
766
+ </div>
767
+ </li>
768
+
769
+ <li class="dib">
770
+ <span class="icon iconfont app_icon_pingfen_fill"></span>
771
+ <div class="name">
772
+ app_icon_评分_fill
773
+ </div>
774
+ <div class="code-name">.app_icon_pingfen_fill
775
+ </div>
776
+ </li>
777
+
778
+ <li class="dib">
779
+ <span class="icon iconfont web__icon_danyuan_fill"></span>
780
+ <div class="name">
781
+ web__icon_单元_fill
782
+ </div>
783
+ <div class="code-name">.web__icon_danyuan_fill
784
+ </div>
785
+ </li>
786
+
787
+ <li class="dib">
788
+ <span class="icon iconfont web_icon_fensi_fill"></span>
789
+ <div class="name">
790
+ web_icon_粉丝_fill
791
+ </div>
792
+ <div class="code-name">.web_icon_fensi_fill
793
+ </div>
794
+ </li>
795
+
796
+ <li class="dib">
797
+ <span class="icon iconfont app_icon_zanting_fill"></span>
798
+ <div class="name">
799
+ app_icon_暂停_fill
800
+ </div>
801
+ <div class="code-name">.app_icon_zanting_fill
802
+ </div>
803
+ </li>
804
+
805
+ <li class="dib">
806
+ <span class="icon iconfont web__icon_zuozhe_fill"></span>
807
+ <div class="name">
808
+ web__icon_作者_fill
809
+ </div>
810
+ <div class="code-name">.web__icon_zuozhe_fill
811
+ </div>
812
+ </li>
813
+
814
+ <li class="dib">
815
+ <span class="icon iconfont web_icon_keben_fill"></span>
816
+ <div class="name">
817
+ web_icon_课本_fill
818
+ </div>
819
+ <div class="code-name">.web_icon_keben_fill
820
+ </div>
821
+ </li>
822
+
823
+ <li class="dib">
824
+ <span class="icon iconfont web_icon_guanzhu_fill"></span>
825
+ <div class="name">
826
+ web_icon_关注_fill
827
+ </div>
828
+ <div class="code-name">.web_icon_guanzhu_fill
829
+ </div>
830
+ </li>
831
+
832
+ <li class="dib">
833
+ <span class="icon iconfont app_icon_gengduo_line"></span>
834
+ <div class="name">
835
+ app_icon_更多_line
836
+ </div>
837
+ <div class="code-name">.app_icon_gengduo_line
838
+ </div>
839
+ </li>
840
+
841
+ <li class="dib">
842
+ <span class="icon iconfont app_icon_lianjie_line"></span>
843
+ <div class="name">
844
+ app_icon_链接_line
845
+ </div>
846
+ <div class="code-name">.app_icon_lianjie_line
847
+ </div>
848
+ </li>
849
+
850
+ <li class="dib">
851
+ <span class="icon iconfont app_icon_dianzan_line"></span>
852
+ <div class="name">
853
+ app_icon_点赞_line
854
+ </div>
855
+ <div class="code-name">.app_icon_dianzan_line
856
+ </div>
857
+ </li>
858
+
859
+ <li class="dib">
860
+ <span class="icon iconfont app_icon_keben_line"></span>
861
+ <div class="name">
862
+ app_icon_课本_line
863
+ </div>
864
+ <div class="code-name">.app_icon_keben_line
865
+ </div>
866
+ </li>
867
+
868
+ <li class="dib">
869
+ <span class="icon iconfont app_icon_touping_line"></span>
870
+ <div class="name">
871
+ app_icon_投屏_line
872
+ </div>
873
+ <div class="code-name">.app_icon_touping_line
874
+ </div>
875
+ </li>
876
+
877
+ <li class="dib">
878
+ <span class="icon iconfont app_icon_taolun_line"></span>
879
+ <div class="name">
880
+ app_icon_讨论_line
881
+ </div>
882
+ <div class="code-name">.app_icon_taolun_line
883
+ </div>
884
+ </li>
885
+
886
+ <li class="dib">
887
+ <span class="icon iconfont app_icon_shoucang_line"></span>
888
+ <div class="name">
889
+ app_icon_收藏_line
890
+ </div>
891
+ <div class="code-name">.app_icon_shoucang_line
892
+ </div>
893
+ </li>
894
+
895
+ <li class="dib">
896
+ <span class="icon iconfont app_icon_xunhuan_line"></span>
897
+ <div class="name">
898
+ app_icon_循环_line
899
+ </div>
900
+ <div class="code-name">.app_icon_xunhuan_line
901
+ </div>
902
+ </li>
903
+
904
+ <li class="dib">
905
+ <span class="icon iconfont app_icon_xiazai_line"></span>
906
+ <div class="name">
907
+ app_icon_下载_line
908
+ </div>
909
+ <div class="code-name">.app_icon_xiazai_line
910
+ </div>
911
+ </li>
912
+
913
+ <li class="dib">
914
+ <span class="icon iconfont app_icon_quanping_line"></span>
915
+ <div class="name">
916
+ app_icon_全屏_line
917
+ </div>
918
+ <div class="code-name">.app_icon_quanping_line
919
+ </div>
920
+ </li>
921
+
922
+ <li class="dib">
923
+ <span class="icon iconfont app_icon_zuoye_line"></span>
924
+ <div class="name">
925
+ app_icon_课后练习_line
926
+ </div>
927
+ <div class="code-name">.app_icon_zuoye_line
928
+ </div>
929
+ </li>
930
+
931
+ <li class="dib">
932
+ <span class="icon iconfont app_icon_zhuanfa_line"></span>
933
+ <div class="name">
934
+ app_icon_转发_line
935
+ </div>
936
+ <div class="code-name">.app_icon_zhuanfa_line
937
+ </div>
938
+ </li>
939
+
940
+ <li class="dib">
941
+ <span class="icon iconfont app_icon_zuoye_line-2"></span>
942
+ <div class="name">
943
+ app_icon_作业_line-2
944
+ </div>
945
+ <div class="code-name">.app_icon_zuoye_line-2
946
+ </div>
947
+ </li>
948
+
949
+ <li class="dib">
950
+ <span class="icon iconfont app_icon_application_linear"></span>
951
+ <div class="name">
952
+ app_icon_application_linear
953
+ </div>
954
+ <div class="code-name">.app_icon_application_linear
955
+ </div>
956
+ </li>
957
+
958
+ <li class="dib">
959
+ <span class="icon iconfont app_icon_land_linear"></span>
960
+ <div class="name">
961
+ app_icon_land_linear
962
+ </div>
963
+ <div class="code-name">.app_icon_land_linear
964
+ </div>
965
+ </li>
966
+
967
+ <li class="dib">
968
+ <span class="icon iconfont app_icon_explain_linear"></span>
969
+ <div class="name">
970
+ app_icon_explain_linear
971
+ </div>
972
+ <div class="code-name">.app_icon_explain_linear
973
+ </div>
974
+ </li>
975
+
976
+ <li class="dib">
977
+ <span class="icon iconfont app_icon_problem_linear"></span>
978
+ <div class="name">
979
+ app_icon_problem_linear
980
+ </div>
981
+ <div class="code-name">.app_icon_problem_linear
982
+ </div>
983
+ </li>
984
+
985
+ <li class="dib">
986
+ <span class="icon iconfont app_icon_play_linear"></span>
987
+ <div class="name">
988
+ app_icon_play_linear
989
+ </div>
990
+ <div class="code-name">.app_icon_play_linear
991
+ </div>
992
+ </li>
993
+
994
+ <li class="dib">
995
+ <span class="icon iconfont app_icon_search_linear"></span>
996
+ <div class="name">
997
+ app_icon_search_linear
998
+ </div>
999
+ <div class="code-name">.app_icon_search_linear
1000
+ </div>
1001
+ </li>
1002
+
1003
+ <li class="dib">
1004
+ <span class="icon iconfont app_icon_equipment_linear"></span>
1005
+ <div class="name">
1006
+ app_icon_equipment_linear
1007
+ </div>
1008
+ <div class="code-name">.app_icon_equipment_linear
1009
+ </div>
1010
+ </li>
1011
+
1012
+ <li class="dib">
1013
+ <span class="icon iconfont app_icon_administrators_linear"></span>
1014
+ <div class="name">
1015
+ app_icon_administrators_linear
1016
+ </div>
1017
+ <div class="code-name">.app_icon_administrators_linear
1018
+ </div>
1019
+ </li>
1020
+
1021
+ <li class="dib">
1022
+ <span class="icon iconfont icon_upload_cloud_line"></span>
1023
+ <div class="name">
1024
+ icon_upload_cloud_line
1025
+ </div>
1026
+ <div class="code-name">.icon_upload_cloud_line
1027
+ </div>
1028
+ </li>
1029
+
1030
+ <li class="dib">
1031
+ <span class="icon iconfont icon_shuaxin_line"></span>
1032
+ <div class="name">
1033
+ icon_刷新_line
1034
+ </div>
1035
+ <div class="code-name">.icon_shuaxin_line
1036
+ </div>
1037
+ </li>
1038
+
1039
+ <li class="dib">
1040
+ <span class="icon iconfont icon_yulan_linear"></span>
1041
+ <div class="name">
1042
+ icon_预览_linear
1043
+ </div>
1044
+ <div class="code-name">.icon_yulan_linear
1045
+ </div>
1046
+ </li>
1047
+
1048
+ <li class="dib">
1049
+ <span class="icon iconfont icon_more_fill"></span>
1050
+ <div class="name">
1051
+ icon_more_fill
1052
+ </div>
1053
+ <div class="code-name">.icon_more_fill
1054
+ </div>
1055
+ </li>
1056
+
1057
+ <li class="dib">
1058
+ <span class="icon iconfont icon_calendarCheck_line"></span>
1059
+ <div class="name">
1060
+ icon_calendarCheck_line
1061
+ </div>
1062
+ <div class="code-name">.icon_calendarCheck_line
1063
+ </div>
1064
+ </li>
1065
+
1066
+ <li class="dib">
1067
+ <span class="icon iconfont icon_userFollow_line"></span>
1068
+ <div class="name">
1069
+ icon_userFollow_line
1070
+ </div>
1071
+ <div class="code-name">.icon_userFollow_line
1072
+ </div>
1073
+ </li>
1074
+
1075
+ <li class="dib">
1076
+ <span class="icon iconfont icon_xiazai2_line"></span>
1077
+ <div class="name">
1078
+ icon_下载2_line
1079
+ </div>
1080
+ <div class="code-name">.icon_xiazai2_line
1081
+ </div>
1082
+ </li>
1083
+
1084
+ <li class="dib">
1085
+ <span class="icon iconfont icon_daka_line"></span>
1086
+ <div class="name">
1087
+ icon_打卡_line
1088
+ </div>
1089
+ <div class="code-name">.icon_daka_line
1090
+ </div>
1091
+ </li>
1092
+
1093
+ <li class="dib">
1094
+ <span class="icon iconfont icon_bianji_line"></span>
1095
+ <div class="name">
1096
+ icon_编辑_line
1097
+ </div>
1098
+ <div class="code-name">.icon_bianji_line
1099
+ </div>
1100
+ </li>
1101
+
1102
+ <li class="dib">
1103
+ <span class="icon iconfont icon_filter-line"></span>
1104
+ <div class="name">
1105
+ icon_filter-line
1106
+ </div>
1107
+ <div class="code-name">.icon_filter-line
1108
+ </div>
1109
+ </li>
1110
+
1111
+ <li class="dib">
1112
+ <span class="icon iconfont icon_download-fill"></span>
1113
+ <div class="name">
1114
+ icon_download-fill
1115
+ </div>
1116
+ <div class="code-name">.icon_download-fill
1117
+ </div>
1118
+ </li>
1119
+
1120
+ <li class="dib">
1121
+ <span class="icon iconfont icon_xiaolian_line"></span>
1122
+ <div class="name">
1123
+ icon_笑脸_line
1124
+ </div>
1125
+ <div class="code-name">.icon_xiaolian_line
1126
+ </div>
1127
+ </li>
1128
+
1129
+ <li class="dib">
1130
+ <span class="icon iconfont icon_closeCircle_line"></span>
1131
+ <div class="name">
1132
+ icon_closeCircle_line
1133
+ </div>
1134
+ <div class="code-name">.icon_closeCircle_line
1135
+ </div>
1136
+ </li>
1137
+
1138
+ <li class="dib">
1139
+ <span class="icon iconfont icon_close-fill"></span>
1140
+ <div class="name">
1141
+ icon_close-fill
1142
+ </div>
1143
+ <div class="code-name">.icon_close-fill
1144
+ </div>
1145
+ </li>
1146
+
1147
+ <li class="dib">
1148
+ <span class="icon iconfont icon_earth_linear"></span>
1149
+ <div class="name">
1150
+ icon_earth_linear
1151
+ </div>
1152
+ <div class="code-name">.icon_earth_linear
1153
+ </div>
1154
+ </li>
1155
+
1156
+ <li class="dib">
1157
+ <span class="icon iconfont icon_delete_linear"></span>
1158
+ <div class="name">
1159
+ icon_delete_linear
1160
+ </div>
1161
+ <div class="code-name">.icon_delete_linear
1162
+ </div>
1163
+ </li>
1164
+
1165
+ <li class="dib">
1166
+ <span class="icon iconfont icon_teaching_linear"></span>
1167
+ <div class="name">
1168
+ icon_teaching_linear
1169
+ </div>
1170
+ <div class="code-name">.icon_teaching_linear
1171
+ </div>
1172
+ </li>
1173
+
1174
+ <li class="dib">
1175
+ <span class="icon iconfont icon_live_fill"></span>
1176
+ <div class="name">
1177
+ icon_live_fill
1178
+ </div>
1179
+ <div class="code-name">.icon_live_fill
1180
+ </div>
1181
+ </li>
1182
+
1183
+ <li class="dib">
1184
+ <span class="icon iconfont icon_checkbox_fill"></span>
1185
+ <div class="name">
1186
+ icon_checkbox_fill
1187
+ </div>
1188
+ <div class="code-name">.icon_checkbox_fill
1189
+ </div>
1190
+ </li>
1191
+
1192
+ <li class="dib">
1193
+ <span class="icon iconfont icon_processing_fill"></span>
1194
+ <div class="name">
1195
+ icon_processing_fill
1196
+ </div>
1197
+ <div class="code-name">.icon_processing_fill
1198
+ </div>
1199
+ </li>
1200
+
1201
+ <li class="dib">
1202
+ <span class="icon iconfont icon_arrowUp_linear"></span>
1203
+ <div class="name">
1204
+ icon_arrowUp_linear
1205
+ </div>
1206
+ <div class="code-name">.icon_arrowUp_linear
1207
+ </div>
1208
+ </li>
1209
+
1210
+ <li class="dib">
1211
+ <span class="icon iconfont icon_arrowDropdown_linear"></span>
1212
+ <div class="name">
1213
+ icon_arrowDropdown_linear
1214
+ </div>
1215
+ <div class="code-name">.icon_arrowDropdown_linear
1216
+ </div>
1217
+ </li>
1218
+
1219
+ <li class="dib">
1220
+ <span class="icon iconfont icon_arrowRight_linear"></span>
1221
+ <div class="name">
1222
+ icon_arrowRight_linear
1223
+ </div>
1224
+ <div class="code-name">.icon_arrowRight_linear
1225
+ </div>
1226
+ </li>
1227
+
1228
+ <li class="dib">
1229
+ <span class="icon iconfont icon_checkbox_linear"></span>
1230
+ <div class="name">
1231
+ icon_checkbox_linear
1232
+ </div>
1233
+ <div class="code-name">.icon_checkbox_linear
1234
+ </div>
1235
+ </li>
1236
+
1237
+ <li class="dib">
1238
+ <span class="icon iconfont icon_arrowLeft_linear"></span>
1239
+ <div class="name">
1240
+ icon_arrowLeft_linear
1241
+ </div>
1242
+ <div class="code-name">.icon_arrowLeft_linear
1243
+ </div>
1244
+ </li>
1245
+
1246
+ <li class="dib">
1247
+ <span class="icon iconfont icon_download2_linear"></span>
1248
+ <div class="name">
1249
+ icon_download2_linear
1250
+ </div>
1251
+ <div class="code-name">.icon_download2_linear
1252
+ </div>
1253
+ </li>
1254
+
1255
+ <li class="dib">
1256
+ <span class="icon iconfont icon_fileList_linear"></span>
1257
+ <div class="name">
1258
+ icon_fileList_linear
1259
+ </div>
1260
+ <div class="code-name">.icon_fileList_linear
1261
+ </div>
1262
+ </li>
1263
+
1264
+ <li class="dib">
1265
+ <span class="icon iconfont icon_fileVideo_linear"></span>
1266
+ <div class="name">
1267
+ icon_fileVideo_linear
1268
+ </div>
1269
+ <div class="code-name">.icon_fileVideo_linear
1270
+ </div>
1271
+ </li>
1272
+
1273
+ <li class="dib">
1274
+ <span class="icon iconfont icon_download_linear"></span>
1275
+ <div class="name">
1276
+ icon_download_linear
1277
+ </div>
1278
+ <div class="code-name">.icon_download_linear
1279
+ </div>
1280
+ </li>
1281
+
1282
+ <li class="dib">
1283
+ <span class="icon iconfont icon_search_linear"></span>
1284
+ <div class="name">
1285
+ icon_search_linear
1286
+ </div>
1287
+ <div class="code-name">.icon_search_linear
1288
+ </div>
1289
+ </li>
1290
+
1291
+ <li class="dib">
1292
+ <span class="icon iconfont icon_toggle_linear"></span>
1293
+ <div class="name">
1294
+ icon_toggle_linear
1295
+ </div>
1296
+ <div class="code-name">.icon_toggle_linear
1297
+ </div>
1298
+ </li>
1299
+
1300
+ <li class="dib">
1301
+ <span class="icon iconfont icon_star_linear"></span>
1302
+ <div class="name">
1303
+ icon_star_linear
1304
+ </div>
1305
+ <div class="code-name">.icon_star_linear
1306
+ </div>
1307
+ </li>
1308
+
1309
+ <li class="dib">
1310
+ <span class="icon iconfont icon_fileText_fill"></span>
1311
+ <div class="name">
1312
+ icon_fileText_fill
1313
+ </div>
1314
+ <div class="code-name">.icon_fileText_fill
1315
+ </div>
1316
+ </li>
1317
+
1318
+ <li class="dib">
1319
+ <span class="icon iconfont icon_evaluate_fill"></span>
1320
+ <div class="name">
1321
+ icon_evaluate_fill
1322
+ </div>
1323
+ <div class="code-name">.icon_evaluate_fill
1324
+ </div>
1325
+ </li>
1326
+
1327
+ <li class="dib">
1328
+ <span class="icon iconfont icon_fileVideo_fill"></span>
1329
+ <div class="name">
1330
+ icon_fileVideo_fill
1331
+ </div>
1332
+ <div class="code-name">.icon_fileVideo_fill
1333
+ </div>
1334
+ </li>
1335
+
1336
+ <li class="dib">
1337
+ <span class="icon iconfont icon_feedback_fill"></span>
1338
+ <div class="name">
1339
+ icon_feedback_fill
1340
+ </div>
1341
+ <div class="code-name">.icon_feedback_fill
1342
+ </div>
1343
+ </li>
1344
+
1345
+ <li class="dib">
1346
+ <span class="icon iconfont icon_information_fill"></span>
1347
+ <div class="name">
1348
+ icon_information_fill
1349
+ </div>
1350
+ <div class="code-name">.icon_information_fill
1351
+ </div>
1352
+ </li>
1353
+
1354
+ <li class="dib">
1355
+ <span class="icon iconfont icon_star_fill"></span>
1356
+ <div class="name">
1357
+ icon_star_fill
1358
+ </div>
1359
+ <div class="code-name">.icon_star_fill
1360
+ </div>
1361
+ </li>
1362
+
1363
+ <li class="dib">
1364
+ <span class="icon iconfont icon_play_fill"></span>
1365
+ <div class="name">
1366
+ icon_play_fill
1367
+ </div>
1368
+ <div class="code-name">.icon_play_fill
1369
+ </div>
1370
+ </li>
1371
+
1372
+ <li class="dib">
1373
+ <span class="icon iconfont icon_file_fill"></span>
1374
+ <div class="name">
1375
+ icon_file_fill
1376
+ </div>
1377
+ <div class="code-name">.icon_file_fill
1378
+ </div>
1379
+ </li>
1380
+
1381
+ <li class="dib">
1382
+ <span class="icon iconfont icon_hotel_fill"></span>
1383
+ <div class="name">
1384
+ icon_hotel_fill
1385
+ </div>
1386
+ <div class="code-name">.icon_hotel_fill
1387
+ </div>
1388
+ </li>
1389
+
1390
+ <li class="dib">
1391
+ <span class="icon iconfont icon_thumb_fill"></span>
1392
+ <div class="name">
1393
+ icon_thumb_fill
1394
+ </div>
1395
+ <div class="code-name">.icon_thumb_fill
1396
+ </div>
1397
+ </li>
1398
+
1399
+ <li class="dib">
1400
+ <span class="icon iconfont icon_draft_fill"></span>
1401
+ <div class="name">
1402
+ icon_draft_fill
1403
+ </div>
1404
+ <div class="code-name">.icon_draft_fill
1405
+ </div>
1406
+ </li>
1407
+
1408
+ </ul>
1409
+ <div class="article markdown">
1410
+ <h2 id="font-class-">font-class 引用</h2>
1411
+ <hr>
1412
+
1413
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
1414
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
1415
+ <ul>
1416
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
1417
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
1418
+ </ul>
1419
+ <p>使用步骤如下：</p>
1420
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
1421
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
1422
+ </code></pre>
1423
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
1424
+ <pre><code class="language-html">&lt;span class="iconfont xxx"&gt;&lt;/span&gt;
1425
+ </code></pre>
1426
+ <blockquote>
1427
+ <p>"
1428
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
1429
+ </blockquote>
1430
+ </div>
1431
+ </div>
1432
+ <div class="content symbol">
1433
+ <ul class="icon_lists dib-box">
1434
+
1435
+ <li class="dib">
1436
+ <svg class="icon svg-icon" aria-hidden="true">
1437
+ <use xlink:href="#icon_kecheng_fill"></use>
1438
+ </svg>
1439
+ <div class="name">icon_课程_fill</div>
1440
+ <div class="code-name">#icon_kecheng_fill</div>
1441
+ </li>
1442
+
1443
+ <li class="dib">
1444
+ <svg class="icon svg-icon" aria-hidden="true">
1445
+ <use xlink:href="#web_icon_shijian_fill"></use>
1446
+ </svg>
1447
+ <div class="name">web_icon_时间_fill</div>
1448
+ <div class="code-name">#web_icon_shijian_fill</div>
1449
+ </li>
1450
+
1451
+ <li class="dib">
1452
+ <svg class="icon svg-icon" aria-hidden="true">
1453
+ <use xlink:href="#icon_yanxiuhuodong_fill"></use>
1454
+ </svg>
1455
+ <div class="name">icon_研修活动_fill</div>
1456
+ <div class="code-name">#icon_yanxiuhuodong_fill</div>
1457
+ </li>
1458
+
1459
+ <li class="dib">
1460
+ <svg class="icon svg-icon" aria-hidden="true">
1461
+ <use xlink:href="#app_icon_qiye_line"></use>
1462
+ </svg>
1463
+ <div class="name">app_icon_企业_line</div>
1464
+ <div class="code-name">#app_icon_qiye_line</div>
1465
+ </li>
1466
+
1467
+ <li class="dib">
1468
+ <svg class="icon svg-icon" aria-hidden="true">
1469
+ <use xlink:href="#live_fill"></use>
1470
+ </svg>
1471
+ <div class="name">live_fill</div>
1472
+ <div class="code-name">#live_fill</div>
1473
+ </li>
1474
+
1475
+ <li class="dib">
1476
+ <svg class="icon svg-icon" aria-hidden="true">
1477
+ <use xlink:href="#app_icon_time_linear"></use>
1478
+ </svg>
1479
+ <div class="name">app_icon_time_linear</div>
1480
+ <div class="code-name">#app_icon_time_linear</div>
1481
+ </li>
1482
+
1483
+ <li class="dib">
1484
+ <svg class="icon svg-icon" aria-hidden="true">
1485
+ <use xlink:href="#a-app_icon_keben_line1"></use>
1486
+ </svg>
1487
+ <div class="name">app_icon_课本_line 1</div>
1488
+ <div class="code-name">#a-app_icon_keben_line1</div>
1489
+ </li>
1490
+
1491
+ <li class="dib">
1492
+ <svg class="icon svg-icon" aria-hidden="true">
1493
+ <use xlink:href="#app_icon_keben_line1"></use>
1494
+ </svg>
1495
+ <div class="name">app_icon_课本_line</div>
1496
+ <div class="code-name">#app_icon_keben_line1</div>
1497
+ </li>
1498
+
1499
+ <li class="dib">
1500
+ <svg class="icon svg-icon" aria-hidden="true">
1501
+ <use xlink:href="#app_icon_application_linear1"></use>
1502
+ </svg>
1503
+ <div class="name">app_icon_application_linear</div>
1504
+ <div class="code-name">#app_icon_application_linear1</div>
1505
+ </li>
1506
+
1507
+ <li class="dib">
1508
+ <svg class="icon svg-icon" aria-hidden="true">
1509
+ <use xlink:href="#xuanze_full-selection"></use>
1510
+ </svg>
1511
+ <div class="name">选择_full-selection</div>
1512
+ <div class="code-name">#xuanze_full-selection</div>
1513
+ </li>
1514
+
1515
+ <li class="dib">
1516
+ <svg class="icon svg-icon" aria-hidden="true">
1517
+ <use xlink:href="#web_icon_keshi_fill"></use>
1518
+ </svg>
1519
+ <div class="name">web_icon_课时_fill</div>
1520
+ <div class="code-name">#web_icon_keshi_fill</div>
1521
+ </li>
1522
+
1523
+ <li class="dib">
1524
+ <svg class="icon svg-icon" aria-hidden="true">
1525
+ <use xlink:href="#app_icon_bofang_fill"></use>
1526
+ </svg>
1527
+ <div class="name">app_icon_播放_fill</div>
1528
+ <div class="code-name">#app_icon_bofang_fill</div>
1529
+ </li>
1530
+
1531
+ <li class="dib">
1532
+ <svg class="icon svg-icon" aria-hidden="true">
1533
+ <use xlink:href="#app_icon_fankui_fill"></use>
1534
+ </svg>
1535
+ <div class="name">app_icon_反馈_fill</div>
1536
+ <div class="code-name">#app_icon_fankui_fill</div>
1537
+ </li>
1538
+
1539
+ <li class="dib">
1540
+ <svg class="icon svg-icon" aria-hidden="true">
1541
+ <use xlink:href="#app_icon_dianzan_fill"></use>
1542
+ </svg>
1543
+ <div class="name">app_icon_点赞_fill</div>
1544
+ <div class="code-name">#app_icon_dianzan_fill</div>
1545
+ </li>
1546
+
1547
+ <li class="dib">
1548
+ <svg class="icon svg-icon" aria-hidden="true">
1549
+ <use xlink:href="#app_icon_xiazai_fill"></use>
1550
+ </svg>
1551
+ <div class="name">app_icon_下载_fill</div>
1552
+ <div class="code-name">#app_icon_xiazai_fill</div>
1553
+ </li>
1554
+
1555
+ <li class="dib">
1556
+ <svg class="icon svg-icon" aria-hidden="true">
1557
+ <use xlink:href="#app_icon_shoucang_fill"></use>
1558
+ </svg>
1559
+ <div class="name">app_icon_收藏_fill</div>
1560
+ <div class="code-name">#app_icon_shoucang_fill</div>
1561
+ </li>
1562
+
1563
+ <li class="dib">
1564
+ <svg class="icon svg-icon" aria-hidden="true">
1565
+ <use xlink:href="#app_icon_pingfen_fill"></use>
1566
+ </svg>
1567
+ <div class="name">app_icon_评分_fill</div>
1568
+ <div class="code-name">#app_icon_pingfen_fill</div>
1569
+ </li>
1570
+
1571
+ <li class="dib">
1572
+ <svg class="icon svg-icon" aria-hidden="true">
1573
+ <use xlink:href="#web__icon_danyuan_fill"></use>
1574
+ </svg>
1575
+ <div class="name">web__icon_单元_fill</div>
1576
+ <div class="code-name">#web__icon_danyuan_fill</div>
1577
+ </li>
1578
+
1579
+ <li class="dib">
1580
+ <svg class="icon svg-icon" aria-hidden="true">
1581
+ <use xlink:href="#web_icon_fensi_fill"></use>
1582
+ </svg>
1583
+ <div class="name">web_icon_粉丝_fill</div>
1584
+ <div class="code-name">#web_icon_fensi_fill</div>
1585
+ </li>
1586
+
1587
+ <li class="dib">
1588
+ <svg class="icon svg-icon" aria-hidden="true">
1589
+ <use xlink:href="#app_icon_zanting_fill"></use>
1590
+ </svg>
1591
+ <div class="name">app_icon_暂停_fill</div>
1592
+ <div class="code-name">#app_icon_zanting_fill</div>
1593
+ </li>
1594
+
1595
+ <li class="dib">
1596
+ <svg class="icon svg-icon" aria-hidden="true">
1597
+ <use xlink:href="#web__icon_zuozhe_fill"></use>
1598
+ </svg>
1599
+ <div class="name">web__icon_作者_fill</div>
1600
+ <div class="code-name">#web__icon_zuozhe_fill</div>
1601
+ </li>
1602
+
1603
+ <li class="dib">
1604
+ <svg class="icon svg-icon" aria-hidden="true">
1605
+ <use xlink:href="#web_icon_keben_fill"></use>
1606
+ </svg>
1607
+ <div class="name">web_icon_课本_fill</div>
1608
+ <div class="code-name">#web_icon_keben_fill</div>
1609
+ </li>
1610
+
1611
+ <li class="dib">
1612
+ <svg class="icon svg-icon" aria-hidden="true">
1613
+ <use xlink:href="#web_icon_guanzhu_fill"></use>
1614
+ </svg>
1615
+ <div class="name">web_icon_关注_fill</div>
1616
+ <div class="code-name">#web_icon_guanzhu_fill</div>
1617
+ </li>
1618
+
1619
+ <li class="dib">
1620
+ <svg class="icon svg-icon" aria-hidden="true">
1621
+ <use xlink:href="#app_icon_gengduo_line"></use>
1622
+ </svg>
1623
+ <div class="name">app_icon_更多_line</div>
1624
+ <div class="code-name">#app_icon_gengduo_line</div>
1625
+ </li>
1626
+
1627
+ <li class="dib">
1628
+ <svg class="icon svg-icon" aria-hidden="true">
1629
+ <use xlink:href="#app_icon_lianjie_line"></use>
1630
+ </svg>
1631
+ <div class="name">app_icon_链接_line</div>
1632
+ <div class="code-name">#app_icon_lianjie_line</div>
1633
+ </li>
1634
+
1635
+ <li class="dib">
1636
+ <svg class="icon svg-icon" aria-hidden="true">
1637
+ <use xlink:href="#app_icon_dianzan_line"></use>
1638
+ </svg>
1639
+ <div class="name">app_icon_点赞_line</div>
1640
+ <div class="code-name">#app_icon_dianzan_line</div>
1641
+ </li>
1642
+
1643
+ <li class="dib">
1644
+ <svg class="icon svg-icon" aria-hidden="true">
1645
+ <use xlink:href="#app_icon_keben_line"></use>
1646
+ </svg>
1647
+ <div class="name">app_icon_课本_line</div>
1648
+ <div class="code-name">#app_icon_keben_line</div>
1649
+ </li>
1650
+
1651
+ <li class="dib">
1652
+ <svg class="icon svg-icon" aria-hidden="true">
1653
+ <use xlink:href="#app_icon_touping_line"></use>
1654
+ </svg>
1655
+ <div class="name">app_icon_投屏_line</div>
1656
+ <div class="code-name">#app_icon_touping_line</div>
1657
+ </li>
1658
+
1659
+ <li class="dib">
1660
+ <svg class="icon svg-icon" aria-hidden="true">
1661
+ <use xlink:href="#app_icon_taolun_line"></use>
1662
+ </svg>
1663
+ <div class="name">app_icon_讨论_line</div>
1664
+ <div class="code-name">#app_icon_taolun_line</div>
1665
+ </li>
1666
+
1667
+ <li class="dib">
1668
+ <svg class="icon svg-icon" aria-hidden="true">
1669
+ <use xlink:href="#app_icon_shoucang_line"></use>
1670
+ </svg>
1671
+ <div class="name">app_icon_收藏_line</div>
1672
+ <div class="code-name">#app_icon_shoucang_line</div>
1673
+ </li>
1674
+
1675
+ <li class="dib">
1676
+ <svg class="icon svg-icon" aria-hidden="true">
1677
+ <use xlink:href="#app_icon_xunhuan_line"></use>
1678
+ </svg>
1679
+ <div class="name">app_icon_循环_line</div>
1680
+ <div class="code-name">#app_icon_xunhuan_line</div>
1681
+ </li>
1682
+
1683
+ <li class="dib">
1684
+ <svg class="icon svg-icon" aria-hidden="true">
1685
+ <use xlink:href="#app_icon_xiazai_line"></use>
1686
+ </svg>
1687
+ <div class="name">app_icon_下载_line</div>
1688
+ <div class="code-name">#app_icon_xiazai_line</div>
1689
+ </li>
1690
+
1691
+ <li class="dib">
1692
+ <svg class="icon svg-icon" aria-hidden="true">
1693
+ <use xlink:href="#app_icon_quanping_line"></use>
1694
+ </svg>
1695
+ <div class="name">app_icon_全屏_line</div>
1696
+ <div class="code-name">#app_icon_quanping_line</div>
1697
+ </li>
1698
+
1699
+ <li class="dib">
1700
+ <svg class="icon svg-icon" aria-hidden="true">
1701
+ <use xlink:href="#app_icon_zuoye_line"></use>
1702
+ </svg>
1703
+ <div class="name">app_icon_课后练习_line</div>
1704
+ <div class="code-name">#app_icon_zuoye_line</div>
1705
+ </li>
1706
+
1707
+ <li class="dib">
1708
+ <svg class="icon svg-icon" aria-hidden="true">
1709
+ <use xlink:href="#app_icon_zhuanfa_line"></use>
1710
+ </svg>
1711
+ <div class="name">app_icon_转发_line</div>
1712
+ <div class="code-name">#app_icon_zhuanfa_line</div>
1713
+ </li>
1714
+
1715
+ <li class="dib">
1716
+ <svg class="icon svg-icon" aria-hidden="true">
1717
+ <use xlink:href="#app_icon_zuoye_line-2"></use>
1718
+ </svg>
1719
+ <div class="name">app_icon_作业_line-2</div>
1720
+ <div class="code-name">#app_icon_zuoye_line-2</div>
1721
+ </li>
1722
+
1723
+ <li class="dib">
1724
+ <svg class="icon svg-icon" aria-hidden="true">
1725
+ <use xlink:href="#app_icon_application_linear"></use>
1726
+ </svg>
1727
+ <div class="name">app_icon_application_linear</div>
1728
+ <div class="code-name">#app_icon_application_linear</div>
1729
+ </li>
1730
+
1731
+ <li class="dib">
1732
+ <svg class="icon svg-icon" aria-hidden="true">
1733
+ <use xlink:href="#app_icon_land_linear"></use>
1734
+ </svg>
1735
+ <div class="name">app_icon_land_linear</div>
1736
+ <div class="code-name">#app_icon_land_linear</div>
1737
+ </li>
1738
+
1739
+ <li class="dib">
1740
+ <svg class="icon svg-icon" aria-hidden="true">
1741
+ <use xlink:href="#app_icon_explain_linear"></use>
1742
+ </svg>
1743
+ <div class="name">app_icon_explain_linear</div>
1744
+ <div class="code-name">#app_icon_explain_linear</div>
1745
+ </li>
1746
+
1747
+ <li class="dib">
1748
+ <svg class="icon svg-icon" aria-hidden="true">
1749
+ <use xlink:href="#app_icon_problem_linear"></use>
1750
+ </svg>
1751
+ <div class="name">app_icon_problem_linear</div>
1752
+ <div class="code-name">#app_icon_problem_linear</div>
1753
+ </li>
1754
+
1755
+ <li class="dib">
1756
+ <svg class="icon svg-icon" aria-hidden="true">
1757
+ <use xlink:href="#app_icon_play_linear"></use>
1758
+ </svg>
1759
+ <div class="name">app_icon_play_linear</div>
1760
+ <div class="code-name">#app_icon_play_linear</div>
1761
+ </li>
1762
+
1763
+ <li class="dib">
1764
+ <svg class="icon svg-icon" aria-hidden="true">
1765
+ <use xlink:href="#app_icon_search_linear"></use>
1766
+ </svg>
1767
+ <div class="name">app_icon_search_linear</div>
1768
+ <div class="code-name">#app_icon_search_linear</div>
1769
+ </li>
1770
+
1771
+ <li class="dib">
1772
+ <svg class="icon svg-icon" aria-hidden="true">
1773
+ <use xlink:href="#app_icon_equipment_linear"></use>
1774
+ </svg>
1775
+ <div class="name">app_icon_equipment_linear</div>
1776
+ <div class="code-name">#app_icon_equipment_linear</div>
1777
+ </li>
1778
+
1779
+ <li class="dib">
1780
+ <svg class="icon svg-icon" aria-hidden="true">
1781
+ <use xlink:href="#app_icon_administrators_linear"></use>
1782
+ </svg>
1783
+ <div class="name">app_icon_administrators_linear</div>
1784
+ <div class="code-name">#app_icon_administrators_linear</div>
1785
+ </li>
1786
+
1787
+ <li class="dib">
1788
+ <svg class="icon svg-icon" aria-hidden="true">
1789
+ <use xlink:href="#icon_upload_cloud_line"></use>
1790
+ </svg>
1791
+ <div class="name">icon_upload_cloud_line</div>
1792
+ <div class="code-name">#icon_upload_cloud_line</div>
1793
+ </li>
1794
+
1795
+ <li class="dib">
1796
+ <svg class="icon svg-icon" aria-hidden="true">
1797
+ <use xlink:href="#icon_shuaxin_line"></use>
1798
+ </svg>
1799
+ <div class="name">icon_刷新_line</div>
1800
+ <div class="code-name">#icon_shuaxin_line</div>
1801
+ </li>
1802
+
1803
+ <li class="dib">
1804
+ <svg class="icon svg-icon" aria-hidden="true">
1805
+ <use xlink:href="#icon_yulan_linear"></use>
1806
+ </svg>
1807
+ <div class="name">icon_预览_linear</div>
1808
+ <div class="code-name">#icon_yulan_linear</div>
1809
+ </li>
1810
+
1811
+ <li class="dib">
1812
+ <svg class="icon svg-icon" aria-hidden="true">
1813
+ <use xlink:href="#icon_more_fill"></use>
1814
+ </svg>
1815
+ <div class="name">icon_more_fill</div>
1816
+ <div class="code-name">#icon_more_fill</div>
1817
+ </li>
1818
+
1819
+ <li class="dib">
1820
+ <svg class="icon svg-icon" aria-hidden="true">
1821
+ <use xlink:href="#icon_calendarCheck_line"></use>
1822
+ </svg>
1823
+ <div class="name">icon_calendarCheck_line</div>
1824
+ <div class="code-name">#icon_calendarCheck_line</div>
1825
+ </li>
1826
+
1827
+ <li class="dib">
1828
+ <svg class="icon svg-icon" aria-hidden="true">
1829
+ <use xlink:href="#icon_userFollow_line"></use>
1830
+ </svg>
1831
+ <div class="name">icon_userFollow_line</div>
1832
+ <div class="code-name">#icon_userFollow_line</div>
1833
+ </li>
1834
+
1835
+ <li class="dib">
1836
+ <svg class="icon svg-icon" aria-hidden="true">
1837
+ <use xlink:href="#icon_xiazai2_line"></use>
1838
+ </svg>
1839
+ <div class="name">icon_下载2_line</div>
1840
+ <div class="code-name">#icon_xiazai2_line</div>
1841
+ </li>
1842
+
1843
+ <li class="dib">
1844
+ <svg class="icon svg-icon" aria-hidden="true">
1845
+ <use xlink:href="#icon_daka_line"></use>
1846
+ </svg>
1847
+ <div class="name">icon_打卡_line</div>
1848
+ <div class="code-name">#icon_daka_line</div>
1849
+ </li>
1850
+
1851
+ <li class="dib">
1852
+ <svg class="icon svg-icon" aria-hidden="true">
1853
+ <use xlink:href="#icon_bianji_line"></use>
1854
+ </svg>
1855
+ <div class="name">icon_编辑_line</div>
1856
+ <div class="code-name">#icon_bianji_line</div>
1857
+ </li>
1858
+
1859
+ <li class="dib">
1860
+ <svg class="icon svg-icon" aria-hidden="true">
1861
+ <use xlink:href="#icon_filter-line"></use>
1862
+ </svg>
1863
+ <div class="name">icon_filter-line</div>
1864
+ <div class="code-name">#icon_filter-line</div>
1865
+ </li>
1866
+
1867
+ <li class="dib">
1868
+ <svg class="icon svg-icon" aria-hidden="true">
1869
+ <use xlink:href="#icon_download-fill"></use>
1870
+ </svg>
1871
+ <div class="name">icon_download-fill</div>
1872
+ <div class="code-name">#icon_download-fill</div>
1873
+ </li>
1874
+
1875
+ <li class="dib">
1876
+ <svg class="icon svg-icon" aria-hidden="true">
1877
+ <use xlink:href="#icon_xiaolian_line"></use>
1878
+ </svg>
1879
+ <div class="name">icon_笑脸_line</div>
1880
+ <div class="code-name">#icon_xiaolian_line</div>
1881
+ </li>
1882
+
1883
+ <li class="dib">
1884
+ <svg class="icon svg-icon" aria-hidden="true">
1885
+ <use xlink:href="#icon_closeCircle_line"></use>
1886
+ </svg>
1887
+ <div class="name">icon_closeCircle_line</div>
1888
+ <div class="code-name">#icon_closeCircle_line</div>
1889
+ </li>
1890
+
1891
+ <li class="dib">
1892
+ <svg class="icon svg-icon" aria-hidden="true">
1893
+ <use xlink:href="#icon_close-fill"></use>
1894
+ </svg>
1895
+ <div class="name">icon_close-fill</div>
1896
+ <div class="code-name">#icon_close-fill</div>
1897
+ </li>
1898
+
1899
+ <li class="dib">
1900
+ <svg class="icon svg-icon" aria-hidden="true">
1901
+ <use xlink:href="#icon_earth_linear"></use>
1902
+ </svg>
1903
+ <div class="name">icon_earth_linear</div>
1904
+ <div class="code-name">#icon_earth_linear</div>
1905
+ </li>
1906
+
1907
+ <li class="dib">
1908
+ <svg class="icon svg-icon" aria-hidden="true">
1909
+ <use xlink:href="#icon_delete_linear"></use>
1910
+ </svg>
1911
+ <div class="name">icon_delete_linear</div>
1912
+ <div class="code-name">#icon_delete_linear</div>
1913
+ </li>
1914
+
1915
+ <li class="dib">
1916
+ <svg class="icon svg-icon" aria-hidden="true">
1917
+ <use xlink:href="#icon_teaching_linear"></use>
1918
+ </svg>
1919
+ <div class="name">icon_teaching_linear</div>
1920
+ <div class="code-name">#icon_teaching_linear</div>
1921
+ </li>
1922
+
1923
+ <li class="dib">
1924
+ <svg class="icon svg-icon" aria-hidden="true">
1925
+ <use xlink:href="#icon_live_fill"></use>
1926
+ </svg>
1927
+ <div class="name">icon_live_fill</div>
1928
+ <div class="code-name">#icon_live_fill</div>
1929
+ </li>
1930
+
1931
+ <li class="dib">
1932
+ <svg class="icon svg-icon" aria-hidden="true">
1933
+ <use xlink:href="#icon_checkbox_fill"></use>
1934
+ </svg>
1935
+ <div class="name">icon_checkbox_fill</div>
1936
+ <div class="code-name">#icon_checkbox_fill</div>
1937
+ </li>
1938
+
1939
+ <li class="dib">
1940
+ <svg class="icon svg-icon" aria-hidden="true">
1941
+ <use xlink:href="#icon_processing_fill"></use>
1942
+ </svg>
1943
+ <div class="name">icon_processing_fill</div>
1944
+ <div class="code-name">#icon_processing_fill</div>
1945
+ </li>
1946
+
1947
+ <li class="dib">
1948
+ <svg class="icon svg-icon" aria-hidden="true">
1949
+ <use xlink:href="#icon_arrowUp_linear"></use>
1950
+ </svg>
1951
+ <div class="name">icon_arrowUp_linear</div>
1952
+ <div class="code-name">#icon_arrowUp_linear</div>
1953
+ </li>
1954
+
1955
+ <li class="dib">
1956
+ <svg class="icon svg-icon" aria-hidden="true">
1957
+ <use xlink:href="#icon_arrowDropdown_linear"></use>
1958
+ </svg>
1959
+ <div class="name">icon_arrowDropdown_linear</div>
1960
+ <div class="code-name">#icon_arrowDropdown_linear</div>
1961
+ </li>
1962
+
1963
+ <li class="dib">
1964
+ <svg class="icon svg-icon" aria-hidden="true">
1965
+ <use xlink:href="#icon_arrowRight_linear"></use>
1966
+ </svg>
1967
+ <div class="name">icon_arrowRight_linear</div>
1968
+ <div class="code-name">#icon_arrowRight_linear</div>
1969
+ </li>
1970
+
1971
+ <li class="dib">
1972
+ <svg class="icon svg-icon" aria-hidden="true">
1973
+ <use xlink:href="#icon_checkbox_linear"></use>
1974
+ </svg>
1975
+ <div class="name">icon_checkbox_linear</div>
1976
+ <div class="code-name">#icon_checkbox_linear</div>
1977
+ </li>
1978
+
1979
+ <li class="dib">
1980
+ <svg class="icon svg-icon" aria-hidden="true">
1981
+ <use xlink:href="#icon_arrowLeft_linear"></use>
1982
+ </svg>
1983
+ <div class="name">icon_arrowLeft_linear</div>
1984
+ <div class="code-name">#icon_arrowLeft_linear</div>
1985
+ </li>
1986
+
1987
+ <li class="dib">
1988
+ <svg class="icon svg-icon" aria-hidden="true">
1989
+ <use xlink:href="#icon_download2_linear"></use>
1990
+ </svg>
1991
+ <div class="name">icon_download2_linear</div>
1992
+ <div class="code-name">#icon_download2_linear</div>
1993
+ </li>
1994
+
1995
+ <li class="dib">
1996
+ <svg class="icon svg-icon" aria-hidden="true">
1997
+ <use xlink:href="#icon_fileList_linear"></use>
1998
+ </svg>
1999
+ <div class="name">icon_fileList_linear</div>
2000
+ <div class="code-name">#icon_fileList_linear</div>
2001
+ </li>
2002
+
2003
+ <li class="dib">
2004
+ <svg class="icon svg-icon" aria-hidden="true">
2005
+ <use xlink:href="#icon_fileVideo_linear"></use>
2006
+ </svg>
2007
+ <div class="name">icon_fileVideo_linear</div>
2008
+ <div class="code-name">#icon_fileVideo_linear</div>
2009
+ </li>
2010
+
2011
+ <li class="dib">
2012
+ <svg class="icon svg-icon" aria-hidden="true">
2013
+ <use xlink:href="#icon_download_linear"></use>
2014
+ </svg>
2015
+ <div class="name">icon_download_linear</div>
2016
+ <div class="code-name">#icon_download_linear</div>
2017
+ </li>
2018
+
2019
+ <li class="dib">
2020
+ <svg class="icon svg-icon" aria-hidden="true">
2021
+ <use xlink:href="#icon_search_linear"></use>
2022
+ </svg>
2023
+ <div class="name">icon_search_linear</div>
2024
+ <div class="code-name">#icon_search_linear</div>
2025
+ </li>
2026
+
2027
+ <li class="dib">
2028
+ <svg class="icon svg-icon" aria-hidden="true">
2029
+ <use xlink:href="#icon_toggle_linear"></use>
2030
+ </svg>
2031
+ <div class="name">icon_toggle_linear</div>
2032
+ <div class="code-name">#icon_toggle_linear</div>
2033
+ </li>
2034
+
2035
+ <li class="dib">
2036
+ <svg class="icon svg-icon" aria-hidden="true">
2037
+ <use xlink:href="#icon_star_linear"></use>
2038
+ </svg>
2039
+ <div class="name">icon_star_linear</div>
2040
+ <div class="code-name">#icon_star_linear</div>
2041
+ </li>
2042
+
2043
+ <li class="dib">
2044
+ <svg class="icon svg-icon" aria-hidden="true">
2045
+ <use xlink:href="#icon_fileText_fill"></use>
2046
+ </svg>
2047
+ <div class="name">icon_fileText_fill</div>
2048
+ <div class="code-name">#icon_fileText_fill</div>
2049
+ </li>
2050
+
2051
+ <li class="dib">
2052
+ <svg class="icon svg-icon" aria-hidden="true">
2053
+ <use xlink:href="#icon_evaluate_fill"></use>
2054
+ </svg>
2055
+ <div class="name">icon_evaluate_fill</div>
2056
+ <div class="code-name">#icon_evaluate_fill</div>
2057
+ </li>
2058
+
2059
+ <li class="dib">
2060
+ <svg class="icon svg-icon" aria-hidden="true">
2061
+ <use xlink:href="#icon_fileVideo_fill"></use>
2062
+ </svg>
2063
+ <div class="name">icon_fileVideo_fill</div>
2064
+ <div class="code-name">#icon_fileVideo_fill</div>
2065
+ </li>
2066
+
2067
+ <li class="dib">
2068
+ <svg class="icon svg-icon" aria-hidden="true">
2069
+ <use xlink:href="#icon_feedback_fill"></use>
2070
+ </svg>
2071
+ <div class="name">icon_feedback_fill</div>
2072
+ <div class="code-name">#icon_feedback_fill</div>
2073
+ </li>
2074
+
2075
+ <li class="dib">
2076
+ <svg class="icon svg-icon" aria-hidden="true">
2077
+ <use xlink:href="#icon_information_fill"></use>
2078
+ </svg>
2079
+ <div class="name">icon_information_fill</div>
2080
+ <div class="code-name">#icon_information_fill</div>
2081
+ </li>
2082
+
2083
+ <li class="dib">
2084
+ <svg class="icon svg-icon" aria-hidden="true">
2085
+ <use xlink:href="#icon_star_fill"></use>
2086
+ </svg>
2087
+ <div class="name">icon_star_fill</div>
2088
+ <div class="code-name">#icon_star_fill</div>
2089
+ </li>
2090
+
2091
+ <li class="dib">
2092
+ <svg class="icon svg-icon" aria-hidden="true">
2093
+ <use xlink:href="#icon_play_fill"></use>
2094
+ </svg>
2095
+ <div class="name">icon_play_fill</div>
2096
+ <div class="code-name">#icon_play_fill</div>
2097
+ </li>
2098
+
2099
+ <li class="dib">
2100
+ <svg class="icon svg-icon" aria-hidden="true">
2101
+ <use xlink:href="#icon_file_fill"></use>
2102
+ </svg>
2103
+ <div class="name">icon_file_fill</div>
2104
+ <div class="code-name">#icon_file_fill</div>
2105
+ </li>
2106
+
2107
+ <li class="dib">
2108
+ <svg class="icon svg-icon" aria-hidden="true">
2109
+ <use xlink:href="#icon_hotel_fill"></use>
2110
+ </svg>
2111
+ <div class="name">icon_hotel_fill</div>
2112
+ <div class="code-name">#icon_hotel_fill</div>
2113
+ </li>
2114
+
2115
+ <li class="dib">
2116
+ <svg class="icon svg-icon" aria-hidden="true">
2117
+ <use xlink:href="#icon_thumb_fill"></use>
2118
+ </svg>
2119
+ <div class="name">icon_thumb_fill</div>
2120
+ <div class="code-name">#icon_thumb_fill</div>
2121
+ </li>
2122
+
2123
+ <li class="dib">
2124
+ <svg class="icon svg-icon" aria-hidden="true">
2125
+ <use xlink:href="#icon_draft_fill"></use>
2126
+ </svg>
2127
+ <div class="name">icon_draft_fill</div>
2128
+ <div class="code-name">#icon_draft_fill</div>
2129
+ </li>
2130
+
2131
+ </ul>
2132
+ <div class="article markdown">
2133
+ <h2 id="symbol-">Symbol 引用</h2>
2134
+ <hr>
2135
+
2136
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
2137
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
2138
+ <ul>
2139
+ <li>支持多色图标了，不再受单色限制。</li>
2140
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
2141
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
2142
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
2143
+ </ul>
2144
+ <p>使用步骤如下：</p>
2145
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
2146
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
2147
+ </code></pre>
2148
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
2149
+ <pre><code class="language-html">&lt;style&gt;
2150
+ .icon {
2151
+ width: 1em;
2152
+ height: 1em;
2153
+ vertical-align: -0.15em;
2154
+ fill: currentColor;
2155
+ overflow: hidden;
2156
+ }
2157
+ &lt;/style&gt;
2158
+ </code></pre>
2159
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
2160
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
2161
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
2162
+ &lt;/svg&gt;
2163
+ </code></pre>
2164
+ </div>
2165
+ </div>
2166
+
2167
+ </div>
2168
+ </div>
2169
+ <script>
2170
+ $(document).ready(function () {
2171
+ $('.tab-container .content:first').show()
2172
+
2173
+ $('#tabs li').click(function (e) {
2174
+ var tabContent = $('.tab-container .content')
2175
+ var index = $(this).index()
2176
+
2177
+ if ($(this).hasClass('active')) {
2178
+ return
2179
+ } else {
2180
+ $('#tabs li').removeClass('active')
2181
+ $(this).addClass('active')
2182
+
2183
+ tabContent.hide().eq(index).fadeIn()
2184
+ }
2185
+ })
2186
+ })
2187
+ </script>
2188
+ </body>
2189
+ </html>