icon

dabblet.css

body {
	font-size: 1.6rem;
}

.container {
	width: 10%;
}

/* icon */
.icon:before {
	display: block;
	background: yellow;
	content: ""
}

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

}

/* icon with text */
.icon-with-text {
	position: relative;
}

/* icon image is absolutely positioned inside icon wrapper */
.icon-with-text:before {
	position: absolute;
}

/* do not like the combined selector that much, alternative is to have .icon-with-text-size-m class... */
/* wrapper has margin to accomodate icon size */
.icon-with-text.icon-size-m {
	margin-left: 2.5rem;
	display: block;
}

/* pseudo elem with icon is moved to the margin area */
.icon-with-text.icon-size-m:before {
	left: -2.5rem;
	top: 0;
}

dabblet.html

<section class="container">
	<h1><span class="icon icon-with-text icon-size-m">How do you want to pay</span></h1>
	<h2 class="icon icon-with-text icon-size-m">How do you want to pay</h2>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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