Grumpicon demo

Developer
Massimo Cassandro
Size
3,038 Kb
Views
18,216
  1. Grumpicon demo Previews
  2. Grumpicon demo HTML Codes
  3. Grumpicon demo CSS Codes

How do I make an grumpicon demo?

What is a grumpicon demo? How do you make a grumpicon demo? This script and codes were developed by Massimo Cassandro on 09 November 2022, Wednesday.

Grumpicon demo Previews
IQ Test

Grumpicon demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grumpicon demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Grumpicon Demo (without fallback)</h1>
<p>Original code from <a href="http://www.grumpicon.com">www.grumpicon.com</a></p>
<div class="demo">	<div class="icon-umbrella"></div>	<code>.icon-umbrella</code>
</div>
<div class="demo">	<div class="icon-circle-check"></div>	<code>.icon-circle-check</code>
</div>
<div class="demo">	<div class="icon-circle-erase"></div>	<code>.icon-circle-erase</code>
</div>
<div class="demo">	<div class="icon-lighting"></div>	<code>.icon-lighting</code>
</div>
</body>
</html>

Grumpicon demo - Script Codes CSS Codes

.icon-umbrella {	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Livello_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%22280%20832%2064%2064%22%20enable-background%3D%22new%20280%20832%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M312%2C832c-17.6%2C0-32%2C14.4-32%2C32c0%2C2.2%2C1.8%2C4%2C4%2C4h24v15.3c0%2C7%2C5.7%2C12.7%2C12.7%2C12.7s12.7-5.7%2C12.7-12.7c0-2.2-1.8-4-4-4%0D%0A%09%09s-4%2C1.8-4%2C4c0%2C2.6-2.1%2C4.7-4.7%2C4.7s-4.7-2.1-4.7-4.7V868h24c0%2C0%2C0%2C0%2C0%2C0c2.2%2C0%2C4-1.8%2C4-4c0-0.1%2C0-0.3%2C0-0.4%0D%0A%09%09C343.8%2C846.1%2C329.5%2C832%2C312%2C832z%20M288.3%2C860c1.9-11.3%2C11.8-20%2C23.7-20s21.8%2C8.7%2C23.7%2C20H288.3z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A');	background-repeat: no-repeat;
}
.icon-circle-check {	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Livello_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%22200%20752%2064%2064%22%20enable-background%3D%22new%20200%20752%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M232%2C752c-17.6%2C0-32%2C14.4-32%2C32s14.4%2C32%2C32%2C32s32-14.4%2C32-32S249.6%2C752%2C232%2C752z%20M232%2C808c-13.2%2C0-24-10.8-24-24%0D%0A%09%09s10.8-24%2C24-24s24%2C10.8%2C24%2C24S245.2%2C808%2C232%2C808z%22/%3E%0D%0A%09%3Cpath%20d%3D%22M241%2C772.6l-15.3%2C15.3l-4.1-8c-1-2-3.4-2.7-5.4-1.7c-2%2C1-2.7%2C3.4-1.7%2C5.4l6.6%2C12.9c0.6%2C1.1%2C1.7%2C1.9%2C2.9%2C2.1%0D%0A%09%09c0.2%2C0%2C0.4%2C0%2C0.6%2C0c1.1%2C0%2C2.1-0.4%2C2.8-1.2l19.2-19.2c1.6-1.6%2C1.6-4.1%2C0-5.7C245.1%2C771.1%2C242.6%2C771.1%2C241%2C772.6z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A');	background-repeat: no-repeat;
}
.icon-circle-erase {	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Livello_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%22280%20752%2064%2064%22%20enable-background%3D%22new%20280%20752%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M312%2C816C312%2C816%2C312%2C816%2C312%2C816c8.6%2C0%2C16.6-3.3%2C22.7-9.4s9.4-14.1%2C9.3-22.6c0-17.6-14.4-32-32-32%0D%0A%09%09c-8.5%2C0-16.6%2C3.3-22.6%2C9.4S280%2C775.5%2C280%2C784C280%2C801.7%2C294.4%2C816%2C312%2C816z%20M295%2C767c4.5-4.5%2C10.6-7%2C17-7c13.2%2C0%2C24%2C10.8%2C24%2C24%0D%0A%09%09c0%2C6.4-2.5%2C12.4-7%2C17c-4.5%2C4.5-10.6%2C7-17%2C7l0%2C4v-4c-13.2%2C0-24-10.8-24-24C288%2C777.6%2C290.5%2C771.6%2C295%2C767z%22/%3E%0D%0A%09%3Cpath%20d%3D%22M306.3%2C784l-7.8%2C7.8c-1.6%2C1.6-1.6%2C4.1%2C0%2C5.7c0.8%2C0.8%2C1.8%2C1.2%2C2.8%2C1.2c1%2C0%2C2.1-0.4%2C2.8-1.2l7.8-7.8l7.8%2C7.8%0D%0A%09%09c0.8%2C0.8%2C1.8%2C1.2%2C2.8%2C1.2c1%2C0%2C2.1-0.4%2C2.8-1.2c1.6-1.6%2C1.6-4.1%2C0-5.7l-7.8-7.8l7.8-7.8c1.6-1.6%2C1.6-4.1%2C0-5.7%0D%0A%09%09c-1.6-1.6-4.1-1.6-5.7%2C0l-7.8%2C7.8l-7.8-7.8c-1.6-1.6-4.1-1.6-5.7%2C0c-1.6%2C1.6-1.6%2C4.1%2C0%2C5.7L306.3%2C784z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A');	background-repeat: no-repeat;
}
.icon-lighting {	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Livello_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%22360%20832%2064%2064%22%20enable-background%3D%22new%20360%20832%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M398.2%2C885c-0.7%2C2.1%2C0.4%2C4.4%2C2.5%2C5.1l16.3%2C5.7c0.4%2C0.1%2C0.9%2C0.2%2C1.3%2C0.2c0.8%2C0%2C1.5-0.2%2C2.2-0.6c1-0.7%2C1.7-1.8%2C1.8-3%0D%0A%09%09l1.8-18.7c0.2-2.2-1.4-4.1-3.6-4.4c-2.2-0.2-4.1%2C1.4-4.4%2C3.6l-0.5%2C5.4c-9.8-18.6-20.9-39.6-21.7-41.2c-0.7-1.7-2.5-2.6-4.3-2.3%0D%0A%09%09c-3.1%2C0.5-3.3%2C3.4-3.5%2C5.3c-0.1%2C1.1-0.2%2C2.6-0.3%2C4.4c-0.2%2C3.6-0.5%2C8.3-0.7%2C13.1c-0.1%2C1.8-0.2%2C3.9-0.3%2C6c-5-8.6-11.9-20.4-17.2-29.5%0D%0A%09%09c-1.1-1.9-3.6-2.6-5.5-1.5c-1.9%2C1.1-2.6%2C3.6-1.5%2C5.5c0%2C0%2C6%2C10.3%2C11.9%2C20.5c3%2C5.1%2C6%2C10.3%2C8.2%2C14.1c1.1%2C1.9%2C2.1%2C3.5%2C2.8%2C4.7%0D%0A%09%09c1.3%2C2.2%2C2.6%2C4.4%2C5.6%2C3.6c1.7-0.5%2C2.9-2%2C3-3.8c0.1-1.3%2C0.7-13.6%2C1.2-23.9c3.5%2C6.6%2C8.7%2C16.6%2C16.7%2C31.7l-6.6-2.3%0D%0A%09%09C401.2%2C881.8%2C398.9%2C882.9%2C398.2%2C885z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A');	background-repeat: no-repeat;
}
.demo {	float:left;	margin:.5em;
}
[class^="icon-"] {	width:100px;	height: 100px;	margin:0 auto;	background-color: #b6f25b;
}
code {	font-size: 80%;
}
Grumpicon demo - Script Codes
Grumpicon demo - Script Codes
Home Page Home
Developer Massimo Cassandro
Username massimo-cassandro
Uploaded November 09, 2022
Rating 3
Size 3,038 Kb
Views 18,216
Do you need developer help for Grumpicon demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Massimo Cassandro (massimo-cassandro) Script Codes
Name
SVG symbols demo
Nested table email layout
Colspan auto
JQuery UI Datepicker
JQuery UI Autocomplete for Bootstrap
Checkbox with SVG icon
Google maps circle method
SVG dinamyc chart
CSS sprites example
SVG example
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!