You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

696 lines
34 KiB

3 years ago
  1. <!DOCTYPE html>
  2. <!--
  3. Flaticon icon font: Flaticon
  4. Creation date: 19/03/2021 11:27
  5. -->
  6. <html>
  7. <!DOCTYPE html>
  8. <head>
  9. <title>Flaticon WebFont</title>
  10. <link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css" />
  11. <link rel="stylesheet" type="text/css" href="flaticon.css">
  12. <meta charset="UTF-8">
  13. <style>
  14. html, body, div, span, applet, object, iframe,
  15. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  16. a, abbr, acronym, address, big, cite, code,
  17. del, dfn, em, img, ins, kbd, q, s, samp,
  18. small, strike, strong, sub, sup, tt, var,
  19. b, u, i, center,
  20. dl, dt, dd, ol, ul, li,
  21. fieldset, form, label, legend,
  22. table, caption, tbody, tfoot, thead, tr, th, td,
  23. article, aside, canvas, details, embed,
  24. figure, figcaption, footer, header, hgroup,
  25. menu, nav, output, ruby, section, summary,
  26. time, mark, audio, video {
  27. margin: 0;
  28. padding: 0;
  29. border: 0;
  30. font-size: 100%;
  31. font: inherit;
  32. vertical-align: baseline;
  33. }
  34. /* HTML5 display-role reset for older browsers */
  35. article, aside, details, figcaption, figure,
  36. footer, header, hgroup, menu, nav, section {
  37. display: block;
  38. }
  39. body {
  40. line-height: 1;
  41. }
  42. ol, ul {
  43. list-style: none;
  44. }
  45. blockquote, q {
  46. quotes: none;
  47. }
  48. blockquote:before, blockquote:after,
  49. q:before, q:after {
  50. content: '';
  51. content: none;
  52. }
  53. table {
  54. border-collapse: collapse;
  55. border-spacing: 0;
  56. }
  57. body {
  58. font-family: 'Varela Round', Helvetica, Arial, sans-serif;
  59. font-size: 16px;
  60. color: #222;
  61. }
  62. a {
  63. color: #333;
  64. border-bottom: 1px solid #a9fd00;
  65. font-weight: bold;
  66. text-decoration: none;
  67. }
  68. * {
  69. -moz-box-sizing: border-box;
  70. -webkit-box-sizing: border-box;
  71. box-sizing: border-box;
  72. margin: 0;
  73. padding: 0;
  74. }
  75. [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  76. font-family: Flaticon;
  77. font-size: 30px;
  78. font-style: normal;
  79. margin-left: 20px;
  80. color: #333;
  81. }
  82. .wrapper {
  83. max-width: 600px;
  84. margin: auto;
  85. padding: 0 1em;
  86. }
  87. .title {
  88. font-size: 1.25em;
  89. text-align: center;
  90. margin-bottom: 1em;
  91. text-transform: uppercase;
  92. }
  93. header {
  94. text-align: center;
  95. background-color: #222;
  96. color: #fff;
  97. padding: 1em;
  98. }
  99. header .logo {
  100. width: 210px;
  101. height: 38px;
  102. display: inline-block;
  103. vertical-align: middle;
  104. margin-right: 1em;
  105. border: none;
  106. }
  107. header strong {
  108. font-size: 1.95em;
  109. font-weight: bold;
  110. vertical-align: middle;
  111. margin-top: 5px;
  112. display: inline-block;
  113. }
  114. .demo {
  115. margin: 2em auto;
  116. line-height: 1.25em;
  117. }
  118. .demo ul li {
  119. margin-bottom: 1em;
  120. }
  121. .demo ul li .num {
  122. color: #222;
  123. border-radius: 20px;
  124. display: inline-block;
  125. width: 26px;
  126. padding: 3px;
  127. height: 26px;
  128. text-align: center;
  129. margin-right: 0.5em;
  130. border: 1px solid #222;
  131. }
  132. .demo ul li code {
  133. background-color: #222;
  134. border-radius: 4px;
  135. padding: 0.25em 0.5em;
  136. display: inline-block;
  137. color: #fff;
  138. font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  139. font-weight: lighter;
  140. margin-top: 1em;
  141. font-size: 0.8em;
  142. word-break: break-all;
  143. }
  144. .demo ul li code.big {
  145. padding: 1em;
  146. font-size: 0.9em;
  147. }
  148. .demo ul li code .red {
  149. color: #EF3159;
  150. }
  151. .demo ul li code .green {
  152. color: #ACFF65;
  153. }
  154. .demo ul li code .yellow {
  155. color: #FFFF99;
  156. }
  157. .demo ul li code .blue {
  158. color: #99D3FF;
  159. }
  160. .demo ul li code .purple {
  161. color: #A295FF;
  162. }
  163. .demo ul li code .dots {
  164. margin-top: 0.5em;
  165. display: block;
  166. }
  167. #glyphs {
  168. border-bottom: 1px solid #ccc;
  169. padding: 2em 0;
  170. text-align: center;
  171. }
  172. .glyph {
  173. display: inline-block;
  174. width: 9em;
  175. margin: 1em;
  176. text-align: center;
  177. vertical-align: top;
  178. background: #FFF;
  179. }
  180. .glyph .glyph-icon {
  181. padding: 10px;
  182. display: block;
  183. font-family:"Flaticon";
  184. font-size: 64px;
  185. line-height: 1;
  186. }
  187. .glyph .glyph-icon:before {
  188. font-size: 64px;
  189. color: #222;
  190. margin-left: 0;
  191. }
  192. .class-name {
  193. font-size: 0.65em;
  194. background-color: #222;
  195. color: #fff;
  196. border-radius: 4px 4px 0 0;
  197. padding: 0.5em;
  198. color: #FFFF99;
  199. font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  200. }
  201. .author-name {
  202. font-size: 0.6em;
  203. background-color: #fcfcfd;
  204. border: 1px solid #DEDEE4;
  205. border-top: 0;
  206. border-radius: 0 0 4px 4px;
  207. padding: 0.5em;
  208. }
  209. .class-name:last-child {
  210. font-size: 10px;
  211. color:#888;
  212. }
  213. .class-name:last-child a {
  214. font-size: 10px;
  215. color:#555;
  216. }
  217. .class-name:last-child a:hover {
  218. color:#a9fd00;
  219. }
  220. .glyph > input {
  221. display: block;
  222. width: 100px;
  223. margin: 5px auto;
  224. text-align: center;
  225. font-size: 12px;
  226. cursor: text;
  227. }
  228. .glyph > input.icon-input {
  229. font-family:"Flaticon";
  230. font-size: 16px;
  231. margin-bottom: 10px;
  232. }
  233. .attribution .title {
  234. margin-top: 2em;
  235. }
  236. .attribution textarea {
  237. background-color: #fcfcfd;
  238. padding: 1em;
  239. border: none;
  240. box-shadow: none;
  241. border: 1px solid #DEDEE4;
  242. border-radius: 4px;
  243. resize: none;
  244. width: 100%;
  245. height: 150px;
  246. font-size: 0.8em;
  247. font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  248. -webkit-appearance: none;
  249. }
  250. .iconsuse {
  251. margin: 2em auto;
  252. text-align: center;
  253. max-width: 1200px;
  254. }
  255. .iconsuse:after {
  256. content: '';
  257. display: table;
  258. clear: both;
  259. }
  260. .iconsuse .image {
  261. float: left;
  262. width: 25%;
  263. padding: 0 1em;
  264. }
  265. .iconsuse .image p {
  266. margin-bottom: 1em;
  267. }
  268. .iconsuse .image span {
  269. display: block;
  270. font-size: 0.65em;
  271. background-color: #222;
  272. color: #fff;
  273. border-radius: 4px;
  274. padding: 0.5em;
  275. color: #FFFF99;
  276. margin-top: 1em;
  277. font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  278. }
  279. #footer {
  280. text-align: center;
  281. background-color: #4C5B5C;
  282. color: #7c9192;
  283. padding: 1em;
  284. }
  285. #footer a {
  286. border: none;
  287. color: #a9fd00;
  288. font-weight: normal;
  289. }
  290. @media (max-width: 960px) {
  291. .iconsuse .image {
  292. width: 50%;
  293. }
  294. }
  295. @media (max-width: 560px) {
  296. .iconsuse .image {
  297. width: 100%;
  298. }
  299. }
  300. .attrDiv {
  301. }
  302. </style>
  303. <link rel="stylesheet" href="flaticon.css">
  304. </head>
  305. <body class="characters-off">
  306. <header>
  307. <a href="https://www.flaticon.com" target="_blank" class="logo">
  308. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" viewBox="0 0 560.875 102.036" enable-background="new 0 0 560.875 102.036" xml:space="preserve">
  309. <defs>
  310. </defs>
  311. <g>
  312. <g class="letters">
  313. <path fill="#ffffff" d="M141.596,29.675c0-3.777,2.985-6.767,6.764-6.767h34.438c3.426,0,6.15,2.728,6.15,6.15
  314. c0,3.43-2.724,6.149-6.15,6.149h-27.674v13.091h23.719c3.429,0,6.151,2.724,6.151,6.15c0,3.43-2.723,6.149-6.151,6.149h-23.719
  315. v17.574c0,3.773-2.986,6.761-6.764,6.761c-3.779,0-6.764-2.989-6.764-6.761V29.675z"></path>
  316. <path fill="#ffffff" d="M193.844,29.149c0-3.781,2.985-6.767,6.764-6.767c3.776,0,6.763,2.985,6.763,6.767v42.957h25.039
  317. c3.426,0,6.149,2.726,6.149,6.153c0,3.425-2.723,6.15-6.149,6.15h-31.802c-3.779,0-6.764-2.986-6.764-6.768V29.149z"></path>
  318. <path fill="#ffffff" d="M241.891,75.71l21.438-48.407c1.492-3.341,4.215-5.357,7.906-5.357h0.792
  319. c3.686,0,6.323,2.017,7.815,5.357l21.439,48.407c0.436,0.967,0.701,1.845,0.701,2.723c0,3.602-2.809,6.501-6.414,6.501
  320. c-3.161,0-5.269-1.845-6.499-4.655l-4.132-9.661h-27.059l-4.301,10.102c-1.144,2.631-3.426,4.214-6.237,4.214
  321. c-3.517,0-6.24-2.81-6.24-6.325C241.1,77.64,241.451,76.677,241.891,75.71z M279.932,58.666l-8.521-20.297l-8.526,20.297H279.932
  322. z"></path>
  323. <path fill="#ffffff" d="M314.864,35.387H301.86c-3.429,0-6.239-2.813-6.239-6.238c0-3.429,2.811-6.24,6.239-6.24h39.533
  324. c3.426,0,6.237,2.811,6.237,6.24c0,3.425-2.811,6.238-6.237,6.238h-13.001v42.785c0,3.773-2.99,6.761-6.764,6.761
  325. c-3.779,0-6.764-2.989-6.764-6.761V35.387z"></path>
  326. <path fill="#A9FD00" d="M352.615,29.149c0-3.781,2.985-6.767,6.767-6.767c3.774,0,6.761,2.985,6.761,6.767v49.024
  327. c0,3.773-2.987,6.761-6.761,6.761c-3.781,0-6.767-2.989-6.767-6.761V29.149z"></path>
  328. <path fill="#A9FD00" d="M374.132,53.836v-0.179c0-17.481,13.178-31.801,32.065-31.801c9.22,0,15.459,2.458,20.557,6.238
  329. c1.402,1.054,2.637,2.985,2.637,5.357c0,3.692-2.985,6.59-6.681,6.59c-1.845,0-3.071-0.702-4.044-1.319
  330. c-3.776-2.813-7.729-4.393-12.562-4.393c-10.364,0-17.831,8.611-17.831,19.154v0.173c0,10.542,7.291,19.329,17.831,19.329
  331. c5.715,0,9.492-1.756,13.359-4.834c1.049-0.874,2.458-1.491,4.039-1.491c3.429,0,6.325,2.813,6.325,6.236
  332. c0,2.106-1.056,3.78-2.282,4.834c-5.539,4.834-12.036,7.733-21.878,7.733C387.572,85.464,374.132,71.493,374.132,53.836z"></path>
  333. <path fill="#A9FD00" d="M433.009,53.836v-0.179c0-17.481,13.79-31.801,32.766-31.801c18.981,0,32.592,14.143,32.592,31.628v0.173
  334. c0,17.483-13.785,31.807-32.769,31.807C446.625,85.464,433.009,71.32,433.009,53.836z M484.224,53.836v-0.179
  335. c0-10.539-7.725-19.326-18.626-19.326c-10.893,0-18.449,8.611-18.449,19.154v0.173c0,10.542,7.73,19.329,18.626,19.329
  336. C476.676,72.986,484.224,64.378,484.224,53.836z"></path>
  337. <path fill="#A9FD00" d="M506.233,29.321c0-3.774,2.99-6.763,6.767-6.763h1.401c3.252,0,5.183,1.583,7.029,3.953l26.093,34.265
  338. V29.059c0-3.692,2.99-6.677,6.681-6.677c3.683,0,6.671,2.985,6.671,6.677v48.934c0,3.78-2.987,6.765-6.764,6.765h-0.436
  339. c-3.257,0-5.188-1.581-7.034-3.953l-27.056-35.492v32.944c0,3.687-2.985,6.676-6.678,6.676c-3.683,0-6.673-2.989-6.673-6.676
  340. V29.321z"></path>
  341. </g>
  342. <g class="insignia">
  343. <path fill="#ffffff" d="M48.372,56.137h12.517l11.156-18.537H37.186L25.688,18.539h57.825L94.668,0H9.271
  344. C5.925,0,2.842,1.801,1.198,4.716c-1.644,2.907-1.593,6.482,0.134,9.343l50.38,83.501c1.678,2.781,4.689,4.476,7.938,4.476
  345. c3.246,0,6.257-1.695,7.935-4.476l2.898-4.804L48.372,56.137z"></path>
  346. <g class="i">
  347. <path fill="#A9FD00" d="M93.575,18.539h0.031v0.004l21.652,0.004l2.705-4.488c1.727-2.861,1.778-6.436,0.133-9.343
  348. C116.454,1.801,113.371,0,110.026,0h-5.294L93.575,18.539z"></path>
  349. <polygon fill="#A9FD00" points="88.291,27.356 64.725,66.486 75.519,84.404 109.942,27.356"></polygon>
  350. </g>
  351. </g>
  352. </g>
  353. </svg>
  354. </a>
  355. <strong>Font Demo</strong>
  356. </header>
  357. <section class="demo wrapper">
  358. <p class="title">Instructions</p>
  359. <ul>
  360. <li>
  361. <span class="num">1</span>Copy the "Fonts" files and CSS files to your website CSS folder.
  362. </li>
  363. <li>
  364. <span class="num">2</span>Add the CSS link to your website source code on header.
  365. <code class="big">
  366. &lt;<span class="red">head</span>&gt;
  367. <br/><span class="dots">...</span>
  368. <br/>&lt;<span class="red">link</span> <span class="green">rel</span>=<span class="yellow">"stylesheet"</span> <span class="green">type</span>=<span class="yellow">"text/css"</span> <span class="green">href</span>=<span class="yellow">"your_website_domain/css_root/flaticon.css"</span>&gt;
  369. <br/><span class="dots">...</span>
  370. <br/>&lt;/<span class="red">head</span>&gt;
  371. </code>
  372. </li>
  373. <li>
  374. <p>
  375. <span class="num">3</span>Use the icon class on <code>"<span class="blue">display</span>:<span class="purple"> inline</span>"</code> elements:
  376. <br />
  377. Use example:
  378. <code>
  379. &lt;<span class="red">i</span> <span class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span class="red">i</span>&gt;
  380. </code> or
  381. <code>&lt;<span class="red">span</span> <span class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span class="red">span</span>&gt;</code>
  382. </p>
  383. </li>
  384. </ul>
  385. </section>
  386. <section id="glyphs">
  387. <div class="glyph"><div class="glyph-icon flaticon-001-wifi"></div>
  388. <div class="class-name">.flaticon-001-wifi</div>
  389. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  390. </div>
  391. <div class="glyph"><div class="glyph-icon flaticon-002-network"></div>
  392. <div class="class-name">.flaticon-002-network</div>
  393. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  394. </div>
  395. <div class="glyph"><div class="glyph-icon flaticon-003-networking"></div>
  396. <div class="class-name">.flaticon-003-networking</div>
  397. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  398. </div>
  399. <div class="glyph"><div class="glyph-icon flaticon-004-cloud-storage"></div>
  400. <div class="class-name">.flaticon-004-cloud-storage</div>
  401. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  402. </div>
  403. <div class="glyph"><div class="glyph-icon flaticon-005-file-transfer"></div>
  404. <div class="class-name">.flaticon-005-file-transfer</div>
  405. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  406. </div>
  407. <div class="glyph"><div class="glyph-icon flaticon-006-cable"></div>
  408. <div class="class-name">.flaticon-006-cable</div>
  409. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  410. </div>
  411. <div class="glyph"><div class="glyph-icon flaticon-007-protection"></div>
  412. <div class="class-name">.flaticon-007-protection</div>
  413. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  414. </div>
  415. <div class="glyph"><div class="glyph-icon flaticon-008-backup-file"></div>
  416. <div class="class-name">.flaticon-008-backup-file</div>
  417. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  418. </div>
  419. <div class="glyph"><div class="glyph-icon flaticon-009-router"></div>
  420. <div class="class-name">.flaticon-009-router</div>
  421. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  422. </div>
  423. <div class="glyph"><div class="glyph-icon flaticon-010-virus"></div>
  424. <div class="class-name">.flaticon-010-virus</div>
  425. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  426. </div>
  427. <div class="glyph"><div class="glyph-icon flaticon-011-domain"></div>
  428. <div class="class-name">.flaticon-011-domain</div>
  429. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  430. </div>
  431. <div class="glyph"><div class="glyph-icon flaticon-012-monitoring"></div>
  432. <div class="class-name">.flaticon-012-monitoring</div>
  433. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  434. </div>
  435. <div class="glyph"><div class="glyph-icon flaticon-013-vpn"></div>
  436. <div class="class-name">.flaticon-013-vpn</div>
  437. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  438. </div>
  439. <div class="glyph"><div class="glyph-icon flaticon-014-database"></div>
  440. <div class="class-name">.flaticon-014-database</div>
  441. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  442. </div>
  443. <div class="glyph"><div class="glyph-icon flaticon-015-settings"></div>
  444. <div class="class-name">.flaticon-015-settings</div>
  445. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  446. </div>
  447. <div class="glyph"><div class="glyph-icon flaticon-016-server"></div>
  448. <div class="class-name">.flaticon-016-server</div>
  449. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  450. </div>
  451. <div class="glyph"><div class="glyph-icon flaticon-017-cloud-sharing"></div>
  452. <div class="class-name">.flaticon-017-cloud-sharing</div>
  453. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  454. </div>
  455. <div class="glyph"><div class="glyph-icon flaticon-018-data-transfer"></div>
  456. <div class="class-name">.flaticon-018-data-transfer</div>
  457. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  458. </div>
  459. <div class="glyph"><div class="glyph-icon flaticon-019-analysis"></div>
  460. <div class="class-name">.flaticon-019-analysis</div>
  461. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  462. </div>
  463. <div class="glyph"><div class="glyph-icon flaticon-020-local-network"></div>
  464. <div class="class-name">.flaticon-020-local-network</div>
  465. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  466. </div>
  467. <div class="glyph"><div class="glyph-icon flaticon-021-user"></div>
  468. <div class="class-name">.flaticon-021-user</div>
  469. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  470. </div>
  471. <div class="glyph"><div class="glyph-icon flaticon-022-smartphone"></div>
  472. <div class="class-name">.flaticon-022-smartphone</div>
  473. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  474. </div>
  475. <div class="glyph"><div class="glyph-icon flaticon-023-satellite"></div>
  476. <div class="class-name">.flaticon-023-satellite</div>
  477. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  478. </div>
  479. <div class="glyph"><div class="glyph-icon flaticon-024-speedometer"></div>
  480. <div class="class-name">.flaticon-024-speedometer</div>
  481. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  482. </div>
  483. <div class="glyph"><div class="glyph-icon flaticon-025-network"></div>
  484. <div class="class-name">.flaticon-025-network</div>
  485. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  486. </div>
  487. <div class="glyph"><div class="glyph-icon flaticon-026-local-network"></div>
  488. <div class="class-name">.flaticon-026-local-network</div>
  489. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  490. </div>
  491. <div class="glyph"><div class="glyph-icon flaticon-027-download"></div>
  492. <div class="class-name">.flaticon-027-download</div>
  493. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  494. </div>
  495. <div class="glyph"><div class="glyph-icon flaticon-028-radio-tower"></div>
  496. <div class="class-name">.flaticon-028-radio-tower</div>
  497. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  498. </div>
  499. <div class="glyph"><div class="glyph-icon flaticon-029-upload"></div>
  500. <div class="class-name">.flaticon-029-upload</div>
  501. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  502. </div>
  503. <div class="glyph"><div class="glyph-icon flaticon-030-disconnected"></div>
  504. <div class="class-name">.flaticon-030-disconnected</div>
  505. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  506. </div>
  507. <div class="glyph"><div class="glyph-icon flaticon-031-data-compression"></div>
  508. <div class="class-name">.flaticon-031-data-compression</div>
  509. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  510. </div>
  511. <div class="glyph"><div class="glyph-icon flaticon-032-data-synchronization"></div>
  512. <div class="class-name">.flaticon-032-data-synchronization</div>
  513. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  514. </div>
  515. <div class="glyph"><div class="glyph-icon flaticon-033-satellite-dish"></div>
  516. <div class="class-name">.flaticon-033-satellite-dish</div>
  517. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  518. </div>
  519. <div class="glyph"><div class="glyph-icon flaticon-034-data-security"></div>
  520. <div class="class-name">.flaticon-034-data-security</div>
  521. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  522. </div>
  523. <div class="glyph"><div class="glyph-icon flaticon-035-global-network"></div>
  524. <div class="class-name">.flaticon-035-global-network</div>
  525. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  526. </div>
  527. <div class="glyph"><div class="glyph-icon flaticon-036-cloud-storage"></div>
  528. <div class="class-name">.flaticon-036-cloud-storage</div>
  529. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  530. </div>
  531. <div class="glyph"><div class="glyph-icon flaticon-037-usb"></div>
  532. <div class="class-name">.flaticon-037-usb</div>
  533. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  534. </div>
  535. <div class="glyph"><div class="glyph-icon flaticon-038-ethernet"></div>
  536. <div class="class-name">.flaticon-038-ethernet</div>
  537. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  538. </div>
  539. <div class="glyph"><div class="glyph-icon flaticon-039-404-error"></div>
  540. <div class="class-name">.flaticon-039-404-error</div>
  541. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  542. </div>
  543. <div class="glyph"><div class="glyph-icon flaticon-040-remote-access"></div>
  544. <div class="class-name">.flaticon-040-remote-access</div>
  545. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  546. </div>
  547. <div class="glyph"><div class="glyph-icon flaticon-041-cloud-server"></div>
  548. <div class="class-name">.flaticon-041-cloud-server</div>
  549. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  550. </div>
  551. <div class="glyph"><div class="glyph-icon flaticon-042-optimization"></div>
  552. <div class="class-name">.flaticon-042-optimization</div>
  553. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  554. </div>
  555. <div class="glyph"><div class="glyph-icon flaticon-043-firewall"></div>
  556. <div class="class-name">.flaticon-043-firewall</div>
  557. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  558. </div>
  559. <div class="glyph"><div class="glyph-icon flaticon-044-password"></div>
  560. <div class="class-name">.flaticon-044-password</div>
  561. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  562. </div>
  563. <div class="glyph"><div class="glyph-icon flaticon-045-file-sharing"></div>
  564. <div class="class-name">.flaticon-045-file-sharing</div>
  565. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  566. </div>
  567. <div class="glyph"><div class="glyph-icon flaticon-046-lan"></div>
  568. <div class="class-name">.flaticon-046-lan</div>
  569. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  570. </div>
  571. <div class="glyph"><div class="glyph-icon flaticon-047-file-transfer"></div>
  572. <div class="class-name">.flaticon-047-file-transfer</div>
  573. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  574. </div>
  575. <div class="glyph"><div class="glyph-icon flaticon-048-wifi"></div>
  576. <div class="class-name">.flaticon-048-wifi</div>
  577. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  578. </div>
  579. <div class="glyph"><div class="glyph-icon flaticon-049-mail"></div>
  580. <div class="class-name">.flaticon-049-mail</div>
  581. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  582. </div>
  583. <div class="glyph"><div class="glyph-icon flaticon-050-folder"></div>
  584. <div class="class-name">.flaticon-050-folder</div>
  585. <div class="author-name">Author: <a href="http://www.freepik.com" title="Freepik">Freepik</a> </div>
  586. </div>
  587. </section>
  588. <section class="attribution wrapper" style="text-align:center;">
  589. <div class="title">License and attribution:</div>
  590. <div class="attrDiv">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>.</div>
  591. <div class="attrDiv">Under License: <a href="https://file000.flaticon.com/downloads/license/license.pdf">Flaticon Basic License</a>.</div>
  592. <div class="attrDiv">By: <a href="http://www.freepik.com">Freepik</a>.</div>
  593. <div class="title">Copy the Attribution License:</div>
  594. <textarea onclick="this.focus();this.select();">
  595. Font generated by &lt;a href=&quot;https://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;.
  596. <div>Under License: <a href="https://file000.flaticon.com/downloads/license/license.pdf">Flaticon Basic License</a>.</div>
  597. <div>By: <a href="http://www.freepik.com">Freepik</a>.</div>
  598. </textarea>
  599. </section>
  600. <section class="iconsuse">
  601. <div class="title">Examples:</div>
  602. <div class="image">
  603. <p>
  604. <i class="glyph-icon flaticon-001-wifi"></i>
  605. <span>&lt;i class=&quot;flaticon-001-wifi&quot;&gt;&lt;/i&gt;</span>
  606. </p>
  607. </div>
  608. <div class="image">
  609. <p>
  610. <i class="glyph-icon flaticon-002-network"></i>
  611. <span>&lt;i class=&quot;flaticon-002-network&quot;&gt;&lt;/i&gt;</span>
  612. </p>
  613. </div>
  614. <div class="image">
  615. <p>
  616. <i class="glyph-icon flaticon-003-networking"></i>
  617. <span>&lt;i class=&quot;flaticon-003-networking&quot;&gt;&lt;/i&gt;</span>
  618. </p>
  619. </div>
  620. <div class="image">
  621. <p>
  622. <i class="glyph-icon flaticon-004-cloud-storage"></i>
  623. <span>&lt;i class=&quot;flaticon-004-cloud-storage&quot;&gt;&lt;/i&gt;</span>
  624. </p>
  625. </div>
  626. </section>
  627. <div id="footer">
  628. <div>Generated by <a href="https://www.flaticon.com">flaticon.com</a></div>
  629. </div>
  630. </body>
  631. </html>