Icons Preview! in Toolbar Themes 8

.toolbar-icon-admin-toolbar-tools-help:

.toolbar-icon-edit:

.toolbar-icon-entity-user-collection:

.toolbar-icon-escape-admin:

.toolbar-icon-help-main:

.toolbar-icon-help:

.toolbar-icon-home:

.toolbar-icon-link-toolbar-menu:

.toolbar-icon-menu:

.toolbar-icon-shortcut:

.toolbar-icon-system-admin-config:

.toolbar-icon-system-admin-content:

.toolbar-icon-system-admin-reports:

.toolbar-icon-system-admin-structure:

.toolbar-icon-system-modules-list:

.toolbar-icon-system-themes-page:

.toolbar-icon-toolbar-menu:

.toolbar-icon-user:

Embedded SVG option

(The data-grunticon-embed attribute tells grunticon to inject SVG inline):

icon-burger:

icon-burger (styled variation):

File

themes/base/grunticons/processed/preview.html

View source

<!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&&i.userAgent.indexOf("Chrome")===-1||i.userAgent.indexOf("Series40")!==-1),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(e){continue}r=[];for(var s=0;s<n.length;s++)null!==n[s].getAttribute(a)&&r.push(n[s]);if(r.length)for(s=0;s<r.length;s++)r[s].innerHTML=e[c],r[s].style.backgroundImage="none",r[s].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>.toolbar-icon-admin-toolbar-tools-help:</code></pre><div class="toolbar-icon-admin-toolbar-tools-help" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-edit:</code></pre><div class="toolbar-icon-edit" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-entity-user-collection:</code></pre><div class="toolbar-icon-entity-user-collection" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-escape-admin:</code></pre><div class="toolbar-icon-escape-admin" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-help-main:</code></pre><div class="toolbar-icon-help-main" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-help:</code></pre><div class="toolbar-icon-help" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-home:</code></pre><div class="toolbar-icon-home" style="width: 16px; height: 16px;" ></div><hr/>
			<pre><code>.toolbar-icon-link-toolbar-menu:</code></pre><div class="toolbar-icon-link-toolbar-menu" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-menu:</code></pre><div class="toolbar-icon-menu" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-shortcut:</code></pre><div class="toolbar-icon-shortcut" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-admin-config:</code></pre><div class="toolbar-icon-system-admin-config" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-admin-content:</code></pre><div class="toolbar-icon-system-admin-content" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-admin-reports:</code></pre><div class="toolbar-icon-system-admin-reports" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-admin-structure:</code></pre><div class="toolbar-icon-system-admin-structure" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-modules-list:</code></pre><div class="toolbar-icon-system-modules-list" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-system-themes-page:</code></pre><div class="toolbar-icon-system-themes-page" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-toolbar-menu:</code></pre><div class="toolbar-icon-toolbar-menu" style="width: 400px; height: 300px;" ></div><hr/>
			<pre><code>.toolbar-icon-user:</code></pre><div class="toolbar-icon-user" 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>

You are here

Icons Preview! in Toolbar Themes 8

Embedded SVG option

File

API Navigation