Use the following CSS code if you want to use data attributes for inserting your icons

dabblet.css

@font-face {
	font-family: 'IcoMoon';
	src: url('http://benfrain.com/downloads/IcoMoon.eot');
	src: url('http://benfrain.com/downloads/IcoMoon.eot?#iefix') format('embedded-opentype'),
		url('http://benfrain.com/downloads/IcoMoon.svg#IcoMoon') format('svg'),
		url('http://benfrain.com/downloads/IcoMoon.woff') format('woff'),
		url('http://benfrain.com/downloads/IcoMoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'IcoMoon';
	content: attr(data-icon);
	speak: none;
}

/**
 * CSS Flexible Layout Module - flex property
 */
body {
	background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
	width: 100%;
	text-shadow: 2px 2px 0px #000;
}
header {
	
	color: white;
	font-size: 5em;
}
header ul { 
	display: flex; 
	flex-flow: row wrap;
	justify-content:space-around;
}
li {
	list-style: none;
	flex-item: 1 0 50px;
} 
	
aside {
	background-color: orange;
}
.mainContent {
	background-color: white;
}
.extraDiv {
	background-color: pink;

}
footer {
	background-color: green;

}

dabblet.html

<header role="banner">
	<ul>
		<li data-icon="f"></li>
		<li data-icon="t"></li>
		<li data-icon="i"></li>
		<li data-icon="u"></li>
		<li data-icon="g"></li>
	</ul
</header>

settings.json

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