ACC SHELL
<!doctype HTML>
<html>
<head>
<title>Icons Preview!</title>
<meta charset="utf-8">
<style>
body {
background-image: linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(transparent 75%, #eee 75%), linear-gradient(transparent 75%, #eee 75%);
width: auto;
background-size: 10px 10px;
}
</style>
<script>
/*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
!function(){function e(e,n,t){"use strict";var o=window.document.createElement("link"),r=n||window.document.getElementsByTagName("script")[0],a=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)}();
grunticon(["icons.data.svg.css", "icons.data.png.css", "icons.fallback.css"], grunticon.svgLoadedCallback);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<h1>CUSTOM PREVIEW - you can change this in the previewTemplate option</h1>
<pre><code>.icon-address:</code></pre><div class="icon-address" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-burger:</code></pre><div class="icon-burger" style="width: 32px; height: 30px;" ></div><hr/>
<pre><code>.icon-download:</code></pre><div class="icon-download" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-email:</code></pre><div class="icon-email" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-facebook:</code></pre><div class="icon-facebook" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-instagram:</code></pre><div class="icon-instagram" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-marker:</code></pre><div class="icon-marker" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-phone:</code></pre><div class="icon-phone" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-twitter:</code></pre><div class="icon-twitter" style="width: 400px; height: 300px;" ></div><hr/>
<pre><code>.icon-youtube:</code></pre><div class="icon-youtube" style="width: 400px; height: 300px;" ></div><hr/>
<h2 id="embedded-svg-option">Embedded SVG option</h2>
<p>(The <code>data-grunticon-embed</code> attribute tells grunticon to inject SVG inline):</p>
<pre><code>icon-burger:</code></pre><div class="icon-burger" data-grunticon-embed style="width: px; height: px;" ></div><hr/>
<style>
.icon-burger {
width: 32px;
height: 30px;
display: inline-block;
}
.icon-burger.alt .cheese {
fill: red;
}
.icon-burger.alt .buns {
fill: orange;
}
.icon-burger.alt .burger {
fill: yellow;
}
.icon-burger.alt .lettuce {
fill: green;
}
</style>
<pre><code>icon-burger (styled variation):</code></pre><div class="icon-burger alt" data-grunticon-embed></div><hr/>
</body>
</html>
ACC SHELL 2018