logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

ion.html (5772B)


  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ion</title>
  6. <style>
  7. body {
  8. margin:0;
  9. padding:10px 20px;
  10. background:#fff;
  11. color:#222;
  12. }
  13. h1, div, footer {
  14. font-family:"Helvetica Neue", Arial, sans-serif;
  15. }
  16. h1 {
  17. margin:0 0 20px;
  18. font-size:32px;
  19. font-weight:normal;
  20. }
  21. h1 small {
  22. font-size: 0.8em;
  23. padding-left: 2em;
  24. }
  25. .icons {
  26. margin-bottom:40px;
  27. -webkit-column-count:5;
  28. -moz-column-count:5;
  29. column-count:5;
  30. -webkit-column-gap:20px;
  31. -moz-column-gap:20px;
  32. column-gap:20px;
  33. }
  34. .icons__item,
  35. .icons__item i {
  36. line-height:2em;
  37. cursor:pointer;
  38. overflow:hidden;
  39. }
  40. .icons__item:hover {
  41. color:#3c90be;
  42. }
  43. .icons__item i {
  44. display:inline-block;
  45. width:32px;
  46. text-align:center;
  47. }
  48. .icons__item:hover i {
  49. -webkit-transform:scale(1.5);
  50. transform:scale(1.5);
  51. }
  52. footer {
  53. margin-top:40px;
  54. font-size:14px;
  55. color:#999;
  56. }
  57. /* Generated by grunt-webfont */
  58. @font-face {
  59. font-family:"ion";
  60. src:url("ion.eot?ce7a0ead692560b4405a96d5b8471f51");
  61. src:url("ion.eot?#iefix") format("embedded-opentype"),
  62. url("ion.woff2?ce7a0ead692560b4405a96d5b8471f51") format("woff2"),
  63. url("ion.woff?ce7a0ead692560b4405a96d5b8471f51") format("woff"),
  64. url("ion.ttf?ce7a0ead692560b4405a96d5b8471f51") format("truetype"),
  65. url("ion.svg?ce7a0ead692560b4405a96d5b8471f51#ion") format("svg");
  66. font-weight:normal;
  67. font-style:normal;
  68. }
  69. .ion-icon {
  70. font-family:"ion";
  71. display:inline-block;
  72. vertical-align:middle;
  73. line-height:1;
  74. font-weight:normal;
  75. font-style:normal;
  76. speak:none;
  77. text-decoration:inherit;
  78. text-transform:none;
  79. text-rendering:auto;
  80. -webkit-font-smoothing:antialiased;
  81. -moz-osx-font-smoothing:grayscale;
  82. }
  83. /* Icons */
  84. .ion-navicon-round:before {
  85. content:"\f101";
  86. }
  87. .ion-search:before {
  88. content:"\f102";
  89. }
  90. .ion-play:before {
  91. content:"\f103";
  92. }
  93. .ion-link:before {
  94. content:"\f104";
  95. }
  96. .ion-chevron-up:before {
  97. content:"\f105";
  98. }
  99. .ion-chevron-left:before {
  100. content:"\f106";
  101. }
  102. .ion-chevron-right:before {
  103. content:"\f107";
  104. }
  105. .ion-arrow-down-a:before {
  106. content:"\f108";
  107. }
  108. .ion-arrow-up-a:before {
  109. content:"\f109";
  110. }
  111. .ion-arrow-swap:before {
  112. content:"\f10a";
  113. }
  114. .ion-arrow-dropdown:before {
  115. content:"\f10b";
  116. }
  117. .ion-globe:before {
  118. content:"\f10c";
  119. }
  120. .ion-time:before {
  121. content:"\f10d";
  122. }
  123. .ion-location:before {
  124. content:"\f10e";
  125. }
  126. .ion-warning:before {
  127. content:"\f10f";
  128. }
  129. .ion-error:before {
  130. content:"\f110";
  131. }
  132. .ion-film-outline:before {
  133. content:"\f111";
  134. }
  135. .ion-music-note:before {
  136. content:"\f112";
  137. }
  138. .ion-more-vertical:before {
  139. content:"\f113";
  140. }
  141. .ion-magnet:before {
  142. content:"\f114";
  143. }
  144. .ion-close:before {
  145. content:"\f115";
  146. }
  147. </style>
  148. </head>
  149. <body>
  150. <h1>ion</h1>
  151. <div class="icons" id="icons">
  152. <div class="icons__item" data-name="navicon-round"><i class="ion-icon ion-navicon-round"></i> ion-navicon-round</div>
  153. <div class="icons__item" data-name="search"><i class="ion-icon ion-search"></i> ion-search</div>
  154. <div class="icons__item" data-name="play"><i class="ion-icon ion-play"></i> ion-play</div>
  155. <div class="icons__item" data-name="link"><i class="ion-icon ion-link"></i> ion-link</div>
  156. <div class="icons__item" data-name="chevron-up"><i class="ion-icon ion-chevron-up"></i> ion-chevron-up</div>
  157. <div class="icons__item" data-name="chevron-left"><i class="ion-icon ion-chevron-left"></i> ion-chevron-left</div>
  158. <div class="icons__item" data-name="chevron-right"><i class="ion-icon ion-chevron-right"></i> ion-chevron-right</div>
  159. <div class="icons__item" data-name="arrow-down-a"><i class="ion-icon ion-arrow-down-a"></i> ion-arrow-down-a</div>
  160. <div class="icons__item" data-name="arrow-up-a"><i class="ion-icon ion-arrow-up-a"></i> ion-arrow-up-a</div>
  161. <div class="icons__item" data-name="arrow-swap"><i class="ion-icon ion-arrow-swap"></i> ion-arrow-swap</div>
  162. <div class="icons__item" data-name="arrow-dropdown"><i class="ion-icon ion-arrow-dropdown"></i> ion-arrow-dropdown</div>
  163. <div class="icons__item" data-name="globe"><i class="ion-icon ion-globe"></i> ion-globe</div>
  164. <div class="icons__item" data-name="time"><i class="ion-icon ion-time"></i> ion-time</div>
  165. <div class="icons__item" data-name="location"><i class="ion-icon ion-location"></i> ion-location</div>
  166. <div class="icons__item" data-name="warning"><i class="ion-icon ion-warning"></i> ion-warning</div>
  167. <div class="icons__item" data-name="error"><i class="ion-icon ion-error"></i> ion-error</div>
  168. <div class="icons__item" data-name="film-outline"><i class="ion-icon ion-film-outline"></i> ion-film-outline</div>
  169. <div class="icons__item" data-name="music-note"><i class="ion-icon ion-music-note"></i> ion-music-note</div>
  170. <div class="icons__item" data-name="more-vertical"><i class="ion-icon ion-more-vertical"></i> ion-more-vertical</div>
  171. <div class="icons__item" data-name="magnet"><i class="ion-icon ion-magnet"></i> ion-magnet</div>
  172. <div class="icons__item" data-name="close"><i class="ion-icon ion-close"></i> ion-close</div>
  173. </div>
  174. <h1>Usage</h1>
  175. <pre><code>&lt;i class=&quot;ion-icon ion-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
  176. <footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
  177. <script>
  178. (function() {
  179. document.getElementById('icons').onclick = function(e) {
  180. e = e || window.event;
  181. var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
  182. document.getElementById('name').innerHTML = name;
  183. }
  184. })();
  185. </script>
  186. </body>
  187. </html>