<!doctype html> <html> <head> <meta charset="utf-8"> <title>ion</title> <style> body { margin:0; padding:10px 20px; background:#fff; color:#222; } h1, div, footer { font-family:"Helvetica Neue", Arial, sans-serif; } h1 { margin:0 0 20px; font-size:32px; font-weight:normal; } h1 small { font-size: 0.8em; padding-left: 2em; } .icons { margin-bottom:40px; -webkit-column-count:5; -moz-column-count:5; column-count:5; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; } .icons__item, .icons__item i { line-height:2em; cursor:pointer; overflow:hidden; } .icons__item:hover { color:#3c90be; } .icons__item i { display:inline-block; width:32px; text-align:center; } .icons__item:hover i { -webkit-transform:scale(1.5); transform:scale(1.5); } footer { margin-top:40px; font-size:14px; color:#999; } /* Generated by grunt-webfont */ @font-face { font-family:"ion"; src:url("ion.eot?ce7a0ead692560b4405a96d5b8471f51"); src:url("ion.eot?#iefix") format("embedded-opentype"), url("ion.woff2?ce7a0ead692560b4405a96d5b8471f51") format("woff2"), url("ion.woff?ce7a0ead692560b4405a96d5b8471f51") format("woff"), url("ion.ttf?ce7a0ead692560b4405a96d5b8471f51") format("truetype"), url("ion.svg?ce7a0ead692560b4405a96d5b8471f51#ion") format("svg"); font-weight:normal; font-style:normal; } .ion-icon { font-family:"ion"; display:inline-block; vertical-align:middle; line-height:1; font-weight:normal; font-style:normal; speak:none; text-decoration:inherit; text-transform:none; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Icons */ .ion-navicon-round:before { content:"\f101"; } .ion-search:before { content:"\f102"; } .ion-play:before { content:"\f103"; } .ion-link:before { content:"\f104"; } .ion-chevron-up:before { content:"\f105"; } .ion-chevron-left:before { content:"\f106"; } .ion-chevron-right:before { content:"\f107"; } .ion-arrow-down-a:before { content:"\f108"; } .ion-arrow-up-a:before { content:"\f109"; } .ion-arrow-swap:before { content:"\f10a"; } .ion-arrow-dropdown:before { content:"\f10b"; } .ion-globe:before { content:"\f10c"; } .ion-time:before { content:"\f10d"; } .ion-location:before { content:"\f10e"; } .ion-warning:before { content:"\f10f"; } .ion-error:before { content:"\f110"; } .ion-film-outline:before { content:"\f111"; } .ion-music-note:before { content:"\f112"; } .ion-more-vertical:before { content:"\f113"; } .ion-magnet:before { content:"\f114"; } .ion-close:before { content:"\f115"; } </style> </head> <body> <h1>ion</h1> <div class="icons" id="icons"> <div class="icons__item" data-name="navicon-round"><i class="ion-icon ion-navicon-round"></i> ion-navicon-round</div> <div class="icons__item" data-name="search"><i class="ion-icon ion-search"></i> ion-search</div> <div class="icons__item" data-name="play"><i class="ion-icon ion-play"></i> ion-play</div> <div class="icons__item" data-name="link"><i class="ion-icon ion-link"></i> ion-link</div> <div class="icons__item" data-name="chevron-up"><i class="ion-icon ion-chevron-up"></i> ion-chevron-up</div> <div class="icons__item" data-name="chevron-left"><i class="ion-icon ion-chevron-left"></i> ion-chevron-left</div> <div class="icons__item" data-name="chevron-right"><i class="ion-icon ion-chevron-right"></i> ion-chevron-right</div> <div class="icons__item" data-name="arrow-down-a"><i class="ion-icon ion-arrow-down-a"></i> ion-arrow-down-a</div> <div class="icons__item" data-name="arrow-up-a"><i class="ion-icon ion-arrow-up-a"></i> ion-arrow-up-a</div> <div class="icons__item" data-name="arrow-swap"><i class="ion-icon ion-arrow-swap"></i> ion-arrow-swap</div> <div class="icons__item" data-name="arrow-dropdown"><i class="ion-icon ion-arrow-dropdown"></i> ion-arrow-dropdown</div> <div class="icons__item" data-name="globe"><i class="ion-icon ion-globe"></i> ion-globe</div> <div class="icons__item" data-name="time"><i class="ion-icon ion-time"></i> ion-time</div> <div class="icons__item" data-name="location"><i class="ion-icon ion-location"></i> ion-location</div> <div class="icons__item" data-name="warning"><i class="ion-icon ion-warning"></i> ion-warning</div> <div class="icons__item" data-name="error"><i class="ion-icon ion-error"></i> ion-error</div> <div class="icons__item" data-name="film-outline"><i class="ion-icon ion-film-outline"></i> ion-film-outline</div> <div class="icons__item" data-name="music-note"><i class="ion-icon ion-music-note"></i> ion-music-note</div> <div class="icons__item" data-name="more-vertical"><i class="ion-icon ion-more-vertical"></i> ion-more-vertical</div> <div class="icons__item" data-name="magnet"><i class="ion-icon ion-magnet"></i> ion-magnet</div> <div class="icons__item" data-name="close"><i class="ion-icon ion-close"></i> ion-close</div> </div> <h1>Usage</h1> <pre><code><i class="ion-icon ion-<span id="name">name</span>"></i></code></pre> <footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer> <script> (function() { document.getElementById('icons').onclick = function(e) { e = e || window.event; var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name'); document.getElementById('name').innerHTML = name; } })(); </script> </body> </html>