forked from zaclys/searxng
dca3bcca9e
"npm run webfont" to build the fonts directory.
It requires fontforge and ttfautohint distro packages.
partial revert of commit 7137d2893f
268 lines
5.6 KiB
HTML
268 lines
5.6 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?31a1b735188db616a2142d17947e8a45");
|
|
src:url("ion.eot?31a1b735188db616a2142d17947e8a45#iefix") format("embedded-opentype"),
|
|
url("ion.woff2?31a1b735188db616a2142d17947e8a45") format("woff2"),
|
|
url("ion.woff?31a1b735188db616a2142d17947e8a45") format("woff"),
|
|
url("ion.ttf?31a1b735188db616a2142d17947e8a45") format("truetype"),
|
|
url("ion.svg?31a1b735188db616a2142d17947e8a45#ion") format("svg");
|
|
font-weight:normal;
|
|
font-style:normal;
|
|
}
|
|
|
|
.ion-icon {
|
|
|
|
font-family:"ion";
|
|
|
|
display:inline-block;
|
|
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>
|