icon, content is icon sign

dabblet.css

body {
	font-size: 1.6rem;
}

.container {
	width: 20%;
	padding: 2%;
	float: left;
}

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

/* icon size */
.icon-size-m:before {
	font-size: 1.3rem;
	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,
.icon-with-text span {
	display: table-cell;
}

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

dabblet.html

<section class="container">
	<p>default vertical align</p>
	<p><span class="icon icon-with-text icon-size-m"><span class="icon-text">Small icon with text</span></span></p>
	<p><span class="icon icon-with-text icon-size-m"><span class="icon-text">Less text</span></span></p>
	<p><span class="icon icon-with-text icon-size-xl"><span class="icon-text">Big icon with text</span></span></p>
	<p><span class="icon icon-with-text icon-size-xl"><span class="icon-text">Less text</span></span></p>	
</section>
<section class="container">
	<p>vertical align: middle</p>
	<p><span class="icon icon-with-text icon-with-text-middle icon-size-m"><span class="icon-text">Small icon with text</span></span></p>
	<p><span class="icon icon-with-text icon-with-text-middle icon-size-m"><span class="icon-text">Less text</span></span></p>
	<p><span class="icon icon-with-text icon-with-text-middle icon-size-xl"><span class="icon-text">Big icon with text</span></span></p>
	<p><span class="icon icon-with-text icon-with-text-middle icon-size-xl"><span class="icon-text">Less text</span></span></p>	
</section>

dabblet.js

// alert('Hello world!');

settings.json

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