blossom-svg-webfont-icons
Version:
Blossom's custom webfont icon set
687 lines (424 loc) • 15.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("../fonts/icons.eot?d7d3ad7aff203cafad44d6f14744c8f3");
src:url("../fonts/icons.eot?d7d3ad7aff203cafad44d6f14744c8f3#iefix") format("embedded-opentype"),
url("../fonts/icons.woff?d7d3ad7aff203cafad44d6f14744c8f3") format("woff"),
url("../fonts/icons.ttf?d7d3ad7aff203cafad44d6f14744c8f3") 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-amount:before {
content:"\f101";
}
.icon-application-form:before {
content:"\f102";
}
.icon-bank-transaction:before {
content:"\f103";
}
.icon-bank:before {
content:"\f104";
}
.icon-battery:before {
content:"\f105";
}
.icon-blossom-flower:before {
content:"\f106";
}
.icon-blossom-horizontal:before {
content:"\f107";
}
.icon-blossom-square:before {
content:"\f108";
}
.icon-briefcase-l:before {
content:"\f109";
}
.icon-briefcase:before {
content:"\f10a";
}
.icon-calendar:before {
content:"\f10b";
}
.icon-charity:before {
content:"\f10c";
}
.icon-construction:before {
content:"\f10d";
}
.icon-curved-arrow:before {
content:"\f10e";
}
.icon-down-arrow-outline:before {
content:"\f10f";
}
.icon-envelope:before {
content:"\f110";
}
.icon-extrnal-link:before {
content:"\f111";
}
.icon-fast:before {
content:"\f112";
}
.icon-financial-statement:before {
content:"\f113";
}
.icon-finish-flag:before {
content:"\f114";
}
.icon-globe:before {
content:"\f115";
}
.icon-good-people:before {
content:"\f116";
}
.icon-growth-graph:before {
content:"\f117";
}
.icon-growth-icon:before {
content:"\f118";
}
.icon-growth:before {
content:"\f119";
}
.icon-halal:before {
content:"\f11a";
}
.icon-hello-sign-logo:before {
content:"\f11b";
}
.icon-hijabi:before {
content:"\f11c";
}
.icon-house:before {
content:"\f11d";
}
.icon-identification:before {
content:"\f11e";
}
.icon-indonesia-national-monument:before {
content:"\f11f";
}
.icon-indonesia-underwriters:before {
content:"\f120";
}
.icon-indonesia1:before {
content:"\f121";
}
.icon-institution:before {
content:"\f122";
}
.icon-insurance:before {
content:"\f123";
}
.icon-invest-in-indonesia:before {
content:"\f124";
}
.icon-investment:before {
content:"\f125";
}
.icon-jakarta-people:before {
content:"\f126";
}
.icon-link-wallet:before {
content:"\f127";
}
.icon-locations:before {
content:"\f128";
}
.icon-lock-password:before {
content:"\f129";
}
.icon-mans-clothing:before {
content:"\f12a";
}
.icon-market-l:before {
content:"\f12b";
}
.icon-market:before {
content:"\f12c";
}
.icon-maximum:before {
content:"\f12d";
}
.icon-metamask:before {
content:"\f12e";
}
.icon-microfinance:before {
content:"\f12f";
}
.icon-min-icon:before {
content:"\f130";
}
.icon-minimum:before {
content:"\f131";
}
.icon-owner:before {
content:"\f132";
}
.icon-passport:before {
content:"\f133";
}
.icon-percentage-of-pie:before {
content:"\f134";
}
.icon-person-report:before {
content:"\f135";
}
.icon-personal-interview:before {
content:"\f136";
}
.icon-personal-story:before {
content:"\f137";
}
.icon-price-discount:before {
content:"\f138";
}
.icon-protect-family:before {
content:"\f139";
}
.icon-qr-code:before {
content:"\f13a";
}
.icon-rupiah:before {
content:"\f13b";
}
.icon-scales-of-justice:before {
content:"\f13c";
}
.icon-select-checkbox:before {
content:"\f13d";
}
.icon-settings-icon:before {
content:"\f13e";
}
.icon-settings-l:before {
content:"\f13f";
}
.icon-settings:before {
content:"\f140";
}
.icon-shake-hands:before {
content:"\f141";
}
.icon-sign:before {
content:"\f142";
}
.icon-signed:before {
content:"\f143";
}
.icon-social-uplift:before {
content:"\f144";
}
.icon-stable-exchange-rate:before {
content:"\f145";
}
.icon-stock-trading:before {
content:"\f146";
}
.icon-tax:before {
content:"\f147";
}
.icon-toggle-drawer:before {
content:"\f148";
}
.icon-tr-pend:before {
content:"\f149";
}
.icon-trading-bars:before {
content:"\f14a";
}
.icon-user:before {
content:"\f14b";
}
.icon-verify-convo:before {
content:"\f14c";
}
.icon-verify-questions:before {
content:"\f14d";
}
.icon-wallet-l:before {
content:"\f14e";
}
.icon-wallet-linked:before {
content:"\f14f";
}
.icon-wallet:before {
content:"\f150";
}
.icon-world-map:before {
content:"\f151";
}
</style>
</head>
<body>
<h1>icons</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="amount"><i class="icon icon-amount"></i> icon-amount</div>
<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="bank"><i class="icon icon-bank"></i> icon-bank</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="briefcase-l"><i class="icon icon-briefcase-l"></i> icon-briefcase-l</div>
<div class="icons__item" data-name="briefcase"><i class="icon icon-briefcase"></i> icon-briefcase</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="envelope"><i class="icon icon-envelope"></i> icon-envelope</div>
<div class="icons__item" data-name="extrnal-link"><i class="icon icon-extrnal-link"></i> icon-extrnal-link</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-icon"><i class="icon icon-growth-icon"></i> icon-growth-icon</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="hello-sign-logo"><i class="icon icon-hello-sign-logo"></i> icon-hello-sign-logo</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="indonesia1"><i class="icon icon-indonesia1"></i> icon-indonesia1</div>
<div class="icons__item" data-name="institution"><i class="icon icon-institution"></i> icon-institution</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="link-wallet"><i class="icon icon-link-wallet"></i> icon-link-wallet</div>
<div class="icons__item" data-name="locations"><i class="icon icon-locations"></i> icon-locations</div>
<div class="icons__item" data-name="lock-password"><i class="icon icon-lock-password"></i> icon-lock-password</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="market-l"><i class="icon icon-market-l"></i> icon-market-l</div>
<div class="icons__item" data-name="market"><i class="icon icon-market"></i> icon-market</div>
<div class="icons__item" data-name="maximum"><i class="icon icon-maximum"></i> icon-maximum</div>
<div class="icons__item" data-name="metamask"><i class="icon icon-metamask"></i> icon-metamask</div>
<div class="icons__item" data-name="microfinance"><i class="icon icon-microfinance"></i> icon-microfinance</div>
<div class="icons__item" data-name="min-icon"><i class="icon icon-min-icon"></i> icon-min-icon</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="passport"><i class="icon icon-passport"></i> icon-passport</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="qr-code"><i class="icon icon-qr-code"></i> icon-qr-code</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="settings-icon"><i class="icon icon-settings-icon"></i> icon-settings-icon</div>
<div class="icons__item" data-name="settings-l"><i class="icon icon-settings-l"></i> icon-settings-l</div>
<div class="icons__item" data-name="settings"><i class="icon icon-settings"></i> icon-settings</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="sign"><i class="icon icon-sign"></i> icon-sign</div>
<div class="icons__item" data-name="signed"><i class="icon icon-signed"></i> icon-signed</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="toggle-drawer"><i class="icon icon-toggle-drawer"></i> icon-toggle-drawer</div>
<div class="icons__item" data-name="tr-pend"><i class="icon icon-tr-pend"></i> icon-tr-pend</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="user"><i class="icon icon-user"></i> icon-user</div>
<div class="icons__item" data-name="verify-convo"><i class="icon icon-verify-convo"></i> icon-verify-convo</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="wallet-l"><i class="icon icon-wallet-l"></i> icon-wallet-l</div>
<div class="icons__item" data-name="wallet-linked"><i class="icon icon-wallet-linked"></i> icon-wallet-linked</div>
<div class="icons__item" data-name="wallet"><i class="icon icon-wallet"></i> icon-wallet</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>