icon, content is icon sign

dabblet.css

body {
	font-size: 1.6rem;
}

.container {
	width: 15%;
}

/* icon, content is icon sign */
.icon:before {
	content: "§";
}

/* icon size */
.icon-size-m:before {
	font-size: 1.5rem;
	width: 2rem;
	height: 2rem;
}

.icon-size-xl:before {
	font-size: 4rem;
	width: 2rem;
	height: 2rem;
}

/* icon with text */
.icon-with-text {
	display: table;
}

/* icon image is just a table cell */
.icon-with-text:before {
	display: table-cell;
	vertical-align: baseline;
}

.icon-with-text-middle:before {
	vertical-align: middle;	
}

dabblet.html

<section class="container">
	<h1><span class="icon icon-with-text icon-size-m">Small icon big text</span></h1>
	<h2 class="icon icon-with-text icon-with-text-middle icon-size-m">Small icon big text valign middle</h2>
	<span class="icon icon-with-text icon-size-xl">Big icon big text valign middle</span>

</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}