Using an image in a H1 logo as a letter

HTML & CSS
2

I would do something like this.


<span class="wow"><i class="cliphide">WoW</i><img src="images/lettero.gif" width="55" height="55" alt="WoW"></span>

.wow {
	font-family: museo-slab, serif;
	color: #fff;
	display: block;
	font-size: 55px;
	line-height: 55px;
	font-weight: 900;
	margin-top: -5px;
	position:relative;
}
.cliphide {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	z-index:-1;
	pointer-events:none;
}
.wow:before, .wow:after {
	content:"W";
	display:inline-block;
	vertical-align:middle;
}
.wow img {
	display:inline-block;
	vertical-align:middle;
}