blossom-svg-webfont-icons
Version:
Blossom's custom webfont icon set
470 lines (300 loc) • 10.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>icons</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:"icons";
src:url("icons.eot?663b79fbb38e018f13f25b172b3b0405");
src:url("icons.eot?663b79fbb38e018f13f25b172b3b0405#iefix") format("embedded-opentype"),
url("icons.woff?663b79fbb38e018f13f25b172b3b0405") format("woff"),
url("icons.ttf?663b79fbb38e018f13f25b172b3b0405") format("truetype");
font-weight:normal;
font-style:normal;
}
.icon {
font-family:"icons";
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 */
.icon-application-form:before {
content:"\f101";
}
.icon-bank-transaction:before {
content:"\f102";
}
.icon-battery:before {
content:"\f103";
}
.icon-blossom-flower:before {
content:"\f104";
}
.icon-blossom-horizontal:before {
content:"\f105";
}
.icon-blossom-square:before {
content:"\f106";
}
.icon-calendar:before {
content:"\f107";
}
.icon-charity:before {
content:"\f108";
}
.icon-construction:before {
content:"\f109";
}
.icon-curved-arrow:before {
content:"\f10a";
}
.icon-down-arrow-outline:before {
content:"\f10b";
}
.icon-fast:before {
content:"\f10c";
}
.icon-financial-statement:before {
content:"\f10d";
}
.icon-finish-flag:before {
content:"\f10e";
}
.icon-globe:before {
content:"\f10f";
}
.icon-good-people:before {
content:"\f110";
}
.icon-growth-graph:before {
content:"\f111";
}
.icon-growth:before {
content:"\f112";
}
.icon-halal:before {
content:"\f113";
}
.icon-hijabi:before {
content:"\f114";
}
.icon-house:before {
content:"\f115";
}
.icon-identification:before {
content:"\f116";
}
.icon-indonesia-national-monument:before {
content:"\f117";
}
.icon-indonesia-underwriters:before {
content:"\f118";
}
.icon-insurance:before {
content:"\f119";
}
.icon-invest-in-indonesia:before {
content:"\f11a";
}
.icon-investment:before {
content:"\f11b";
}
.icon-jakarta-people:before {
content:"\f11c";
}
.icon-locations:before {
content:"\f11d";
}
.icon-mans-clothing:before {
content:"\f11e";
}
.icon-maximum:before {
content:"\f11f";
}
.icon-minimum:before {
content:"\f120";
}
.icon-owner:before {
content:"\f121";
}
.icon-percentage-of-pie:before {
content:"\f122";
}
.icon-person-report:before {
content:"\f123";
}
.icon-personal-interview:before {
content:"\f124";
}
.icon-personal-story:before {
content:"\f125";
}
.icon-price-discount:before {
content:"\f126";
}
.icon-protect-family:before {
content:"\f127";
}
.icon-rupiah:before {
content:"\f128";
}
.icon-scales-of-justice:before {
content:"\f129";
}
.icon-select-checkbox:before {
content:"\f12a";
}
.icon-shake-hands:before {
content:"\f12b";
}
.icon-social-uplift:before {
content:"\f12c";
}
.icon-stable-exchange-rate:before {
content:"\f12d";
}
.icon-stock-trading:before {
content:"\f12e";
}
.icon-tax:before {
content:"\f12f";
}
.icon-trading-bars:before {
content:"\f130";
}
.icon-verify-questions:before {
content:"\f131";
}
.icon-world-map:before {
content:"\f132";
}
</style>
</head>
<body>
<h1>icons</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="application-form"><i class="icon icon-application-form"></i> icon-application-form</div>
<div class="icons__item" data-name="bank-transaction"><i class="icon icon-bank-transaction"></i> icon-bank-transaction</div>
<div class="icons__item" data-name="battery"><i class="icon icon-battery"></i> icon-battery</div>
<div class="icons__item" data-name="blossom-flower"><i class="icon icon-blossom-flower"></i> icon-blossom-flower</div>
<div class="icons__item" data-name="blossom-horizontal"><i class="icon icon-blossom-horizontal"></i> icon-blossom-horizontal</div>
<div class="icons__item" data-name="blossom-square"><i class="icon icon-blossom-square"></i> icon-blossom-square</div>
<div class="icons__item" data-name="calendar"><i class="icon icon-calendar"></i> icon-calendar</div>
<div class="icons__item" data-name="charity"><i class="icon icon-charity"></i> icon-charity</div>
<div class="icons__item" data-name="construction"><i class="icon icon-construction"></i> icon-construction</div>
<div class="icons__item" data-name="curved-arrow"><i class="icon icon-curved-arrow"></i> icon-curved-arrow</div>
<div class="icons__item" data-name="down-arrow-outline"><i class="icon icon-down-arrow-outline"></i> icon-down-arrow-outline</div>
<div class="icons__item" data-name="fast"><i class="icon icon-fast"></i> icon-fast</div>
<div class="icons__item" data-name="financial-statement"><i class="icon icon-financial-statement"></i> icon-financial-statement</div>
<div class="icons__item" data-name="finish-flag"><i class="icon icon-finish-flag"></i> icon-finish-flag</div>
<div class="icons__item" data-name="globe"><i class="icon icon-globe"></i> icon-globe</div>
<div class="icons__item" data-name="good-people"><i class="icon icon-good-people"></i> icon-good-people</div>
<div class="icons__item" data-name="growth-graph"><i class="icon icon-growth-graph"></i> icon-growth-graph</div>
<div class="icons__item" data-name="growth"><i class="icon icon-growth"></i> icon-growth</div>
<div class="icons__item" data-name="halal"><i class="icon icon-halal"></i> icon-halal</div>
<div class="icons__item" data-name="hijabi"><i class="icon icon-hijabi"></i> icon-hijabi</div>
<div class="icons__item" data-name="house"><i class="icon icon-house"></i> icon-house</div>
<div class="icons__item" data-name="identification"><i class="icon icon-identification"></i> icon-identification</div>
<div class="icons__item" data-name="indonesia-national-monument"><i class="icon icon-indonesia-national-monument"></i> icon-indonesia-national-monument</div>
<div class="icons__item" data-name="indonesia-underwriters"><i class="icon icon-indonesia-underwriters"></i> icon-indonesia-underwriters</div>
<div class="icons__item" data-name="insurance"><i class="icon icon-insurance"></i> icon-insurance</div>
<div class="icons__item" data-name="invest-in-indonesia"><i class="icon icon-invest-in-indonesia"></i> icon-invest-in-indonesia</div>
<div class="icons__item" data-name="investment"><i class="icon icon-investment"></i> icon-investment</div>
<div class="icons__item" data-name="jakarta-people"><i class="icon icon-jakarta-people"></i> icon-jakarta-people</div>
<div class="icons__item" data-name="locations"><i class="icon icon-locations"></i> icon-locations</div>
<div class="icons__item" data-name="mans-clothing"><i class="icon icon-mans-clothing"></i> icon-mans-clothing</div>
<div class="icons__item" data-name="maximum"><i class="icon icon-maximum"></i> icon-maximum</div>
<div class="icons__item" data-name="minimum"><i class="icon icon-minimum"></i> icon-minimum</div>
<div class="icons__item" data-name="owner"><i class="icon icon-owner"></i> icon-owner</div>
<div class="icons__item" data-name="percentage-of-pie"><i class="icon icon-percentage-of-pie"></i> icon-percentage-of-pie</div>
<div class="icons__item" data-name="person-report"><i class="icon icon-person-report"></i> icon-person-report</div>
<div class="icons__item" data-name="personal-interview"><i class="icon icon-personal-interview"></i> icon-personal-interview</div>
<div class="icons__item" data-name="personal-story"><i class="icon icon-personal-story"></i> icon-personal-story</div>
<div class="icons__item" data-name="price-discount"><i class="icon icon-price-discount"></i> icon-price-discount</div>
<div class="icons__item" data-name="protect-family"><i class="icon icon-protect-family"></i> icon-protect-family</div>
<div class="icons__item" data-name="rupiah"><i class="icon icon-rupiah"></i> icon-rupiah</div>
<div class="icons__item" data-name="scales-of-justice"><i class="icon icon-scales-of-justice"></i> icon-scales-of-justice</div>
<div class="icons__item" data-name="select-checkbox"><i class="icon icon-select-checkbox"></i> icon-select-checkbox</div>
<div class="icons__item" data-name="shake-hands"><i class="icon icon-shake-hands"></i> icon-shake-hands</div>
<div class="icons__item" data-name="social-uplift"><i class="icon icon-social-uplift"></i> icon-social-uplift</div>
<div class="icons__item" data-name="stable-exchange-rate"><i class="icon icon-stable-exchange-rate"></i> icon-stable-exchange-rate</div>
<div class="icons__item" data-name="stock-trading"><i class="icon icon-stock-trading"></i> icon-stock-trading</div>
<div class="icons__item" data-name="tax"><i class="icon icon-tax"></i> icon-tax</div>
<div class="icons__item" data-name="trading-bars"><i class="icon icon-trading-bars"></i> icon-trading-bars</div>
<div class="icons__item" data-name="verify-questions"><i class="icon icon-verify-questions"></i> icon-verify-questions</div>
<div class="icons__item" data-name="world-map"><i class="icon icon-world-map"></i> icon-world-map</div>
</div>
<h1>Usage</h1>
<pre><code><i class="icon icon-<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>