icon, content is icon sign

dabblet.css

body {
	font-size: 1.6rem;
}

.container {
	width: 20%;
	display: table;
	margin-bottom: 1em;
}

.container span {
	display: table-cell;
	vertical-align: middle;
}

/* 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: top;
}

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

dabblet.html

<section class="container">
	<span class="icon"></span><span>Small icon small text</span> 
</section>

<section class="container">
	<span class="icon"></span><span>Small icon much moooooooooooooooooooore text</span> 
</section>

<section class="container">
	<span class="icon icon-size-xl"></span><span>Big icon small text</span> 
</section>

<section class="container">
	<span class="icon icon-size-xl"></span><span>Big icon much mooooooooooooooore terxt txtxlkjsadlk ajsdla ksjdalk dja text</span> 
</section>

dabblet.js

// alert('Hello world!');

settings.json

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