262 lines
5.5 KiB
HTML
262 lines
5.5 KiB
HTML
|
<!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?94af7082ea096aefe3a7b6642834716e");
|
||
|
|
src:url("ion.eot?#iefix") format("embedded-opentype"),
|
||
|
|
url("ion.woff2?94af7082ea096aefe3a7b6642834716e") format("woff2"),
|
||
|
|
url("ion.woff?94af7082ea096aefe3a7b6642834716e") format("woff"),
|
||
|
|
url("ion.ttf?94af7082ea096aefe3a7b6642834716e") format("truetype"),
|
||
|
|
url("ion.svg?94af7082ea096aefe3a7b6642834716e#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";
|
||
|
|
}
|
||
|
|
|
||
|
|
</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>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<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>
|