Home Explore Help
Register Sign In
dbr-themes-pro
/
modunawa
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
modunawa
/
resources
/
fonts
/
flaticon
/
flaticon.html

flaticon.html 18 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454 
  1. <!DOCTYPE html>
    2. 

  2. <!--
    3. 

  3.   Flaticon icon font: Flaticon
    4. 

  4.   Creation date: 08/03/2021 13:24
    5. 

  5. -->
    6. 

  6. <html>
    7. 

  7. 

  8. <head>
    9. 

  9.     <title>Flaticon Webfont</title>
    10. 

  10.     <link rel="stylesheet" type="text/css" href="flaticon.css">
    11. 

  11.     <meta charset="UTF-8">
    12. 

  12.     <style>
    13. 

  13.     html, body, div, span, applet, object, iframe,
    14. 

  14.     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    15. 

  15.     a, abbr, acronym, address, big, cite, code,
    16. 

  16.     del, dfn, em, img, ins, kbd, q, s, samp,
    17. 

  17.     small, strike, strong, sub, sup, tt, var,
    18. 

  18.     b, u, i, center,
    19. 

  19.     dl, dt, dd, ol, ul, li,
    20. 

  20.     fieldset, form, label, legend,
    21. 

  21.     table, caption, tbody, tfoot, thead, tr, th, td,
    22. 

  22.     article, aside, canvas, details, embed,
    23. 

  23.     figure, figcaption, footer, header, hgroup,
    24. 

  24.     menu, nav, output, ruby, section, summary,
    25. 

  25.     time, mark, audio, video {
    26. 

  26.         margin: 0;
    27. 

  27.         padding: 0;
    28. 

  28.         border: 0;
    29. 

  29.         font-size: 100%;
    30. 

  30.         font: inherit;
    31. 

  31.         vertical-align: baseline;
    32. 

  32.     }
    33. 

  33.     /* HTML5 display-role reset for older browsers */
    34. 

  34.     article, aside, details, figcaption, figure,
    35. 

  35.     footer, header, hgroup, menu, nav, section {
    36. 

  36.         display: block;
    37. 

  37.     }
    38. 

  38.     body {
    39. 

  39.         line-height: 1;
    40. 

  40.     }
    41. 

  41.     ol, ul {
    42. 

  42.         list-style: none;
    43. 

  43.     }
    44. 

  44.     blockquote, q {
    45. 

  45.         quotes: none;
    46. 

  46.     }
    47. 

  47.     blockquote:before, blockquote:after,
    48. 

  48.     q:before, q:after {
    49. 

  49.         content: '';
    50. 

  50.         content: none;
    51. 

  51.     }
    52. 

  52.     table {
    53. 

  53.         border-collapse: collapse;
    54. 

  54.         border-spacing: 0;
    55. 

  55.     }
    56. 

  56.     body {
    57. 

  57.         font-family: Helvetica, Arial, sans-serif;
    58. 

  58.         font-size: 16px;
    59. 

  59.         color: #5f7d95;
    60. 

  60.     }
    61. 

  61.     a {
    62. 

  62.         color: #4AD295;
    63. 

  63.         font-weight: bold;
    64. 

  64.         text-decoration: none;
    65. 

  65.     }
    66. 

  66.     * {
    67. 

  67.         -moz-box-sizing: border-box;
    68. 

  68.         -webkit-box-sizing: border-box;
    69. 

  69.         box-sizing: border-box;
    70. 

  70.         margin: 0;
    71. 

  71.         padding: 0;
    72. 

  72.     }
    73. 

  73.     [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    74. 

  74.         font-family: Flaticon;
    75. 

  75.         font-size: 30px;
    76. 

  76.         font-style: normal;
    77. 

  77.         margin-left: 20px;
    78. 

  78.         color: #333;
    79. 

  79.     }
    80. 

  80.     .wrapper {
    81. 

  81.         max-width: 600px;
    82. 

  82.         margin: auto;
    83. 

  83.         padding: 0 1em;
    84. 

  84.     }
    85. 

  85.     .title {
    86. 

  86.         margin-bottom: 24px;
    87. 

  87.         text-transform: uppercase;
    88. 

  88.         font-weight: bold;
    89. 

  89.     }
    90. 

  90.     header {
    91. 

  91.         text-align: center;
    92. 

  92.         padding: 24px;
    93. 

  93.     }
    94. 

  94.     header .logo {
    95. 

  95.         width: 210px;
    96. 

  96.         height: auto;
    97. 

  97.         border: none;
    98. 

  98.         display: inline-block;
    99. 

  99.     }
    100. 

  100.     header strong {
    101. 

  101.         font-size: 28px;
    102. 

  102.         font-weight: 500;
    103. 

  103.         vertical-align: middle;
    104. 

  104.     }
    105. 

  105.     .demo {
    106. 

  106.         margin: 2em auto;
    107. 

  107.         line-height: 1.25em;
    108. 

  108.     }
    109. 

  109.     .demo ul li {
    110. 

  110.         margin-bottom: 12px;
    111. 

  111.     }
    112. 

  112.     .demo ul li code {
    113. 

  113.         background-color: #1D262D;
    114. 

  114.         border-radius: 3px;
    115. 

  115.         padding: 12px;
    116. 

  116.         display: inline-block;
    117. 

  117.         color: #fff;
    118. 

  118.         font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    119. 

  119.         font-weight: lighter;
    120. 

  120.         margin-top: 12px;
    121. 

  121.         font-size: 13px;
    122. 

  122.         word-break: break-all;
    123. 

  123.     }
    124. 

  124.     .demo ul li code .red {
    125. 

  125.         color: #EC3A3B;
    126. 

  126.     }
    127. 

  127.     .demo ul li code .green {
    128. 

  128.         color: #4AD295;
    129. 

  129.     }
    130. 

  130.     .demo ul li code .yellow {
    131. 

  131.         color: #FFEEB6;
    132. 

  132.     }
    133. 

  133.     .demo ul li code .blue {
    134. 

  134.         color: #2C8CF4;
    135. 

  135.     }
    136. 

  136.     .demo ul li code .purple {
    137. 

  137.         color: #4949E7;
    138. 

  138.     }
    139. 

  139.     .demo ul li code .dots {
    140. 

  140.         margin-top: 0.5em;
    141. 

  141.         display: block;
    142. 

  142.     }
    143. 

  143.     #glyphs {
    144. 

  144.         border-bottom: 1px solid #E3E9ED;
    145. 

  145.         padding: 2em 0;
    146. 

  146.         text-align: center;
    147. 

  147.     }
    148. 

  148.     .glyph {
    149. 

  149.         display: inline-block;
    150. 

  150.         width: 9em;
    151. 

  151.         margin: 1em;
    152. 

  152.         text-align: center;
    153. 

  153.         vertical-align: top;
    154. 

  154.         background: #FFF;
    155. 

  155.     }
    156. 

  156.     .glyph .glyph-icon {
    157. 

  157.         padding: 10px;
    158. 

  158.         display: block;
    159. 

  159.         font-family:"Flaticon";
    160. 

  160.         font-size: 64px;
    161. 

  161.         line-height: 1;
    162. 

  162.     }
    163. 

  163.     .glyph .glyph-icon:before {
    164. 

  164.         font-size: 64px;
    165. 

  165.         color: #5f7d95;
    166. 

  166.         margin-left: 0;
    167. 

  167.     }
    168. 

  168.     .class-name {
    169. 

  169.         font-size: 0.65em;
    170. 

  170.         background-color: #E3E9ED;
    171. 

  171.         color: #869FB2;
    172. 

  172.         border-radius: 4px 4px 0 0;
    173. 

  173.         padding: 0.5em;
    174. 

  174.         font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    175. 

  175.     }
    176. 

  176.     .author-name {
    177. 

  177.         font-size: 0.6em;
    178. 

  178.         background-color: #EFF3F6;
    179. 

  179.         border-top: 0;
    180. 

  180.         border-radius: 0 0 4px 4px;
    181. 

  181.         padding: 0.5em;
    182. 

  182.     }
    183. 

  183.     .author-name a {
    184. 

  184.         color: #1D262D;
    185. 

  185.     }
    186. 

  186.     .class-name:last-child {
    187. 

  187.         font-size: 10px;
    188. 

  188.         color:#888;
    189. 

  189.     }
    190. 

  190.     .class-name:last-child a {
    191. 

  191.         font-size: 10px;
    192. 

  192.         color:#555;
    193. 

  193.     }
    194. 

  194.     .glyph > input {
    195. 

  195.         display: block;
    196. 

  196.         width: 100px;
    197. 

  197.         margin: 5px auto;
    198. 

  198.         text-align: center;
    199. 

  199.         font-size: 12px;
    200. 

  200.         cursor: text;
    201. 

  201.     }
    202. 

  202.     .glyph > input.icon-input {
    203. 

  203.         font-family:"Flaticon";
    204. 

  204.         font-size: 16px;
    205. 

  205.         margin-bottom: 10px;
    206. 

  206.     }
    207. 

  207.     .attribution .title {
    208. 

  208.         margin-top: 2em;
    209. 

  209.     }
    210. 

  210.     .attribution textarea {
    211. 

  211.         background-color: #F8FAFB;
    212. 

  212.         color: #1D262D;
    213. 

  213.         padding: 1em;
    214. 

  214.         border: none;
    215. 

  215.         box-shadow: none;
    216. 

  216.         border: 1px solid #E3E9ED;
    217. 

  217.         border-radius: 4px;
    218. 

  218.         resize: none;
    219. 

  219.         width: 100%;
    220. 

  220.         height: 150px;
    221. 

  221.         font-size: 0.8em;
    222. 

  222.         font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    223. 

  223.         -webkit-appearance: none;
    224. 

  224.     }
    225. 

  225.     .attribution textarea:hover {
    226. 

  226.         border-color: #CFD9E0;
    227. 

  227.     }
    228. 

  228.     .attribution textarea:focus {
    229. 

  229.         border-color: #4AD295;
    230. 

  230.     }
    231. 

  231.     .iconsuse {
    232. 

  232.         margin: 2em auto;
    233. 

  233.         text-align: center;
    234. 

  234.         max-width: 1200px;
    235. 

  235.     }
    236. 

  236.     .iconsuse:after {
    237. 

  237.         content: '';
    238. 

  238.         display: table;
    239. 

  239.         clear: both;
    240. 

  240.     }
    241. 

  241.     .iconsuse .image {
    242. 

  242.         float: left;
    243. 

  243.         width: 25%;
    244. 

  244.         padding: 0 1em;
    245. 

  245.     }
    246. 

  246.     .iconsuse .image p {
    247. 

  247.         margin-bottom: 1em;
    248. 

  248.     }
    249. 

  249.     .iconsuse .image span {
    250. 

  250.         display: block;
    251. 

  251.         font-size: 0.65em;
    252. 

  252.         background-color: #222;
    253. 

  253.         color: #fff;
    254. 

  254.         border-radius: 4px;
    255. 

  255.         padding: 0.5em;
    256. 

  256.         color: #FFFF99;
    257. 

  257.         margin-top: 1em;
    258. 

  258.         font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    259. 

  259.     }
    260. 

  260.     .glyph-icon:before {
    261. 

  261.         color: #5f7d95;
    262. 

  262.     }
    263. 

  263.     #footer {
    264. 

  264.         text-align: center;
    265. 

  265.         background-color: #1D262D;
    266. 

  266.         color: #869FB2;
    267. 

  267.         padding: 12px;
    268. 

  268.         font-size: 14px;
    269. 

  269.     }
    270. 

  270.     #footer a {
    271. 

  271.         font-weight: normal;
    272. 

  272.     }
    273. 

  273.     @media (max-width: 960px) {
    274. 

  274.         .iconsuse .image {
    275. 

  275.             width: 50%;
    276. 

  276.         }
    277. 

  277.     }
    278. 

  278.     </style>
    279. 

  279. </head>
    280. 

  280. 

  281. <body class="characters-off">
    282. 

  282. 

  283.     <header>
    284. 

  284.         <a href="https://www.flaticon.com/" target="_blank" class="logo">
    285. 

  285.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 394.3 76.5"><path d="M156.6,69.4H145.3V7.1h11.3Z" style="fill:#0e2a47"/><path d="M206.2,69.4h-11V64.8a15.4,15.4,0,0,1-12.6,5.7c-11.6,0-20.3-9.5-20.3-22.1s8.8-22.1,20.3-22.1a15.4,15.4,0,0,1,12.6,5.8V27.5h11Zm-32.4-21c0,6.4,4.2,11.6,10.8,11.6s10.8-4.9,10.8-11.6-4.4-11.6-10.8-11.6S173.9,42,173.9,48.4Z" style="fill:#0e2a47"/><path d="M262.5,13.7a7.2,7.2,0,0,1-14.4,0,7.2,7.2,0,1,1,14.4,0ZM261,69.4H249.6v-42H261Z" style="fill:#0e2a47"/><path id="_Trazado_" data-name="&lt;Trazado&gt;" d="M139.6,17.8a16.6,16.6,0,0,0-8-1.4c-3.2.4-4.9,2-4.9,5.9v5.1h13V37.5h-13v32H115.4v-32h-7.8v-10h7.8V22.2c0-9.9,5.2-16.3,15-16.3a23.4,23.4,0,0,1,9.3,1.8Z" style="fill:#0e2a47"/><path d="M235.1,60c-3.5,0-6.3-1.9-6.3-7.1V37.5H244v-10H228.8V15H217.5V27.5h-5.7v10h5.7V53.7c0,10.9,5.3,16.8,15.7,16.8A22.9,22.9,0,0,0,244,68l-4.3-9.1A12.3,12.3,0,0,1,235.1,60Z" style="fill:#0e2a47"/><path d="M348.9,48.4c0,12.6-9.7,22.1-22.7,22.1s-22.7-9.4-22.7-22.1,9.6-22.1,22.7-22.1S348.9,35.8,348.9,48.4Zm-33.9,0c0,6.8,4.8,11.6,11.1,11.6s11.2-4.8,11.2-11.6-4.8-11.6-11.2-11.6S315.1,41.6,315.1,48.4Z" style="fill:#0e2a47"/><path d="M394.3,42.7V69.4H382.9V46.3c0-6.1-3-9.4-8.2-9.4s-8.9,3.2-8.9,9.5v23H354.6v-42h11v4.9c3-4.5,7.6-6.1,12.3-6.1C387.5,26.3,394.3,33,394.3,42.7Z" style="fill:#0e2a47"/><path d="M298,55.7h0a12.4,12.4,0,0,1-8.2,4.2h-.9l-1.8-.2a10,10,0,0,1-7.4-5.6,13.2,13.2,0,0,1-1.2-5.8,13,13,0,0,1,1.3-5.9,10.1,10.1,0,0,1,7.5-5.5h2.4a11.7,11.7,0,0,1,8.3,4.2l5.5-9.6a19.9,19.9,0,0,0-8.1-4.3,23.4,23.4,0,0,0-6.1-.8,25.2,25.2,0,0,0-7.5,1.1,20.9,20.9,0,0,0-8,4.6,21.9,21.9,0,0,0-6.8,16.4,21.9,21.9,0,0,0,6.7,16.3,20.9,20.9,0,0,0,8,4.6,25.2,25.2,0,0,0,7.7,1.2,23.6,23.6,0,0,0,6.2-.8,20,20,0,0,0,8.1-4.4Z" style="fill:#0e2a47"/><path d="M46.3,26.5H26.9L20.8,16H52.4L61.6,0H9.4A9.3,9.3,0,0,0,1.3,4.7a9.3,9.3,0,0,0,0,9.4L34.6,71.8a9.4,9.4,0,0,0,16.2,0l1.1-1.9L36.6,43.3Z" style="fill:#4ad295"/><path d="M84.2,4.7A9.3,9.3,0,0,0,76.1,0H73.8l-25,43.3,9.2,16L84.2,14A9.3,9.3,0,0,0,84.2,4.7Z" style="fill:#4ad295"/></svg>
    286. 

  286.         </a>
    287. 

  287.     </header>
    288. 

  288. 

  289.     <section class="demo wrapper">
    290. 

  290. 

  291.         <p class="title">Webfont Instructions</p>
    292. 

  292. 

  293.         <ul>
    294. 

  294.             <li>
    295. 

  295.                 <span class="num">1. </span>Copy the "Fonts" files and CSS files to your website CSS folder.
    296. 

  296.             </li>
    297. 

  297.             <li>
    298. 

  298.                 <span class="num">2. </span>Add the CSS link to your website source code on header.
    299. 

  299.                 <code class="big">
    300. 

  300.                     &lt;<span class="red">head</span>&gt;
    301. 

  301.                     <br/><span class="dots">...</span>
    302. 

  302.                     <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;
    303. 

  303.                     <br/><span class="dots">...</span>
    304. 

  304.                     <br/>&lt;/<span class="red">head</span>&gt;
    305. 

  305.                 </code>
    306. 

  306.             </li>
    307. 

  307. 

  308.             <li>
    309. 

  309.                 <p>
    310. 

  310.                     <span class="num">3. </span>Use the icon class on <code>"<span class="blue">display</span>:<span class="purple"> inline</span>"</code> elements:
    311. 

  311.                     <br />
    312. 

  312.                     Use example: <code>&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;</code> or <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>
    313. 

  313.             </li>
    314. 

  314.         </ul>
    315. 

  315. 

  316.     </section>
    317. 

  317. 

  318. 

  319. 

  320. 

  321.    <section id="glyphs">          
    322. 

  322.     
    323. 

  323.       
    324. 

  324.         <div class="glyph"><div class="glyph-icon flaticon-vegetable"></div>
    325. 

  325.             <div class="class-name">.flaticon-vegetable</div>
    326. 

  326.             <div class="author-name">Author: <a data-file="001-vegetable" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    327. 

  327.         </div>        
    328. 

  328.         
    329. 

  329.         <div class="glyph"><div class="glyph-icon flaticon-fruit"></div>
    330. 

  330.             <div class="class-name">.flaticon-fruit</div>
    331. 

  331.             <div class="author-name">Author: <a data-file="002-fruit" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    332. 

  332.         </div>        
    333. 

  333.         
    334. 

  334.         <div class="glyph"><div class="glyph-icon flaticon-groceries"></div>
    335. 

  335.             <div class="class-name">.flaticon-groceries</div>
    336. 

  336.             <div class="author-name">Author: <a data-file="003-groceries" href="http://www.freepik.com">Freepik</a> </div> 
    337. 

  337.         </div>        
    338. 

  338.         
    339. 

  339.         <div class="glyph"><div class="glyph-icon flaticon-bread"></div>
    340. 

  340.             <div class="class-name">.flaticon-bread</div>
    341. 

  341.             <div class="author-name">Author: <a data-file="004-bread" href="https://www.flaticon.com/authors/iconixar">iconixar</a> </div> 
    342. 

  342.         </div>        
    343. 

  343.         
    344. 

  344.         <div class="glyph"><div class="glyph-icon flaticon-fast-food"></div>
    345. 

  345.             <div class="class-name">.flaticon-fast-food</div>
    346. 

  346.             <div class="author-name">Author: <a data-file="005-fast-food" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    347. 

  347.         </div>        
    348. 

  348.         
    349. 

  349.         <div class="glyph"><div class="glyph-icon flaticon-fish"></div>
    350. 

  350.             <div class="class-name">.flaticon-fish</div>
    351. 

  351.             <div class="author-name">Author: <a data-file="006-fish" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    352. 

  352.         </div>        
    353. 

  353.         
    354. 

  354.         <div class="glyph"><div class="glyph-icon flaticon-barbecue"></div>
    355. 

  355.             <div class="class-name">.flaticon-barbecue</div>
    356. 

  356.             <div class="author-name">Author: <a data-file="007-barbecue" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    357. 

  357.         </div>        
    358. 

  358.         
    359. 

  359.         <div class="glyph"><div class="glyph-icon flaticon-crab"></div>
    360. 

  360.             <div class="class-name">.flaticon-crab</div>
    361. 

  361.             <div class="author-name">Author: <a data-file="008-crab" href="http://www.freepik.com">Freepik</a> </div> 
    362. 

  362.         </div>        
    363. 

  363.         
    364. 

  364.         <div class="glyph"><div class="glyph-icon flaticon-salad"></div>
    365. 

  365.             <div class="class-name">.flaticon-salad</div>
    366. 

  366.             <div class="author-name">Author: <a data-file="009-salad" href="http://www.freepik.com">Freepik</a> </div> 
    367. 

  367.         </div>        
    368. 

  368.         
    369. 

  369.         <div class="glyph"><div class="glyph-icon flaticon-dried-fruit"></div>
    370. 

  370.             <div class="class-name">.flaticon-dried-fruit</div>
    371. 

  371.             <div class="author-name">Author: <a data-file="010-dried-fruit" href="http://www.freepik.com">Freepik</a> </div> 
    372. 

  372.         </div>        
    373. 

  373.         
    374. 

  374.         <div class="glyph"><div class="glyph-icon flaticon-wheat-sack"></div>
    375. 

  375.             <div class="class-name">.flaticon-wheat-sack</div>
    376. 

  376.             <div class="author-name">Author: <a data-file="011-wheat-sack" href="https://www.flaticon.com/authors/pixelmeetup">Pixelmeetup</a> </div> 
    377. 

  377.         </div>        
    378. 

  378.         
    379. 

  379.         <div class="glyph"><div class="glyph-icon flaticon-beverage"></div>
    380. 

  380.             <div class="class-name">.flaticon-beverage</div>
    381. 

  381.             <div class="author-name">Author: <a data-file="012-beverage" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a> </div> 
    382. 

  382.         </div>        
    383. 

  383.         
    384. 

  384.         <div class="glyph"><div class="glyph-icon flaticon-cheers"></div>
    385. 

  385.             <div class="class-name">.flaticon-cheers</div>
    386. 

  386.             <div class="author-name">Author: <a data-file="013-cheers" href="http://www.freepik.com">Freepik</a> </div> 
    387. 

  387.         </div>        
    388. 

  388.         
    389. 

  389.         <div class="glyph"><div class="glyph-icon flaticon-dairy-products"></div>
    390. 

  390.             <div class="class-name">.flaticon-dairy-products</div>
    391. 

  391.             <div class="author-name">Author: <a data-file="014-dairy-products" href="https://www.flaticon.com/authors/smashicons">Smashicons</a> </div> 
    392. 

  392.         </div>        
    393. 

  393.         
    394. 

  394. 

  395.     </section>
    396. 

  396. 

  397. 

  398. 

  399.     <section class="attribution wrapper"   style="text-align:center;">
    400. 

  400. 

  401.       <div class="title">License and attribution:</div><div class="attrDiv">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>. <div><p>Under <a href="http://creativecommons.org/licenses/by/3.0/">CC</a>: <a data-file="012-beverage" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a>, <a data-file="013-cheers" href="http://www.freepik.com">Freepik</a>, <a data-file="004-bread" href="https://www.flaticon.com/authors/iconixar">iconixar</a>, <a data-file="011-wheat-sack" href="https://www.flaticon.com/authors/pixelmeetup">Pixelmeetup</a>, <a data-file="014-dairy-products" href="https://www.flaticon.com/authors/smashicons">Smashicons</a></p>  </div>
    402. 

  402.       </div>
    403. 

  403.       <div class="title">Copy the Attribution License:</div>
    404. 

  404. 

  405.     <textarea onclick="this.focus();this.select();">Font generated by &lt;a href=&quot;https://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;. <p>Under <a href="http://creativecommons.org/licenses/by/3.0/">CC</a>: <a data-file="012-beverage" href="https://www.flaticon.com/authors/eucalyp">Eucalyp</a>, <a data-file="013-cheers" href="http://www.freepik.com">Freepik</a>, <a data-file="004-bread" href="https://www.flaticon.com/authors/iconixar">iconixar</a>, <a data-file="011-wheat-sack" href="https://www.flaticon.com/authors/pixelmeetup">Pixelmeetup</a>, <a data-file="014-dairy-products" href="https://www.flaticon.com/authors/smashicons">Smashicons</a></p>  
    406. 

  406.      </textarea>
    407. 

  407. 

  408.     </section>
    409. 

  409. 

  410.     <section class="iconsuse">
    411. 

  411. 

  412.           <div class="title">Examples:</div>            
    413. 

  413.              
    414. 

  414.             <div class="image">
    415. 

  415.                 <p>
    416. 

  416.                     <i class="glyph-icon flaticon-vegetable"></i> 
    417. 

  417.                     <span>&lt;i class=&quot;flaticon-vegetable&quot;&gt;&lt;/i&gt;</span>
    418. 

  418.                 </p>
    419. 

  419.             </div>
    420. 

  420.             
    421. 

  421.             <div class="image">
    422. 

  422.                 <p>
    423. 

  423.                     <i class="glyph-icon flaticon-fruit"></i> 
    424. 

  424.                     <span>&lt;i class=&quot;flaticon-fruit&quot;&gt;&lt;/i&gt;</span>
    425. 

  425.                 </p>
    426. 

  426.             </div>
    427. 

  427.             
    428. 

  428.             <div class="image">
    429. 

  429.                 <p>
    430. 

  430.                     <i class="glyph-icon flaticon-groceries"></i> 
    431. 

  431.                     <span>&lt;i class=&quot;flaticon-groceries&quot;&gt;&lt;/i&gt;</span>
    432. 

  432.                 </p>
    433. 

  433.             </div>
    434. 

  434.             
    435. 

  435.             <div class="image">
    436. 

  436.                 <p>
    437. 

  437.                     <i class="glyph-icon flaticon-bread"></i> 
    438. 

  438.                     <span>&lt;i class=&quot;flaticon-bread&quot;&gt;&lt;/i&gt;</span>
    439. 

  439.                 </p>
    440. 

  440.             </div>
    441. 

  441.                        
    442. 

  442.         </div>
    443. 

  443.                             
    444. 

  444.     </section>
    445. 

  445. 

  446. <div id="footer">
    447. 

  447.     <div>Generated by <a href="https://www.flaticon.com">flaticon.com</a>
    448. 

  448.     </div>
    449. 

  449. </div>
    450. 

  450. 

  451. 

  452. 

  453. </body>
    454. 

  454. </html>
    455.