Stack font awesome icons with openlayers

I'm using fontawesome 4.7 and openlayers 5.2 in my project and wanted to create the stacked icon effect.  Basically I want to have two font icons on top of each other.  My code example is using a red circle for the background and a black flag for the foreground.

My first codepen attempt worked out not so bad:
NOTE this is broken for openlayers versions 4.4.+ to 4.6.5:
OL BUG fix https://github.com/openlayers/openlayers/issues/7675

**CLICK RERUN**  bottom right inside codepen
if you cannot see a red circle with a flag

If you just want to see the javascript part I also created a github gist
CODE

	// using font awesome 5 free version
	var faFlagSolidStyle = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf024', // fas flag solid
	scale: 1,
	font: 'normal 18px FontAwesome',
	offsety: -30,
	offsetx: -10,
	fill: new ol.style.Fill({color: 'black'}),
	})
	})
	var faCircleSolidStyle = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf111', // fas circle
	scale: 2,
	font: 'normal 18px FontAwesome',
	offsety: -30,
	offsetx: -10,
	fill: new ol.style.Fill({color: 'red'})
	})
	})
	var somePointFeature = new ol.geom.Point([14.3443, 46.23432])
	var officeMarker = new ol.Feature({
	geometry: somePointFeature
	})
	officeMarker.setStyle([faCircleSolidStyle,faFlagSolidStyle])

view raw openlayers_stacked_style.js hosted with ❤ by GitHub