icon.php 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>icon</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=0">
  8. <link href="{__FRAME_PATH}css/bootstrap.min.css" rel="stylesheet">
  9. <link href="{__FRAME_PATH}css/font-awesome.min.css" rel="stylesheet">
  10. <script src="{__FRAME_PATH}js/jquery.min.js"></script>
  11. <style>
  12. .icons-box{ margin-top: 10px;}
  13. .list-inline li{width: 3rem;
  14. border: 1px solid #F7F4F4;
  15. text-align: center;
  16. height: 3rem;
  17. padding: 0.5rem;
  18. background-color: #FFFFFF;
  19. color: #0A0A0A;}
  20. .list-inline li:hover{
  21. color: #ff0000;
  22. border: 1px solid #ff0000;
  23. }
  24. .form-control{
  25. display: inline-block;
  26. width: 75%;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="ibox-content icons-box">
  32. <div class="form-group">
  33. <input type="email" class="form-control" id="search" placeholder="输入关键词搜索:注意全是英文">
  34. <button id="qingkong" class="btn btn-default">清空选择</button>
  35. </div>
  36. <div>
  37. <h5> v4.3.0新增图标 </h5>
  38. <ul class="list-inline">
  39. <li title="bed"><i class="fa fa-bed"></i> </li>
  40. <li title="buysellads"><i class="fa fa-buysellads"></i> </li>
  41. <li title="cart-arrow-down"><i class="fa fa-cart-arrow-down"></i> </li>
  42. <li title="cart-plus"><i class="fa fa-cart-plus"></i> </li>
  43. <li title="connectdevelop"><i class="fa fa-connectdevelop"></i> </li>
  44. <li title="dashcube"><i class="fa fa-dashcube"></i> </li>
  45. <li title="diamond"><i class="fa fa-diamond"></i> </li>
  46. <li title="facebook-official"><i class="fa fa-facebook-official"></i> </li>
  47. <li title="forumbee"><i class="fa fa-forumbee"></i> </li>
  48. <li title="heartbeat"><i class="fa fa-heartbeat"></i> </li>
  49. <li title="hotel"><i class="fa fa-hotel"></i> </li>
  50. <li title="leanpub"><i class="fa fa-leanpub"></i> </li>
  51. <li title="mars"><i class="fa fa-mars"></i> </li>
  52. <li title="mars-double"><i class="fa fa-mars-double"></i> </li>
  53. <li title="mars-stroke"><i class="fa fa-mars-stroke"></i> </li>
  54. <li title="mars-stroke-h"><i class="fa fa-mars-stroke-h"></i> </li>
  55. <li title="mars-stroke-v"><i class="fa fa-mars-stroke-v"></i> </li>
  56. <li title="medium"><i class="fa fa-medium"></i> </li>
  57. <li title="mercury"><i class="fa fa-mercury"></i> </li>
  58. <li title="motorcycle"><i class="fa fa-motorcycle"></i> </li>
  59. <li title="neuter"><i class="fa fa-neuter"></i> </li>
  60. <li title="pinterest-p"><i class="fa fa-pinterest-p"></i> </li>
  61. <li title="sellsy"><i class="fa fa-sellsy"></i> </li>
  62. <li title="server"><i class="fa fa-server"></i> </li>
  63. <li title="ship"><i class="fa fa-ship"></i> </li>
  64. <li title="shirtsinbulk"><i class="fa fa-shirtsinbulk"></i> </li>
  65. <li title="simplybuilt"><i class="fa fa-simplybuilt"></i> </li>
  66. <li title="skyatlas"><i class="fa fa-skyatlas"></i> </li>
  67. <li title="street-view"><i class="fa fa-street-view"></i> </li>
  68. <li title="subway"><i class="fa fa-subway"></i> </li>
  69. <li title="train"><i class="fa fa-train"></i> </li>
  70. <li title="transgender"><i class="fa fa-transgender"></i> </li>
  71. <li title="transgender-alt"><i class="fa fa-transgender-alt"></i> </li>
  72. <li title="user-plus"><i class="fa fa-user-plus"></i> </li>
  73. <li title="user-secret"><i class="fa fa-user-secret"></i> </li>
  74. <li title="user-times"><i class="fa fa-user-times"></i> </li>
  75. <li title="venus"><i class="fa fa-venus"></i> </li>
  76. <li title="venus-double"><i class="fa fa-venus-double"></i> </li>
  77. <li title="venus-mars"><i class="fa fa-venus-mars"></i> </li>
  78. <li title="viacoin"><i class="fa fa-viacoin"></i> </li>
  79. <li title="whatsapp"><i class="fa fa-whatsapp"></i> </li>
  80. </ul>
  81. <div class="clearfix"></div>
  82. </div>
  83. <div>
  84. <h5> v4.2.0新增图标 </h5>
  85. <ul class="list-inline">
  86. <li title="angellist"><i class="fa fa-angellist"></i> </li>
  87. <li title="area-chart"><i class="fa fa-area-chart"></i> </li>
  88. <li title="at"><i class="fa fa-at"></i> </li>
  89. <li title="bell-slash"><i class="fa fa-bell-slash"></i> </li>
  90. <li title="bell-slash-o"><i class="fa fa-bell-slash-o"></i> </li>
  91. <li title="bicycle"><i class="fa fa-bicycle"></i> </li>
  92. <li title="binoculars"><i class="fa fa-binoculars"></i> </li>
  93. <li title="birthday-cake"><i class="fa fa-birthday-cake"></i> </li>
  94. <li title="bus"><i class="fa fa-bus"></i> </li>
  95. <li title="calculator"><i class="fa fa-calculator"></i> </li>
  96. <li title="cc"><i class="fa fa-cc"></i> </li>
  97. <li title="cc-amex"><i class="fa fa-cc-amex"></i> </li>
  98. <li title="cc-discover"><i class="fa fa-cc-discover"></i> </li>
  99. <li title="cc-mastercard"><i class="fa fa-cc-mastercard"></i> </li>
  100. <li title="cc-paypal"><i class="fa fa-cc-paypal"></i> </li>
  101. <li title="cc-stripe"><i class="fa fa-cc-stripe"></i> </li>
  102. <li title="cc-visa"><i class="fa fa-cc-visa"></i> </li>
  103. <li title="copyright"><i class="fa fa-copyright"></i> </li>
  104. <li title="eyedropper"><i class="fa fa-eyedropper"></i> </li>
  105. <li title="futbol-o"><i class="fa fa-futbol-o"></i> </li>
  106. <li title="google-wallet"><i class="fa fa-google-wallet"></i> </li>
  107. <li title="ils"><i class="fa fa-ils"></i> </li>
  108. <li title="ioxhost"><i class="fa fa-ioxhost"></i> </li>
  109. <li title="lastfm"><i class="fa fa-lastfm"></i> </li>
  110. <li title="lastfm-square"><i class="fa fa-lastfm-square"></i> </li>
  111. <li title="line-chart"><i class="fa fa-line-chart"></i> </li>
  112. <li title="meanpath"><i class="fa fa-meanpath"></i> </li>
  113. <li title="newspaper-o"><i class="fa fa-newspaper-o"></i> </li>
  114. <li title="paint-brush"><i class="fa fa-paint-brush"></i> </li>
  115. <li title="paypal"><i class="fa fa-paypal"></i> </li>
  116. <li title="pie-chart"><i class="fa fa-pie-chart"></i> </li>
  117. <li title="plug"><i class="fa fa-plug"></i> </li>
  118. <li title="shekel"><i class="fa fa-shekel"></i> </li>
  119. <li title="sheqel"><i class="fa fa-sheqel"></i> </li>
  120. <li title="slideshare"><i class="fa fa-slideshare"></i> </li>
  121. <li title="soccer-ball-o"><i class="fa fa-soccer-ball-o"></i> </li>
  122. <li title="toggle-off"><i class="fa fa-toggle-off"></i> </li>
  123. <li title="toggle-on"><i class="fa fa-toggle-on"></i> </li>
  124. <li title="trash"><i class="fa fa-trash"></i> </li>
  125. <li title="tty"><i class="fa fa-tty"></i> </li>
  126. <li title="twitch"><i class="fa fa-twitch"></i> </li>
  127. <li title="wifi"><i class="fa fa-wifi"></i> </li>
  128. <li title="yelp"><i class="fa fa-yelp"></i> </li>
  129. </ul>
  130. <div class="clearfix"></div>
  131. </div>
  132. <div>
  133. <h5> v4.1.0新增图标 </h5>
  134. <ul class="list-inline">
  135. <li title="rub"><i class="fa fa-rub"></i> </li>
  136. <li title="ruble"><i class="fa fa-ruble"></i> </li>
  137. <li title="rouble"><i class="fa fa-rouble"></i> </li>
  138. <li title="pagelines"><i class="fa fa-pagelines"></i> </li>
  139. <li title="stack-exchange"><i class="fa fa-stack-exchange"></i> </li>
  140. <li title="arrow-circle-o-right"><i class="fa fa-arrow-circle-o-right"></i> </li>
  141. <li title="arrow-circle-o-left"><i class="fa fa-arrow-circle-o-left"></i> </li>
  142. <li title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
  143. <li title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
  144. <li title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
  145. <li title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
  146. <li title="vimeo-square"><i class="fa fa-vimeo-square"></i> </li>
  147. <li title="try"><i class="fa fa-try"></i> </li>
  148. <li title="turkish-lira"><i class="fa fa-turkish-lira"></i> </li>
  149. <li title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>
  150. <li title="automobile"><i class="fa fa-automobile"></i> </li>
  151. <li title="bank"><i class="fa fa-bank"></i> </li>
  152. <li title="behance"><i class="fa fa-behance"></i> </li>
  153. <li title="behance-square"><i class="fa fa-behance-square"></i> </li>
  154. <li title="bomb"><i class="fa fa-bomb"></i> </li>
  155. <li title="building"><i class="fa fa-building"></i> </li>
  156. <li title="cab"><i class="fa fa-cab"></i> </li>
  157. <li title="car"><i class="fa fa-car"></i> </li>
  158. <li title="child"><i class="fa fa-child"></i> </li>
  159. <li title="circle-o-notch"><i class="fa fa-circle-o-notch"></i> </li>
  160. <li title="circle-thin"><i class="fa fa-circle-thin"></i> </li>
  161. <li title="codepen"><i class="fa fa-codepen"></i> </li>
  162. <li title="cube"><i class="fa fa-cube"></i> </li>
  163. <li title="cubes"><i class="fa fa-cubes"></i> </li>
  164. <li title="database"><i class="fa fa-database"></i> </li>
  165. <li title="delicious"><i class="fa fa-delicious"></i> </li>
  166. <li title="deviantart"><i class="fa fa-deviantart"></i> </li>
  167. <li title="digg"><i class="fa fa-digg"></i> </li>
  168. <li title="drupal"><i class="fa fa-drupal"></i> </li>
  169. <li title="empire"><i class="fa fa-empire"></i> </li>
  170. <li title="envelope-square"><i class="fa fa-envelope-square"></i> </li>
  171. <li title="fax"><i class="fa fa-fax"></i> </li>
  172. <li title="file-archive-o"><i class="fa fa-file-archive-o"></i> </li>
  173. <li title="file-audio-o"><i class="fa fa-file-audio-o"></i> </li>
  174. <li title="file-code-o"><i class="fa fa-file-code-o"></i> </li>
  175. <li title="file-excel-o"><i class="fa fa-file-excel-o"></i> </li>
  176. <li title="file-image-o"><i class="fa fa-file-image-o"></i> </li>
  177. <li title="file-movie-o"><i class="fa fa-file-movie-o"></i> </li>
  178. <li title="file-pdf-o"><i class="fa fa-file-pdf-o"></i> </li>
  179. <li title="file-photo-o"><i class="fa fa-file-photo-o"></i> </li>
  180. <li title="file-picture-o"><i class="fa fa-file-picture-o"></i> </li>
  181. <li title="file-powerpoint-o"><i class="fa fa-file-powerpoint-o"></i> </li>
  182. <li title="file-sound-o"><i class="fa fa-file-sound-o"></i> </li>
  183. <li title="file-video-o"><i class="fa fa-file-video-o"></i> </li>
  184. <li title="file-word-o"><i class="fa fa-file-word-o"></i> </li>
  185. <li title="file-zip-o"><i class="fa fa-file-zip-o"></i> </li>
  186. <li title="ge"><i class="fa fa-ge"></i> </li>
  187. <li title="git"><i class="fa fa-git"></i> </li>
  188. <li title="git-square"><i class="fa fa-git-square"></i> </li>
  189. <li title="google"><i class="fa fa-google"></i> </li>
  190. <li title="graduation-cap"><i class="fa fa-graduation-cap"></i> </li>
  191. <li title="hacker-news"><i class="fa fa-hacker-news"></i> </li>
  192. <li title="header"><i class="fa fa-header"></i> </li>
  193. <li title="history"><i class="fa fa-history"></i> </li>
  194. <li title="institution"><i class="fa fa-institution"></i> </li>
  195. <li title="joomla"><i class="fa fa-joomla"></i> </li>
  196. <li title="jsfiddle"><i class="fa fa-jsfiddle"></i> </li>
  197. <li title="language"><i class="fa fa-language"></i> </li>
  198. <li title="life-bouy"><i class="fa fa-life-bouy"></i> </li>
  199. <li title="life-ring"><i class="fa fa-life-ring"></i> </li>
  200. <li title="life-saver"><i class="fa fa-life-saver"></i> </li>
  201. <li title="mortar-board"><i class="fa fa-mortar-board"></i> </li>
  202. <li title="openid"><i class="fa fa-openid"></i> </li>
  203. <li title="paper-plane"><i class="fa fa-paper-plane"></i> </li>
  204. <li title="paper-plane-o"><i class="fa fa-paper-plane-o"></i> </li>
  205. <li title="paragraph"><i class="fa fa-paragraph"></i> </li>
  206. <li title="paw"><i class="fa fa-paw"></i> </li>
  207. <li title="pied-piper"><i class="fa fa-pied-piper"></i> </li>
  208. <li title="pied-piper-alt"><i class="fa fa-pied-piper-alt"></i> </li>
  209. <li title="pied-piper-square"><i class="fa fa-pied-piper-square"></i> </li>
  210. <li title="qq"><i class="fa fa-qq"></i> </li>
  211. <li title="ra"><i class="fa fa-ra"></i> </li>
  212. <li title="rebel"><i class="fa fa-rebel"></i> </li>
  213. <li title="recycle"><i class="fa fa-recycle"></i> </li>
  214. <li title="reddit"><i class="fa fa-reddit"></i> </li>
  215. <li title="reddit-square"><i class="fa fa-reddit-square"></i> </li>
  216. <li title="send"><i class="fa fa-send"></i> </li>
  217. <li title="send-o"><i class="fa fa-send-o"></i> </li>
  218. <li title="share-alt"><i class="fa fa-share-alt"></i> </li>
  219. <li title="share-alt-square"><i class="fa fa-share-alt-square"></i> </li>
  220. <li title="slack"><i class="fa fa-slack"></i> </li>
  221. <li title="sliders"><i class="fa fa-sliders"></i> </li>
  222. <li title="soundcloud"><i class="fa fa-soundcloud"></i> </li>
  223. <li title="space-shuttle"><i class="fa fa-space-shuttle"></i> </li>
  224. <li title="spoon"><i class="fa fa-spoon"></i> </li>
  225. <li title="spotify"><i class="fa fa-spotify"></i> </li>
  226. <li title="steam"><i class="fa fa-steam"></i> </li>
  227. <li title="steam-square"><i class="fa fa-steam-square"></i> </li>
  228. <li title="stumbleupon"><i class="fa fa-stumbleupon"></i> </li>
  229. <li title="stumbleupon-circle"><i class="fa fa-stumbleupon-circle"></i> </li>
  230. <li title="support"><i class="fa fa-support"></i> </li>
  231. <li title="taxi"><i class="fa fa-taxi"></i> </li>
  232. <li title="tencent-weibo"><i class="fa fa-tencent-weibo"></i> </li>
  233. <li title="tree"><i class="fa fa-tree"></i> </li>
  234. <li title="university"><i class="fa fa-university"></i> </li>
  235. <li title="vine"><i class="fa fa-vine"></i> </li>
  236. <li title="wechat"><i class="fa fa-wechat"></i> </li>
  237. <li title="weixin"><i class="fa fa-weixin"></i> </li>
  238. <li title="wordpress"><i class="fa fa-wordpress"></i> </li>
  239. <li title="yahoo"><i class="fa fa-yahoo"></i> </li>
  240. </ul>
  241. <div class="clearfix"></div>
  242. </div>
  243. <div>
  244. <h5>Web应用程序图标</h5>
  245. <ul class="list-inline">
  246. <li title="adjust"><i class="fa fa-adjust"></i> </li>
  247. <li title="anchor"><i class="fa fa-anchor"></i> </li>
  248. <li title="archive"><i class="fa fa-archive"></i> </li>
  249. <li title="arrows"><i class="fa fa-arrows"></i> </li>
  250. <li title="arrows-h"><i class="fa fa-arrows-h"></i> </li>
  251. <li title="arrows-v"><i class="fa fa-arrows-v"></i> </li>
  252. <li title="asterisk"><i class="fa fa-asterisk"></i> </li>
  253. <li title="ban"><i class="fa fa-ban"></i> </li>
  254. <li title="bar-chart-o"><i class="fa fa-bar-chart-o"></i> </li>
  255. <li title="barcode"><i class="fa fa-barcode"></i> </li>
  256. <li title="bars"><i class="fa fa-bars"></i> </li>
  257. <li title="beer"><i class="fa fa-beer"></i> </li>
  258. <li title="bell"><i class="fa fa-bell"></i> </li>
  259. <li title="bell-o"><i class="fa fa-bell-o"></i> </li>
  260. <li title="bolt"><i class="fa fa-bolt"></i> </li>
  261. <li title="book"><i class="fa fa-book"></i> </li>
  262. <li title="bookmark"><i class="fa fa-bookmark"></i> </li>
  263. <li title="bookmark-o"><i class="fa fa-bookmark-o"></i> </li>
  264. <li title="briefcase"><i class="fa fa-briefcase"></i> </li>
  265. <li title="bug"><i class="fa fa-bug"></i> </li>
  266. <li title="building-o"><i class="fa fa-building-o"></i> </li>
  267. <li title="bullhorn"><i class="fa fa-bullhorn"></i> </li>
  268. <li title="bullseye"><i class="fa fa-bullseye"></i> </li>
  269. <li title="calendar"><i class="fa fa-calendar"></i> </li>
  270. <li title="calendar-o"><i class="fa fa-calendar-o"></i> </li>
  271. <li title="camera"><i class="fa fa-camera"></i> </li>
  272. <li title="camera-retro"><i class="fa fa-camera-retro"></i> </li>
  273. <li title="caret-square-o-down"><i class="fa fa-caret-square-o-down"></i> </li>
  274. <li title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
  275. <li title="caret-square-o-right"><i class="fa fa-caret-square-o-right"></i> </li>
  276. <li title="caret-square-o-up"><i class="fa fa-caret-square-o-up"></i> </li>
  277. <li title="certificate"><i class="fa fa-certificate"></i> </li>
  278. <li title="check"><i class="fa fa-check"></i> </li>
  279. <li title="check-circle"><i class="fa fa-check-circle"></i> </li>
  280. <li title="check-circle-o"><i class="fa fa-check-circle-o"></i> </li>
  281. <li title="check-square"><i class="fa fa-check-square"></i> </li>
  282. <li title="check-square-o"><i class="fa fa-check-square-o"></i> </li>
  283. <li title="circle"><i class="fa fa-circle"></i> </li>
  284. <li title="circle-o"><i class="fa fa-circle-o"></i> </li>
  285. <li title="clock-o"><i class="fa fa-clock-o"></i> </li>
  286. <li title="cloud"><i class="fa fa-cloud"></i> </li>
  287. <li title="cloud-download"><i class="fa fa-cloud-download"></i> </li>
  288. <li title="cloud-upload"><i class="fa fa-cloud-upload"></i> </li>
  289. <li title="code"><i class="fa fa-code"></i> </li>
  290. <li title="code-fork"><i class="fa fa-code-fork"></i> </li>
  291. <li title="coffee"><i class="fa fa-coffee"></i> </li>
  292. <li title="cog"><i class="fa fa-cog"></i> </li>
  293. <li title="cogs"><i class="fa fa-cogs"></i> </li>
  294. <li title="comment"><i class="fa fa-comment"></i> </li>
  295. <li title="comment-o"><i class="fa fa-comment-o"></i> </li>
  296. <li title="comments"><i class="fa fa-comments"></i> </li>
  297. <li title="comments-o"><i class="fa fa-comments-o"></i> </li>
  298. <li title="compass"><i class="fa fa-compass"></i> </li>
  299. <li title="credit-card"><i class="fa fa-credit-card"></i> </li>
  300. <li title="crop"><i class="fa fa-crop"></i> </li>
  301. <li title="crosshairs"><i class="fa fa-crosshairs"></i> </li>
  302. <li title="cutlery"><i class="fa fa-cutlery"></i> </li>
  303. <li title="dashboard"><i class="fa fa-dashboard"></i> </li>
  304. <li title="desktop"><i class="fa fa-desktop"></i> </li>
  305. <li title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
  306. <li title="download"><i class="fa fa-download"></i> </li>
  307. <li title="edit"><i class="fa fa-edit"></i> </li>
  308. <li title="ellipsis-h"><i class="fa fa-ellipsis-h"></i> </li>
  309. <li title="ellipsis-v"><i class="fa fa-ellipsis-v"></i> </li>
  310. <li title="envelope"><i class="fa fa-envelope"></i> </li>
  311. <li title="envelope-o"><i class="fa fa-envelope-o"></i> </li>
  312. <li title="eraser"><i class="fa fa-eraser"></i> </li>
  313. <li title="exchange"><i class="fa fa-exchange"></i> </li>
  314. <li title="exclamation"><i class="fa fa-exclamation"></i> </li>
  315. <li title="exclamation-circle"><i class="fa fa-exclamation-circle"></i> </li>
  316. <li title="exclamation-triangle"><i class="fa fa-exclamation-triangle"></i> </li>
  317. <li title="external-link"><i class="fa fa-external-link"></i> </li>
  318. <li title="external-link-square"><i class="fa fa-external-link-square"></i> </li>
  319. <li title="eye"><i class="fa fa-eye"></i> </li>
  320. <li title="eye-slash"><i class="fa fa-eye-slash"></i> </li>
  321. <li title="female"><i class="fa fa-female"></i> </li>
  322. <li title="fighter-jet"><i class="fa fa-fighter-jet"></i> </li>
  323. <li title="film"><i class="fa fa-film"></i> </li>
  324. <li title="filter"><i class="fa fa-filter"></i> </li>
  325. <li title="fire"><i class="fa fa-fire"></i> </li>
  326. <li title="fire-extinguisher"><i class="fa fa-fire-extinguisher"></i> </li>
  327. <li title="flag"><i class="fa fa-flag"></i> </li>
  328. <li title="flag-checkered"><i class="fa fa-flag-checkered"></i> </li>
  329. <li title="flag-o"><i class="fa fa-flag-o"></i> </li>
  330. <li title="flash"><i class="fa fa-flash"></i> </li>
  331. <li title="flask"><i class="fa fa-flask"></i> </li>
  332. <li title="folder"><i class="fa fa-folder"></i> </li>
  333. <li title="folder-o"><i class="fa fa-folder-o"></i> </li>
  334. <li title="folder-open"><i class="fa fa-folder-open"></i> </li>
  335. <li title="folder-open-o"><i class="fa fa-folder-open-o"></i> </li>
  336. <li title="frown-o"><i class="fa fa-frown-o"></i> </li>
  337. <li title="gamepad"><i class="fa fa-gamepad"></i> </li>
  338. <li title="gavel"><i class="fa fa-gavel"></i> </li>
  339. <li title="gear"><i class="fa fa-gear"></i> </li>
  340. <li title="gears"><i class="fa fa-gears"></i> </li>
  341. <li title="gift"><i class="fa fa-gift"></i> </li>
  342. <li title="glass"><i class="fa fa-glass"></i> </li>
  343. <li title="globe"><i class="fa fa-globe"></i> </li>
  344. <li title="group"><i class="fa fa-group"></i> </li>
  345. <li title="hdd-o"><i class="fa fa-hdd-o"></i> </li>
  346. <li title="headphones"><i class="fa fa-headphones"></i> </li>
  347. <li title="heart"><i class="fa fa-heart"></i> </li>
  348. <li title="heart-o"><i class="fa fa-heart-o"></i> </li>
  349. <li title="home"><i class="fa fa-home"></i> </li>
  350. <li title="inbox"><i class="fa fa-inbox"></i> </li>
  351. <li title="info"><i class="fa fa-info"></i> </li>
  352. <li title="info-circle"><i class="fa fa-info-circle"></i> </li>
  353. <li title="key"><i class="fa fa-key"></i> </li>
  354. <li title="keyboard-o"><i class="fa fa-keyboard-o"></i> </li>
  355. <li title="laptop"><i class="fa fa-laptop"></i> </li>
  356. <li title="leaf"><i class="fa fa-leaf"></i> </li>
  357. <li title="legal"><i class="fa fa-legal"></i> </li>
  358. <li title="lemon-o"><i class="fa fa-lemon-o"></i> </li>
  359. <li title="level-down"><i class="fa fa-level-down"></i> </li>
  360. <li title="level-up"><i class="fa fa-level-up"></i> </li>
  361. <li title="lightbulb-o"><i class="fa fa-lightbulb-o"></i> </li>
  362. <li title="location-arrow"><i class="fa fa-location-arrow"></i> </li>
  363. <li title="lock"><i class="fa fa-lock"></i> </li>
  364. <li title="magic"><i class="fa fa-magic"></i> </li>
  365. <li title="magnet"><i class="fa fa-magnet"></i> </li>
  366. <li title="mail-forward"><i class="fa fa-mail-forward"></i> </li>
  367. <li title="mail-reply"><i class="fa fa-mail-reply"></i> </li>
  368. <li title="mail-reply-all"><i class="fa fa-mail-reply-all"></i> </li>
  369. <li title="male"><i class="fa fa-male"></i> </li>
  370. <li title="map-marker"><i class="fa fa-map-marker"></i> </li>
  371. <li title="meh-o"><i class="fa fa-meh-o"></i> </li>
  372. <li title="microphone"><i class="fa fa-microphone"></i> </li>
  373. <li title="microphone-slash"><i class="fa fa-microphone-slash"></i> </li>
  374. <li title="minus"><i class="fa fa-minus"></i> </li>
  375. <li title="minus-circle"><i class="fa fa-minus-circle"></i> </li>
  376. <li title="minus-square"><i class="fa fa-minus-square"></i> </li>
  377. <li title="minus-square-o"><i class="fa fa-minus-square-o"></i> </li>
  378. <li title="mobile"><i class="fa fa-mobile"></i> </li>
  379. <li title="mobile-phone"><i class="fa fa-mobile-phone"></i> </li>
  380. <li title="money"><i class="fa fa-money"></i> </li>
  381. <li title="moon-o"><i class="fa fa-moon-o"></i> </li>
  382. <li title="music"><i class="fa fa-music"></i> </li>
  383. <li title="pencil"><i class="fa fa-pencil"></i> </li>
  384. <li title="pencil-square"><i class="fa fa-pencil-square"></i> </li>
  385. <li title="pencil-square-o"><i class="fa fa-pencil-square-o"></i> </li>
  386. <li title="phone"><i class="fa fa-phone"></i> </li>
  387. <li title="phone-square"><i class="fa fa-phone-square"></i> </li>
  388. <li title="picture-o"><i class="fa fa-picture-o"></i> </li>
  389. <li title="plane"><i class="fa fa-plane"></i> </li>
  390. <li title="plus"><i class="fa fa-plus"></i> </li>
  391. <li title="plus-circle"><i class="fa fa-plus-circle"></i> </li>
  392. <li title="plus-square"><i class="fa fa-plus-square"></i> </li>
  393. <li title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>
  394. <li title="power-off"><i class="fa fa-power-off"></i> </li>
  395. <li title="print"><i class="fa fa-print"></i> </li>
  396. <li title="puzzle-piece"><i class="fa fa-puzzle-piece"></i> </li>
  397. <li title="qrcode"><i class="fa fa-qrcode"></i> </li>
  398. <li title="question"><i class="fa fa-question"></i> </li>
  399. <li title="question-circle"><i class="fa fa-question-circle"></i> </li>
  400. <li title="quote-left"><i class="fa fa-quote-left"></i> </li>
  401. <li title="quote-right"><i class="fa fa-quote-right"></i> </li>
  402. <li title="random"><i class="fa fa-random"></i> </li>
  403. <li title="refresh"><i class="fa fa-refresh"></i> </li>
  404. <li title="reply"><i class="fa fa-reply"></i> </li>
  405. <li title="reply-all"><i class="fa fa-reply-all"></i> </li>
  406. <li title="retweet"><i class="fa fa-retweet"></i> </li>
  407. <li title="road"><i class="fa fa-road"></i> </li>
  408. <li title="rocket"><i class="fa fa-rocket"></i> </li>
  409. <li title="rss"><i class="fa fa-rss"></i> </li>
  410. <li title="rss-square"><i class="fa fa-rss-square"></i> </li>
  411. <li title="search"><i class="fa fa-search"></i> </li>
  412. <li title="search-minus"><i class="fa fa-search-minus"></i> </li>
  413. <li title="search-plus"><i class="fa fa-search-plus"></i> </li>
  414. <li title="share"><i class="fa fa-share"></i> </li>
  415. <li title="share-square"><i class="fa fa-share-square"></i> </li>
  416. <li title="share-square-o"><i class="fa fa-share-square-o"></i> </li>
  417. <li title="shield"><i class="fa fa-shield"></i> </li>
  418. <li title="shopping-cart"><i class="fa fa-shopping-cart"></i> </li>
  419. <li title="sign-in"><i class="fa fa-sign-in"></i> </li>
  420. <li title="sign-out"><i class="fa fa-sign-out"></i> </li>
  421. <li title="signal"><i class="fa fa-signal"></i> </li>
  422. <li title="sitemap"><i class="fa fa-sitemap"></i> </li>
  423. <li title="smile-o"><i class="fa fa-smile-o"></i> </li>
  424. <li title="sort"><i class="fa fa-sort"></i> </li>
  425. <li title="sort-alpha-asc"><i class="fa fa-sort-alpha-asc"></i> </li>
  426. <li title="sort-alpha-desc"><i class="fa fa-sort-alpha-desc"></i> </li>
  427. <li title="sort-amount-asc"><i class="fa fa-sort-amount-asc"></i> </li>
  428. <li title="sort-amount-desc"><i class="fa fa-sort-amount-desc"></i> </li>
  429. <li title="sort-asc"><i class="fa fa-sort-asc"></i> </li>
  430. <li title="sort-desc"><i class="fa fa-sort-desc"></i> </li>
  431. <li title="sort-down"><i class="fa fa-sort-down"></i> </li>
  432. <li title="sort-numeric-asc"><i class="fa fa-sort-numeric-asc"></i> </li>
  433. <li title="sort-numeric-desc"><i class="fa fa-sort-numeric-desc"></i> </li>
  434. <li title="sort-up"><i class="fa fa-sort-up"></i> </li>
  435. <li title="spinner"><i class="fa fa-spinner"></i> </li>
  436. <li title="square"><i class="fa fa-square"></i> </li>
  437. <li title="square-o"><i class="fa fa-square-o"></i> </li>
  438. <li title="star"><i class="fa fa-star"></i> </li>
  439. <li title="star-half"><i class="fa fa-star-half"></i> </li>
  440. <li title="star-half-empty"><i class="fa fa-star-half-empty"></i> </li>
  441. <li title="star-half-full"><i class="fa fa-star-half-full"></i> </li>
  442. <li title="star-half-o"><i class="fa fa-star-half-o"></i> </li>
  443. <li title="star-o"><i class="fa fa-star-o"></i> </li>
  444. <li title="subscript"><i class="fa fa-subscript"></i> </li>
  445. <li title="suitcase"><i class="fa fa-suitcase"></i> </li>
  446. <li title="sun-o"><i class="fa fa-sun-o"></i> </li>
  447. <li title="superscript"><i class="fa fa-superscript"></i> </li>
  448. <li title="tablet"><i class="fa fa-tablet"></i> </li>
  449. <li title="tachometer"><i class="fa fa-tachometer"></i> </li>
  450. <li title="tag"><i class="fa fa-tag"></i> </li>
  451. <li title="tags"><i class="fa fa-tags"></i> </li>
  452. <li title="tasks"><i class="fa fa-tasks"></i> </li>
  453. <li title="terminal"><i class="fa fa-terminal"></i> </li>
  454. <li title="thumb-tack"><i class="fa fa-thumb-tack"></i> </li>
  455. <li title="thumbs-down"><i class="fa fa-thumbs-down"></i> </li>
  456. <li title="thumbs-o-down"><i class="fa fa-thumbs-o-down"></i> </li>
  457. <li title="thumbs-o-up"><i class="fa fa-thumbs-o-up"></i> </li>
  458. <li title="thumbs-up"><i class="fa fa-thumbs-up"></i> </li>
  459. <li title="ticket"><i class="fa fa-ticket"></i> </li>
  460. <li title="times"><i class="fa fa-times"></i> </li>
  461. <li title="times-circle"><i class="fa fa-times-circle"></i> </li>
  462. <li title="times-circle-o"><i class="fa fa-times-circle-o"></i> </li>
  463. <li title="tint"><i class="fa fa-tint"></i> </li>
  464. <li title="toggle-down"><i class="fa fa-toggle-down"></i> </li>
  465. <li title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
  466. <li title="toggle-right"><i class="fa fa-toggle-right"></i> </li>
  467. <li title="toggle-up"><i class="fa fa-toggle-up"></i> </li>
  468. <li title="trash-o"><i class="fa fa-trash-o"></i> </li>
  469. <li title="trophy"><i class="fa fa-trophy"></i> </li>
  470. <li title="truck"><i class="fa fa-truck"></i> </li>
  471. <li title="umbrella"><i class="fa fa-umbrella"></i> </li>
  472. <li title="unlock"><i class="fa fa-unlock"></i> </li>
  473. <li title="unlock-alt"><i class="fa fa-unlock-alt"></i> </li>
  474. <li title="unsorted"><i class="fa fa-unsorted"></i> </li>
  475. <li title="upload"><i class="fa fa-upload"></i> </li>
  476. <li title="user"><i class="fa fa-user"></i> </li>
  477. <li title="users"><i class="fa fa-users"></i> </li>
  478. <li title="video-camera"><i class="fa fa-video-camera"></i> </li>
  479. <li title="volume-down"><i class="fa fa-volume-down"></i> </li>
  480. <li title="volume-off"><i class="fa fa-volume-off"></i> </li>
  481. <li title="volume-up"><i class="fa fa-volume-up"></i> </li>
  482. <li title="warning"><i class="fa fa-warning"></i> </li>
  483. <li title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
  484. <li title="wrench"><i class="fa fa-wrench"></i> </li>
  485. </ul>
  486. <div class="clearfix"></div>
  487. </div>
  488. <div>
  489. <h5>Form Control Icons</h5>
  490. <ul class="list-inline">
  491. <li title="check-square"><i class="fa fa-check-square"></i> </li>
  492. <li title="check-square-o"><i class="fa fa-check-square-o"></i> </li>
  493. <li title="circle"><i class="fa fa-circle"></i> </li>
  494. <li title="circle-o"><i class="fa fa-circle-o"></i> </li>
  495. <li title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
  496. <li title="minus-square"><i class="fa fa-minus-square"></i> </li>
  497. <li title="minus-square-o"><i class="fa fa-minus-square-o"></i> </li>
  498. <li title="plus-square"><i class="fa fa-plus-square"></i> </li>
  499. <li title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>
  500. <li title="square"><i class="fa fa-square"></i> </li>
  501. <li title="square-o"><i class="fa fa-square-o"></i> </li>
  502. </ul>
  503. <div class="clearfix"></div>
  504. </div>
  505. <div>
  506. <h5>货币图标</h5>
  507. <ul class="list-inline">
  508. <li title="bitcoin"><i class="fa fa-bitcoin"></i> </li>
  509. <li title="btc"><i class="fa fa-btc"></i> </li>
  510. <li title="cny"><i class="fa fa-cny"></i> </li>
  511. <li title="dollar"><i class="fa fa-dollar"></i> </li>
  512. <li title="eur"><i class="fa fa-eur"></i> </li>
  513. <li title="euro"><i class="fa fa-euro"></i> </li>
  514. <li title="gbp"><i class="fa fa-gbp"></i> </li>
  515. <li title="inr"><i class="fa fa-inr"></i> </li>
  516. <li title="jpy"><i class="fa fa-jpy"></i> </li>
  517. <li title="krw"><i class="fa fa-krw"></i> </li>
  518. <li title="money"><i class="fa fa-money"></i> </li>
  519. <li title="rmb"><i class="fa fa-rmb"></i> </li>
  520. <li title="rouble"><i class="fa fa-rouble"></i> </li>
  521. <li title="rub"><i class="fa fa-rub"></i> </li>
  522. <li title="ruble"><i class="fa fa-ruble"></i> </li>
  523. <li title="rupee"><i class="fa fa-rupee"></i> </li>
  524. <li title="try"><i class="fa fa-try"></i> </li>
  525. <li title="turkish-lira"><i class="fa fa-turkish-lira"></i> </li>
  526. <li title="usd"><i class="fa fa-usd"></i> </li>
  527. <li title="won"><i class="fa fa-won"></i> </li>
  528. <li title="yen"><i class="fa fa-yen"></i> </li>
  529. </ul>
  530. <div class="clearfix"></div>
  531. </div>
  532. <div>
  533. <h5>文本编辑器图标</h5>
  534. <ul class="list-inline">
  535. <li title="align-center"><i class="fa fa-align-center"></i> </li>
  536. <li title="align-justify"><i class="fa fa-align-justify"></i> </li>
  537. <li title="align-left"><i class="fa fa-align-left"></i> </li>
  538. <li title="align-right"><i class="fa fa-align-right"></i> </li>
  539. <li title="bold"><i class="fa fa-bold"></i> </li>
  540. <li title="chain"><i class="fa fa-chain"></i> </li>
  541. <li title="chain-broken"><i class="fa fa-chain-broken"></i> </li>
  542. <li title="clipboard"><i class="fa fa-clipboard"></i> </li>
  543. <li title="columns"><i class="fa fa-columns"></i> </li>
  544. <li title="copy"><i class="fa fa-copy"></i> </li>
  545. <li title="cut"><i class="fa fa-cut"></i> </li>
  546. <li title="dedent"><i class="fa fa-dedent"></i> </li>
  547. <li title="eraser"><i class="fa fa-eraser"></i> </li>
  548. <li title="file"><i class="fa fa-file"></i> </li>
  549. <li title="file-o"><i class="fa fa-file-o"></i> </li>
  550. <li title="file-text"><i class="fa fa-file-text"></i> </li>
  551. <li title="file-text-o"><i class="fa fa-file-text-o"></i> </li>
  552. <li title="files-o"><i class="fa fa-files-o"></i> </li>
  553. <li title="floppy-o"><i class="fa fa-floppy-o"></i> </li>
  554. <li title="font"><i class="fa fa-font"></i> </li>
  555. <li title="indent"><i class="fa fa-indent"></i> </li>
  556. <li title="italic"><i class="fa fa-italic"></i> </li>
  557. <li title="link"><i class="fa fa-link"></i> </li>
  558. <li title="list"><i class="fa fa-list"></i> </li>
  559. <li title="list-alt"><i class="fa fa-list-alt"></i> </li>
  560. <li title="list-ol"><i class="fa fa-list-ol"></i> </li>
  561. <li title="list-ul"><i class="fa fa-list-ul"></i> </li>
  562. <li title="outdent"><i class="fa fa-outdent"></i> </li>
  563. <li title="paperclip"><i class="fa fa-paperclip"></i> </li>
  564. <li title="paste"><i class="fa fa-paste"></i> </li>
  565. <li title="repeat"><i class="fa fa-repeat"></i> </li>
  566. <li title="rotate-left"><i class="fa fa-rotate-left"></i> </li>
  567. <li title="rotate-right"><i class="fa fa-rotate-right"></i> </li>
  568. <li title="save"><i class="fa fa-save"></i> </li>
  569. <li title="scissors"><i class="fa fa-scissors"></i> </li>
  570. <li title="strikethrough"><i class="fa fa-strikethrough"></i> </li>
  571. <li title="table"><i class="fa fa-table"></i> </li>
  572. <li title="text-height"><i class="fa fa-text-height"></i> </li>
  573. <li title="text-width"><i class="fa fa-text-width"></i> </li>
  574. <li title="th"><i class="fa fa-th"></i> </li>
  575. <li title="th-large"><i class="fa fa-th-large"></i> </li>
  576. <li title="th-list"><i class="fa fa-th-list"></i> </li>
  577. <li title="underline"><i class="fa fa-underline"></i> </li>
  578. <li title="undo"><i class="fa fa-undo"></i> </li>
  579. <li title="unlink"><i class="fa fa-unlink"></i> </li>
  580. </ul>
  581. <div class="clearfix"></div>
  582. </div>
  583. <div>
  584. <h5>方向图标</h5>
  585. <ul class="list-inline">
  586. <li title="angle-double-down"><i class="fa fa-angle-double-down"></i> </li>
  587. <li title="angle-double-left"><i class="fa fa-angle-double-left"></i> </li>
  588. <li title="angle-double-right"><i class="fa fa-angle-double-right"></i> </li>
  589. <li title="angle-double-up"><i class="fa fa-angle-double-up"></i> </li>
  590. <li title="angle-down"><i class="fa fa-angle-down"></i> </li>
  591. <li title="angle-left"><i class="fa fa-angle-left"></i> </li>
  592. <li title="angle-right"><i class="fa fa-angle-right"></i> </li>
  593. <li title="angle-up"><i class="fa fa-angle-up"></i> </li>
  594. <li title="arrow-circle-down"><i class="fa fa-arrow-circle-down"></i> </li>
  595. <li title="arrow-circle-left"><i class="fa fa-arrow-circle-left"></i> </li>
  596. <li title="arrow-circle-o-down"><i class="fa fa-arrow-circle-o-down"></i> </li>
  597. <li title="arrow-circle-o-left"><i class="fa fa-arrow-circle-o-left"></i> </li>
  598. <li title="arrow-circle-o-right"><i class="fa fa-arrow-circle-o-right"></i> </li>
  599. <li title="arrow-circle-o-up"><i class="fa fa-arrow-circle-o-up"></i> </li>
  600. <li title="arrow-circle-right"><i class="fa fa-arrow-circle-right"></i> </li>
  601. <li title="arrow-circle-up"><i class="fa fa-arrow-circle-up"></i> </li>
  602. <li title="arrow-down"><i class="fa fa-arrow-down"></i> </li>
  603. <li title="arrow-left"><i class="fa fa-arrow-left"></i> </li>
  604. <li title="arrow-right"><i class="fa fa-arrow-right"></i> </li>
  605. <li title="arrow-up"><i class="fa fa-arrow-up"></i> </li>
  606. <li title="arrows"><i class="fa fa-arrows"></i> </li>
  607. <li title="arrows-alt"><i class="fa fa-arrows-alt"></i> </li>
  608. <li title="arrows-h"><i class="fa fa-arrows-h"></i> </li>
  609. <li title="arrows-v"><i class="fa fa-arrows-v"></i> </li>
  610. <li title="caret-down"><i class="fa fa-caret-down"></i> </li>
  611. <li title="caret-left"><i class="fa fa-caret-left"></i> </li>
  612. <li title="caret-right"><i class="fa fa-caret-right"></i> </li>
  613. <li title="caret-square-o-down"><i class="fa fa-caret-square-o-down"></i> </li>
  614. <li title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
  615. <li title="caret-square-o-right"><i class="fa fa-caret-square-o-right"></i> </li>
  616. <li title="caret-square-o-up"><i class="fa fa-caret-square-o-up"></i> </li>
  617. <li title="caret-up"><i class="fa fa-caret-up"></i> </li>
  618. <li title="chevron-circle-down"><i class="fa fa-chevron-circle-down"></i> </li>
  619. <li title="chevron-circle-left"><i class="fa fa-chevron-circle-left"></i> </li>
  620. <li title="chevron-circle-right"><i class="fa fa-chevron-circle-right"></i> </li>
  621. <li title="chevron-circle-up"><i class="fa fa-chevron-circle-up"></i> </li>
  622. <li title="chevron-down"><i class="fa fa-chevron-down"></i> </li>
  623. <li title="chevron-left"><i class="fa fa-chevron-left"></i> </li>
  624. <li title="chevron-right"><i class="fa fa-chevron-right"></i> </li>
  625. <li title="chevron-up"><i class="fa fa-chevron-up"></i> </li>
  626. <li title="hand-o-down"><i class="fa fa-hand-o-down"></i> </li>
  627. <li title="hand-o-left"><i class="fa fa-hand-o-left"></i> </li>
  628. <li title="hand-o-right"><i class="fa fa-hand-o-right"></i> </li>
  629. <li title="hand-o-up"><i class="fa fa-hand-o-up"></i> </li>
  630. <li title="long-arrow-down"><i class="fa fa-long-arrow-down"></i> </li>
  631. <li title="long-arrow-left"><i class="fa fa-long-arrow-left"></i> </li>
  632. <li title="long-arrow-right"><i class="fa fa-long-arrow-right"></i> </li>
  633. <li title="long-arrow-up"><i class="fa fa-long-arrow-up"></i> </li>
  634. <li title="toggle-down"><i class="fa fa-toggle-down"></i> </li>
  635. <li title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
  636. <li title="toggle-right"><i class="fa fa-toggle-right"></i> </li>
  637. <li title="toggle-up"><i class="fa fa-toggle-up"></i> </li>
  638. </ul>
  639. <div class="clearfix"></div>
  640. </div>
  641. <div>
  642. <h5>视频播放器图标</h5>
  643. <ul class="list-inline">
  644. <li title="arrows-alt"><i class="fa fa-arrows-alt"></i> </li>
  645. <li title="backward"><i class="fa fa-backward"></i> </li>
  646. <li title="compress"><i class="fa fa-compress"></i> </li>
  647. <li title="eject"><i class="fa fa-eject"></i> </li>
  648. <li title="expand"><i class="fa fa-expand"></i> </li>
  649. <li title="fast-backward"><i class="fa fa-fast-backward"></i> </li>
  650. <li title="fast-forward"><i class="fa fa-fast-forward"></i> </li>
  651. <li title="forward"><i class="fa fa-forward"></i> </li>
  652. <li title="pause"><i class="fa fa-pause"></i> </li>
  653. <li title="play"><i class="fa fa-play"></i> </li>
  654. <li title="play-circle"><i class="fa fa-play-circle"></i> </li>
  655. <li title="play-circle-o"><i class="fa fa-play-circle-o"></i> </li>
  656. <li title="step-backward"><i class="fa fa-step-backward"></i> </li>
  657. <li title="step-forward"><i class="fa fa-step-forward"></i> </li>
  658. <li title="stop"><i class="fa fa-stop"></i> </li>
  659. <li title="youtube-play"><i class="fa fa-youtube-play"></i> </li>
  660. </ul>
  661. <div class="clearfix"></div>
  662. </div>
  663. <div>
  664. <h5>品牌图标</h5>
  665. <ul class="list-inline">
  666. <li title="adn"><i class="fa fa-adn"></i> </li>
  667. <li title="android"><i class="fa fa-android"></i> </li>
  668. <li title="apple"><i class="fa fa-apple"></i> </li>
  669. <li title="bitbucket"><i class="fa fa-bitbucket"></i> </li>
  670. <li title="bitbucket-square"><i class="fa fa-bitbucket-square"></i> </li>
  671. <li title="bitcoin"><i class="fa fa-bitcoin"></i> </li>
  672. <li title="btc"><i class="fa fa-btc"></i> </li>
  673. <li title="css3"><i class="fa fa-css3"></i> </li>
  674. <li title="dribbble"><i class="fa fa-dribbble"></i> </li>
  675. <li title="dropbox"><i class="fa fa-dropbox"></i> </li>
  676. <li title="facebook"><i class="fa fa-facebook"></i> </li>
  677. <li title="facebook-square"><i class="fa fa-facebook-square"></i> </li>
  678. <li title="flickr"><i class="fa fa-flickr"></i> </li>
  679. <li title="foursquare"><i class="fa fa-foursquare"></i> </li>
  680. <li title="github"><i class="fa fa-github"></i> </li>
  681. <li title="github-alt"><i class="fa fa-github-alt"></i> </li>
  682. <li title="github-square"><i class="fa fa-github-square"></i> </li>
  683. <li title="gittip"><i class="fa fa-gittip"></i> </li>
  684. <li title="google-plus"><i class="fa fa-google-plus"></i> </li>
  685. <li title="google-plus-square"><i class="fa fa-google-plus-square"></i> </li>
  686. <li title="html5"><i class="fa fa-html5"></i> </li>
  687. <li title="instagram"><i class="fa fa-instagram"></i> </li>
  688. <li title="linkedin"><i class="fa fa-linkedin"></i> </li>
  689. <li title="linkedin-square"><i class="fa fa-linkedin-square"></i> </li>
  690. <li title="linux"><i class="fa fa-linux"></i> </li>
  691. <li title="maxcdn"><i class="fa fa-maxcdn"></i> </li>
  692. <li title="pagelines"><i class="fa fa-pagelines"></i> </li>
  693. <li title="pinterest"><i class="fa fa-pinterest"></i> </li>
  694. <li title="pinterest-square"><i class="fa fa-pinterest-square"></i> </li>
  695. <li title="renren"><i class="fa fa-renren"></i> </li>
  696. <li title="skype"><i class="fa fa-skype"></i> </li>
  697. <li title="stack-exchange"><i class="fa fa-stack-exchange"></i> </li>
  698. <li title="stack-overflow"><i class="fa fa-stack-overflow"></i> </li>
  699. <li title="trello"><i class="fa fa-trello"></i> </li>
  700. <li title="tumblr"><i class="fa fa-tumblr"></i> </li>
  701. <li title="tumblr-square"><i class="fa fa-tumblr-square"></i> </li>
  702. <li title="twitter"><i class="fa fa-twitter"></i> </li>
  703. <li title="twitter-square"><i class="fa fa-twitter-square"></i> </li>
  704. <li title="vimeo-square"><i class="fa fa-vimeo-square"></i> </li>
  705. <li title="vk"><i class="fa fa-vk"></i> </li>
  706. <li title="weibo"><i class="fa fa-weibo"></i> </li>
  707. <li title="windows"><i class="fa fa-windows"></i> </li>
  708. <li title="xing"><i class="fa fa-xing"></i> </li>
  709. <li title="xing-square"><i class="fa fa-xing-square"></i> </li>
  710. <li title="youtube"><i class="fa fa-youtube"></i> </li>
  711. <li title="youtube-play"><i class="fa fa-youtube-play"></i> </li>
  712. <li title="youtube-square"><i class="fa fa-youtube-square"></i> </li>
  713. </ul>
  714. <div class="clearfix"></div>
  715. </div>
  716. <div>
  717. <h5>医疗图标</h5>
  718. <ul class="list-inline">
  719. <li title="ambulance"><i class="fa fa-ambulance"></i> </li>
  720. <li title="h-square"><i class="fa fa-h-square"></i> </li>
  721. <li title="hospital-o"><i class="fa fa-hospital-o"></i> </li>
  722. <li title="medkit"><i class="fa fa-medkit"></i> </li>
  723. <li title="plus-square"><i class="fa fa-plus-square"></i> </li>
  724. <li title="stethoscope"><i class="fa fa-stethoscope"></i> </li>
  725. <li title="user-md"><i class="fa fa-user-md"></i> </li>
  726. <li title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
  727. </ul>
  728. <div class="clearfix"></div>
  729. </div>
  730. </div>
  731. </div>
  732. <script>
  733. $(function () {
  734. // document.onselectstart = new Function('event.returnValue=false;');
  735. var parentinputname = '{$Request.param.fodder}';
  736. $('.list-inline li').on('click', function () {
  737. var className = $(this).find('i').get(0).className;
  738. if (className) {
  739. var font = className.replace('fa fa-','');
  740. parent.$f.changeField(parentinputname,font);
  741. parent.$f.closeModal(parentinputname);
  742. }
  743. });
  744. //清空选择
  745. $('#qingkong').on('click', function () {
  746. parent.$f.changeField(parentinputname,'');
  747. parent.$f.closeModal(parentinputname);
  748. });
  749. //搜索图标
  750. $("#search").on('input',function () {
  751. var keyword = $(this).val();
  752. if(keyword){
  753. $(".list-inline li").hide();
  754. $("li[title*='"+keyword+"']").show();
  755. }else{
  756. $("li[title*='"+keyword+"']").show();
  757. }
  758. // console.log($("li[title*='"+keyword+"']"));
  759. });
  760. });
  761. </script>
  762. </div>
  763. </body>
  764. </html>