demo.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Examples | IcoFont</title>
  6. <link rel="stylesheet" type="text/css" href="icofont.min.css">
  7. <style type="text/css">
  8. body {
  9. margin: 0;
  10. padding: 0;
  11. background: #F6F6F9;
  12. }
  13. .header {
  14. border-bottom: 1px solid #DCDCE1;
  15. padding: 10px 0;
  16. margin-bottom: 10px;
  17. }
  18. .container {
  19. width: 980px;
  20. margin: 0 auto;
  21. }
  22. .ico-title {
  23. font-size: 2em;
  24. }
  25. .iconlist {
  26. margin: 0;
  27. padding: 0;
  28. list-style: none;
  29. text-align: center;
  30. width: 100%;
  31. display: flex;
  32. flex-wrap: wrap;
  33. flex-direction: row;
  34. }
  35. .iconlist li {
  36. position: relative;
  37. margin: 5px;
  38. width: 150px;
  39. cursor: pointer;
  40. }
  41. .iconlist li .icon-holder {
  42. position: relative;
  43. text-align: center;
  44. border-radius: 3px;
  45. overflow: hidden;
  46. padding-bottom: 5px;
  47. background: #ffffff;
  48. border: 1px solid #E4E5EA;
  49. transition: all 0.2s linear 0s;
  50. }
  51. .iconlist li .icon-holder:hover {
  52. background: #00C3DA;
  53. color: #ffffff;
  54. }
  55. .iconlist li .icon-holder:hover .icon i {
  56. color: #ffffff;
  57. }
  58. .iconlist li .icon-holder .icon {
  59. padding: 20px;
  60. text-align: center;
  61. }
  62. .iconlist li .icon-holder .icon i {
  63. font-size: 3em;
  64. color: #1F1142;
  65. }
  66. .iconlist li .icon-holder span {
  67. font-size: 14px;
  68. display: block;
  69. margin-top: 5px;
  70. border-radius: 3px;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <div class="header">
  76. <div class="container">
  77. <h1 class="ico-title"> IcoFont Icons </h1>
  78. </div>
  79. </div>
  80. <div class="container">
  81. <ul class="iconlist">
  82. <li>
  83. <div class="icon-holder">
  84. <div class="icon">
  85. <i class="fas fa-eye"></i>
  86. </div>
  87. <span> eye-alt </span>
  88. </div>
  89. </li>
  90. <li>
  91. <div class="icon-holder">
  92. <div class="icon">
  93. <i class="icofont-envato"></i>
  94. </div>
  95. <span> envato </span>
  96. </div>
  97. </li>
  98. <li>
  99. <div class="icon-holder">
  100. <div class="icon">
  101. <i class="icofont-copyright"></i>
  102. </div>
  103. <span> copyright </span>
  104. </div>
  105. </li>
  106. <li>
  107. <div class="icon-holder">
  108. <div class="icon">
  109. <i class="icofont-email"></i>
  110. </div>
  111. <span> email </span>
  112. </div>
  113. </li>
  114. <li>
  115. <div class="icon-holder">
  116. <div class="icon">
  117. <i class="icofont-phone"></i>
  118. </div>
  119. <span> phone </span>
  120. </div>
  121. </li>
  122. <li>
  123. <div class="icon-holder">
  124. <div class="icon">
  125. <i class="icofont-world"></i>
  126. </div>
  127. <span> world </span>
  128. </div>
  129. </li>
  130. <li>
  131. <div class="icon-holder">
  132. <div class="icon">
  133. <i class="icofont-money"></i>
  134. </div>
  135. <span> money </span>
  136. </div>
  137. </li>
  138. <li>
  139. <div class="icon-holder">
  140. <div class="icon">
  141. <i class="icofont-align-left"></i>
  142. </div>
  143. <span> align-left </span>
  144. </div>
  145. </li>
  146. <li>
  147. <div class="icon-holder">
  148. <div class="icon">
  149. <i class="icofont-search"></i>
  150. </div>
  151. <span> search </span>
  152. </div>
  153. </li>
  154. <li>
  155. <div class="icon-holder">
  156. <div class="icon">
  157. <i class="fas fa-heart"></i>
  158. </div>
  159. <span> ui-love </span>
  160. </div>
  161. </li>
  162. <li>
  163. <div class="icon-holder">
  164. <div class="icon">
  165. <i class="icofont-bucket"></i>
  166. </div>
  167. <span> bucket </span>
  168. </div>
  169. </li>
  170. <li>
  171. <div class="icon-holder">
  172. <div class="icon">
  173. <i class="icofont-basket"></i>
  174. </div>
  175. <span> basket </span>
  176. </div>
  177. </li>
  178. <li>
  179. <div class="icon-holder">
  180. <div class="icon">
  181. <i class="fas fa-shopping-basket"></i>
  182. </div>
  183. <span> shopping-cart </span>
  184. </div>
  185. </li>
  186. <li>
  187. <div class="icon-holder">
  188. <div class="icon">
  189. <i class="icofont-ui-search"></i>
  190. </div>
  191. <span> ui-search </span>
  192. </div>
  193. </li>
  194. <li>
  195. <div class="icon-holder">
  196. <div class="icon">
  197. <i class="icofont-sale-discount"></i>
  198. </div>
  199. <span> sale-discount </span>
  200. </div>
  201. </li>
  202. <li>
  203. <div class="icon-holder">
  204. <div class="icon">
  205. <i class="icofont-question-circle"></i>
  206. </div>
  207. <span> question-circle </span>
  208. </div>
  209. </li>
  210. <li>
  211. <div class="icon-holder">
  212. <div class="icon">
  213. <i class="icofont-ui-user"></i>
  214. </div>
  215. <span> ui-user </span>
  216. </div>
  217. </li>
  218. <li>
  219. <div class="icon-holder">
  220. <div class="icon">
  221. <i class="icofont-live-support"></i>
  222. </div>
  223. <span> live-support </span>
  224. </div>
  225. </li>
  226. <li>
  227. <div class="icon-holder">
  228. <div class="icon">
  229. <i class="icofont-safety"></i>
  230. </div>
  231. <span> safety </span>
  232. </div>
  233. </li>
  234. <li>
  235. <div class="icon-holder">
  236. <div class="icon">
  237. <i class="icofont-warning"></i>
  238. </div>
  239. <span> warning </span>
  240. </div>
  241. </li>
  242. <li>
  243. <div class="icon-holder">
  244. <div class="icon">
  245. <i class="icofont-close"></i>
  246. </div>
  247. <span> close </span>
  248. </div>
  249. </li>
  250. <li>
  251. <div class="icon-holder">
  252. <div class="icon">
  253. <i class="icofont-ui-home"></i>
  254. </div>
  255. <span> ui-home </span>
  256. </div>
  257. </li>
  258. <li>
  259. <div class="icon-holder">
  260. <div class="icon">
  261. <i class="icofont-home"></i>
  262. </div>
  263. <span> home </span>
  264. </div>
  265. </li>
  266. <li>
  267. <div class="icon-holder">
  268. <div class="icon">
  269. <i class="icofont-ui-cart"></i>
  270. </div>
  271. <span> ui-cart </span>
  272. </div>
  273. </li>
  274. <li>
  275. <div class="icon-holder">
  276. <div class="icon">
  277. <i class="icofont-exchange"></i>
  278. </div>
  279. <span> exchange </span>
  280. </div>
  281. </li>
  282. <li>
  283. <div class="icon-holder">
  284. <div class="icon">
  285. <i class="fas fa-random"></i>
  286. </div>
  287. <span> ui-rotation </span>
  288. </div>
  289. </li>
  290. <li>
  291. <div class="icon-holder">
  292. <div class="icon">
  293. <i class="icofont-star"></i>
  294. </div>
  295. <span> star </span>
  296. </div>
  297. </li>
  298. <li>
  299. <div class="icon-holder">
  300. <div class="icon">
  301. <i class="icofont-price"></i>
  302. </div>
  303. <span> price </span>
  304. </div>
  305. </li>
  306. <li>
  307. <div class="icon-holder">
  308. <div class="icon">
  309. <i class="fas fa-play"></i>
  310. </div>
  311. <span> ui-play </span>
  312. </div>
  313. </li>
  314. <li>
  315. <div class="icon-holder">
  316. <div class="icon">
  317. <i class="icofont-food-cart"></i>
  318. </div>
  319. <span> food-cart </span>
  320. </div>
  321. </li>
  322. <li>
  323. <div class="icon-holder">
  324. <div class="icon">
  325. <i class="icofont-food-basket"></i>
  326. </div>
  327. <span> food-basket </span>
  328. </div>
  329. </li>
  330. <li>
  331. <div class="icon-holder">
  332. <div class="icon">
  333. <i class="icofont-contacts"></i>
  334. </div>
  335. <span> contacts </span>
  336. </div>
  337. </li>
  338. <li>
  339. <div class="icon-holder">
  340. <div class="icon">
  341. <i class="icofont-check"></i>
  342. </div>
  343. <span> check </span>
  344. </div>
  345. </li>
  346. <li>
  347. <div class="icon-holder">
  348. <div class="icon">
  349. <i class="icofont-clock-time"></i>
  350. </div>
  351. <span> clock-time </span>
  352. </div>
  353. </li>
  354. <li>
  355. <div class="icon-holder">
  356. <div class="icon">
  357. <i class="icofont-heart"></i>
  358. </div>
  359. <span> heart </span>
  360. </div>
  361. </li>
  362. <li>
  363. <div class="icon-holder">
  364. <div class="icon">
  365. <i class="icofont-layers"></i>
  366. </div>
  367. <span> layers </span>
  368. </div>
  369. </li>
  370. <li>
  371. <div class="icon-holder">
  372. <div class="icon">
  373. <i class="icofont-page"></i>
  374. </div>
  375. <span> page </span>
  376. </div>
  377. </li>
  378. <li>
  379. <div class="icon-holder">
  380. <div class="icon">
  381. <i class="icofont-recycle"></i>
  382. </div>
  383. <span> recycle </span>
  384. </div>
  385. </li>
  386. <li>
  387. <div class="icon-holder">
  388. <div class="icon">
  389. <i class="icofont-settings"></i>
  390. </div>
  391. <span> settings </span>
  392. </div>
  393. </li>
  394. <li>
  395. <div class="icon-holder">
  396. <div class="icon">
  397. <i class="icofont-tasks-alt"></i>
  398. </div>
  399. <span> tasks-alt </span>
  400. </div>
  401. </li>
  402. <li>
  403. <div class="icon-holder">
  404. <div class="icon">
  405. <i class="icofont-login"></i>
  406. </div>
  407. <span> login </span>
  408. </div>
  409. </li>
  410. <li>
  411. <div class="icon-holder">
  412. <div class="icon">
  413. <i class="icofont-logout"></i>
  414. </div>
  415. <span> logout </span>
  416. </div>
  417. </li>
  418. <li>
  419. <div class="icon-holder">
  420. <div class="icon">
  421. <i class="icofont-checked"></i>
  422. </div>
  423. <span> checked </span>
  424. </div>
  425. </li>
  426. <li>
  427. <div class="icon-holder">
  428. <div class="icon">
  429. <i class="icofont-user-alt-7"></i>
  430. </div>
  431. <span> user-alt-7 </span>
  432. </div>
  433. </li>
  434. <li>
  435. <div class="icon-holder">
  436. <div class="icon">
  437. <i class="icofont-user-alt-3"></i>
  438. </div>
  439. <span> user-alt-3 </span>
  440. </div>
  441. </li>
  442. <li>
  443. <div class="icon-holder">
  444. <div class="icon">
  445. <i class="icofont-info-circle"></i>
  446. </div>
  447. <span> info-circle </span>
  448. </div>
  449. </li>
  450. <li>
  451. <div class="icon-holder">
  452. <div class="icon">
  453. <i class="icofont-vehicle-delivery-van"></i>
  454. </div>
  455. <span> vehicle-delivery-van </span>
  456. </div>
  457. </li>
  458. <li>
  459. <div class="icon-holder">
  460. <div class="icon">
  461. <i class="icofont-fast-delivery"></i>
  462. </div>
  463. <span> fast-delivery </span>
  464. </div>
  465. </li>
  466. <li>
  467. <div class="icon-holder">
  468. <div class="icon">
  469. <i class="icofont-truck-loaded"></i>
  470. </div>
  471. <span> truck-loaded </span>
  472. </div>
  473. </li>
  474. <li>
  475. <div class="icon-holder">
  476. <div class="icon">
  477. <i class="icofont-retweet"></i>
  478. </div>
  479. <span> retweet </span>
  480. </div>
  481. </li>
  482. <li>
  483. <div class="icon-holder">
  484. <div class="icon">
  485. <i class="icofont-support"></i>
  486. </div>
  487. <span> support </span>
  488. </div>
  489. </li>
  490. <li>
  491. <div class="icon-holder">
  492. <div class="icon">
  493. <i class="icofont-support-faq"></i>
  494. </div>
  495. <span> support-faq </span>
  496. </div>
  497. </li>
  498. <li>
  499. <div class="icon-holder">
  500. <div class="icon">
  501. <i class="icofont-ssl-security"></i>
  502. </div>
  503. <span> ssl-security </span>
  504. </div>
  505. </li>
  506. <li>
  507. <div class="icon-holder">
  508. <div class="icon">
  509. <i class="icofont-headphone-alt"></i>
  510. </div>
  511. <span> headphone-alt </span>
  512. </div>
  513. </li>
  514. <li>
  515. <div class="icon-holder">
  516. <div class="icon">
  517. <i class="icofont-card"></i>
  518. </div>
  519. <span> card </span>
  520. </div>
  521. </li>
  522. <li>
  523. <div class="icon-holder">
  524. <div class="icon">
  525. <i class="icofont-headphone-alt-3"></i>
  526. </div>
  527. <span> headphone-alt-3 </span>
  528. </div>
  529. </li>
  530. <li>
  531. <div class="icon-holder">
  532. <div class="icon">
  533. <i class="icofont-fruits"></i>
  534. </div>
  535. <span> fruits </span>
  536. </div>
  537. </li>
  538. <li>
  539. <div class="icon-holder">
  540. <div class="icon">
  541. <i class="icofont-loop"></i>
  542. </div>
  543. <span> loop </span>
  544. </div>
  545. </li>
  546. <li>
  547. <div class="icon-holder">
  548. <div class="icon">
  549. <i class="icofont-ui-email"></i>
  550. </div>
  551. <span> ui-email </span>
  552. </div>
  553. </li>
  554. <li>
  555. <div class="icon-holder">
  556. <div class="icon">
  557. <i class="icofont-calendar"></i>
  558. </div>
  559. <span> calendar </span>
  560. </div>
  561. </li>
  562. <li>
  563. <div class="icon-holder">
  564. <div class="icon">
  565. <i class="icofont-speech-comments"></i>
  566. </div>
  567. <span> speech-comments </span>
  568. </div>
  569. </li>
  570. <li>
  571. <div class="icon-holder">
  572. <div class="icon">
  573. <i class="icofont-ui-calendar"></i>
  574. </div>
  575. <span> ui-calendar </span>
  576. </div>
  577. </li>
  578. <li>
  579. <div class="icon-holder">
  580. <div class="icon">
  581. <i class="icofont-arrow-right"></i>
  582. </div>
  583. <span> arrow-right </span>
  584. </div>
  585. </li>
  586. <li>
  587. <div class="icon-holder">
  588. <div class="icon">
  589. <i class="icofont-facebook"></i>
  590. </div>
  591. <span> facebook </span>
  592. </div>
  593. </li>
  594. <li>
  595. <div class="icon-holder">
  596. <div class="icon">
  597. <i class="icofont-twitter"></i>
  598. </div>
  599. <span> twitter </span>
  600. </div>
  601. </li>
  602. <li>
  603. <div class="icon-holder">
  604. <div class="icon">
  605. <i class="icofont-linkedin"></i>
  606. </div>
  607. <span> linkedin </span>
  608. </div>
  609. </li>
  610. <li>
  611. <div class="icon-holder">
  612. <div class="icon">
  613. <i class="icofont-instagram"></i>
  614. </div>
  615. <span> instagram </span>
  616. </div>
  617. </li>
  618. <li>
  619. <div class="icon-holder">
  620. <div class="icon">
  621. <i class="icofont-pinterest"></i>
  622. </div>
  623. <span> pinterest </span>
  624. </div>
  625. </li>
  626. <li>
  627. <div class="icon-holder">
  628. <div class="icon">
  629. <i class="icofont-phone-circle"></i>
  630. </div>
  631. <span> phone-circle </span>
  632. </div>
  633. </li>
  634. <li>
  635. <div class="icon-holder">
  636. <div class="icon">
  637. <i class="icofont-location-pin"></i>
  638. </div>
  639. <span> location-pin </span>
  640. </div>
  641. </li>
  642. <li>
  643. <div class="icon-holder">
  644. <div class="icon">
  645. <i class="icofont-ui-touch-phone"></i>
  646. </div>
  647. <span> ui-touch-phone </span>
  648. </div>
  649. </li>
  650. <li>
  651. <div class="icon-holder">
  652. <div class="icon">
  653. <i class="icofont-listing-box"></i>
  654. </div>
  655. <span> listing-box </span>
  656. </div>
  657. </li>
  658. <li>
  659. <div class="icon-holder">
  660. <div class="icon">
  661. <i class="icofont-navigation-menu"></i>
  662. </div>
  663. <span> navigation-menu </span>
  664. </div>
  665. </li>
  666. <li>
  667. <div class="icon-holder">
  668. <div class="icon">
  669. <i class="icofont-brand-microsoft"></i>
  670. </div>
  671. <span> brand-microsoft </span>
  672. </div>
  673. </li>
  674. <li>
  675. <div class="icon-holder">
  676. <div class="icon">
  677. <i class="icofont-layout"></i>
  678. </div>
  679. <span> layout </span>
  680. </div>
  681. </li>
  682. <li>
  683. <div class="icon-holder">
  684. <div class="icon">
  685. <i class="icofont-arrow-left"></i>
  686. </div>
  687. <span> arrow-left </span>
  688. </div>
  689. </li>
  690. <li>
  691. <div class="icon-holder">
  692. <div class="icon">
  693. <i class="fas fa-search"></i>
  694. </div>
  695. <span> search-1 </span>
  696. </div>
  697. </li>
  698. <li>
  699. <div class="icon-holder">
  700. <div class="icon">
  701. <i class="icofont-mop"></i>
  702. </div>
  703. <span> mop </span>
  704. </div>
  705. </li>
  706. <li>
  707. <div class="icon-holder">
  708. <div class="icon">
  709. <i class="far fa-trash-alt"></i>
  710. </div>
  711. <span> bin </span>
  712. </div>
  713. </li>
  714. <li>
  715. <div class="icon-holder">
  716. <div class="icon">
  717. <i class="icofont-filter"></i>
  718. </div>
  719. <span> filter </span>
  720. </div>
  721. </li>
  722. <li>
  723. <div class="icon-holder">
  724. <div class="icon">
  725. <i class="fas fa-star"></i>
  726. </div>
  727. <span> ui-rating </span>
  728. </div>
  729. </li>
  730. <li>
  731. <div class="icon-holder">
  732. <div class="icon">
  733. <i class="fas fa-star"></i>
  734. </div>
  735. <span> ui-rate-blank </span>
  736. </div>
  737. </li>
  738. <li>
  739. <div class="icon-holder">
  740. <div class="icon">
  741. <i class="icofont-random"></i>
  742. </div>
  743. <span> random </span>
  744. </div>
  745. </li>
  746. <li>
  747. <div class="icon-holder">
  748. <div class="icon">
  749. <i class="icofont-listine-dots"></i>
  750. </div>
  751. <span> listine-dots </span>
  752. </div>
  753. </li>
  754. <li>
  755. <div class="icon-holder">
  756. <div class="icon">
  757. <i class="icofont-ui-call"></i>
  758. </div>
  759. <span> ui-call </span>
  760. </div>
  761. </li>
  762. <li>
  763. <div class="icon-holder">
  764. <div class="icon">
  765. <i class="icofont-ui-contact-list"></i>
  766. </div>
  767. <span> ui-contact-list </span>
  768. </div>
  769. </li>
  770. <li>
  771. <div class="icon-holder">
  772. <div class="icon">
  773. <i class="icofont-ghost"></i>
  774. </div>
  775. <span> ghost </span>
  776. </div>
  777. </li>
  778. <li>
  779. <div class="icon-holder">
  780. <div class="icon">
  781. <i class="icofont-flag"></i>
  782. </div>
  783. <span> flag </span>
  784. </div>
  785. </li>
  786. <li>
  787. <div class="icon-holder">
  788. <div class="icon">
  789. <i class="icofont-ui-block"></i>
  790. </div>
  791. <span> ui-block </span>
  792. </div>
  793. </li>
  794. <li>
  795. <div class="icon-holder">
  796. <div class="icon">
  797. <i class="icofont-exclamation-tringle"></i>
  798. </div>
  799. <span> exclamation-tringle </span>
  800. </div>
  801. </li>
  802. <li>
  803. <div class="icon-holder">
  804. <div class="icon">
  805. <i class="icofont-shield"></i>
  806. </div>
  807. <span> shield </span>
  808. </div>
  809. </li>
  810. <li>
  811. <div class="icon-holder">
  812. <div class="icon">
  813. <i class="icofont-water-drop"></i>
  814. </div>
  815. <span> water-drop </span>
  816. </div>
  817. </li>
  818. <li>
  819. <div class="icon-holder">
  820. <div class="icon">
  821. <i class="icofont-trash"></i>
  822. </div>
  823. <span> trash </span>
  824. </div>
  825. </li>
  826. <li>
  827. <div class="icon-holder">
  828. <div class="icon">
  829. <i class="icofont-camera"></i>
  830. </div>
  831. <span> camera </span>
  832. </div>
  833. </li>
  834. <li>
  835. <div class="icon-holder">
  836. <div class="icon">
  837. <i class="icofont-share"></i>
  838. </div>
  839. <span> share </span>
  840. </div>
  841. </li>
  842. <li>
  843. <div class="icon-holder">
  844. <div class="icon">
  845. <i class="icofont-share-boxed"></i>
  846. </div>
  847. <span> share-boxed </span>
  848. </div>
  849. </li>
  850. <li>
  851. <div class="icon-holder">
  852. <div class="icon">
  853. <i class="icofont-quote-left"></i>
  854. </div>
  855. <span> quote-left </span>
  856. </div>
  857. </li>
  858. <li>
  859. <div class="icon-holder">
  860. <div class="icon">
  861. <i class="icofont-reply-all"></i>
  862. </div>
  863. <span> reply-all </span>
  864. </div>
  865. </li>
  866. <li>
  867. <div class="icon-holder">
  868. <div class="icon">
  869. <i class="icofont-ui-reply"></i>
  870. </div>
  871. <span> ui-reply </span>
  872. </div>
  873. </li>
  874. <li>
  875. <div class="icon-holder">
  876. <div class="icon">
  877. <i class="fas fa-shopping-basket"></i>
  878. </div>
  879. <span> cart </span>
  880. </div>
  881. </li>
  882. <li>
  883. <div class="icon-holder">
  884. <div class="icon">
  885. <i class="icofont-book"></i>
  886. </div>
  887. <span> book </span>
  888. </div>
  889. </li>
  890. <li>
  891. <div class="icon-holder">
  892. <div class="icon">
  893. <i class="icofont-bag-alt"></i>
  894. </div>
  895. <span> bag-alt </span>
  896. </div>
  897. </li>
  898. <li>
  899. <div class="icon-holder">
  900. <div class="icon">
  901. <i class="icofont-key-hole"></i>
  902. </div>
  903. <span> key-hole </span>
  904. </div>
  905. </li>
  906. <li>
  907. <div class="icon-holder">
  908. <div class="icon">
  909. <i class="icofont-book-alt"></i>
  910. </div>
  911. <span> book-alt </span>
  912. </div>
  913. </li>
  914. <li>
  915. <div class="icon-holder">
  916. <div class="icon">
  917. <i class="icofont-lock"></i>
  918. </div>
  919. <span> lock </span>
  920. </div>
  921. </li>
  922. <li>
  923. <div class="icon-holder">
  924. <div class="icon">
  925. <i class="icofont-options"></i>
  926. </div>
  927. <span> options </span>
  928. </div>
  929. </li>
  930. <li>
  931. <div class="icon-holder">
  932. <div class="icon">
  933. <i class="icofont-external-link"></i>
  934. </div>
  935. <span> external-link </span>
  936. </div>
  937. </li>
  938. <li>
  939. <div class="icon-holder">
  940. <div class="icon">
  941. <i class="icofont-sign-in"></i>
  942. </div>
  943. <span> sign-in </span>
  944. </div>
  945. </li>
  946. <li>
  947. <div class="icon-holder">
  948. <div class="icon">
  949. <i class="icofont-brand-windows"></i>
  950. </div>
  951. <span> brand-windows </span>
  952. </div>
  953. </li>
  954. <li>
  955. <div class="icon-holder">
  956. <div class="icon">
  957. <i class="icofont-brand-apple"></i>
  958. </div>
  959. <span> brand-apple </span>
  960. </div>
  961. </li>
  962. <li>
  963. <div class="icon-holder">
  964. <div class="icon">
  965. <i class="icofont-brand-android-robot"></i>
  966. </div>
  967. <span> brand-android-robot </span>
  968. </div>
  969. </li>
  970. <li>
  971. <div class="icon-holder">
  972. <div class="icon">
  973. <i class="icofont-brand-hp"></i>
  974. </div>
  975. <span> brand-hp </span>
  976. </div>
  977. </li>
  978. <li>
  979. <div class="icon-holder">
  980. <div class="icon">
  981. <i class="icofont-brand-huawei"></i>
  982. </div>
  983. <span> brand-huawei </span>
  984. </div>
  985. </li>
  986. <li>
  987. <div class="icon-holder">
  988. <div class="icon">
  989. <i class="icofont-check-circled"></i>
  990. </div>
  991. <span> check-circled </span>
  992. </div>
  993. </li>
  994. <li>
  995. <div class="icon-holder">
  996. <div class="icon">
  997. <i class="icofont-brand-linux"></i>
  998. </div>
  999. <span> brand-linux </span>
  1000. </div>
  1001. </li>
  1002. <li>
  1003. <div class="icon-holder">
  1004. <div class="icon">
  1005. <i class="icofont-paper-plane"></i>
  1006. </div>
  1007. <span> paper-plane </span>
  1008. </div>
  1009. </li>
  1010. <li>
  1011. <div class="icon-holder">
  1012. <div class="icon">
  1013. <i class="icofont-question"></i>
  1014. </div>
  1015. <span> question </span>
  1016. </div>
  1017. </li>
  1018. <li>
  1019. <div class="icon-holder">
  1020. <div class="icon">
  1021. <i class="icofont-paragraph"></i>
  1022. </div>
  1023. <span> paragraph </span>
  1024. </div>
  1025. </li>
  1026. <li>
  1027. <div class="icon-holder">
  1028. <div class="icon">
  1029. <i class="icofont-book-mark"></i>
  1030. </div>
  1031. <span> book-mark </span>
  1032. </div>
  1033. </li>
  1034. <li>
  1035. <div class="icon-holder">
  1036. <div class="icon">
  1037. <i class="icofont-rounded-down"></i>
  1038. </div>
  1039. <span> rounded-down </span>
  1040. </div>
  1041. </li>
  1042. <li>
  1043. <div class="icon-holder">
  1044. <div class="icon">
  1045. <i class="icofont-plus"></i>
  1046. </div>
  1047. <span> plus </span>
  1048. </div>
  1049. </li>
  1050. <li>
  1051. <div class="icon-holder">
  1052. <div class="icon">
  1053. <i class="icofont-minus"></i>
  1054. </div>
  1055. <span> minus </span>
  1056. </div>
  1057. </li>
  1058. <li>
  1059. <div class="icon-holder">
  1060. <div class="icon">
  1061. <i class="icofont-edit"></i>
  1062. </div>
  1063. <span> edit </span>
  1064. </div>
  1065. </li>
  1066. <li>
  1067. <div class="icon-holder">
  1068. <div class="icon">
  1069. <i class="icofont-ui-delete"></i>
  1070. </div>
  1071. <span> ui-delete </span>
  1072. </div>
  1073. </li>
  1074. </ul>
  1075. </div>
  1076. </body>
  1077. </html>