Add svg icon before main menu items

Hello

I’ve been looking at many posts and trying to make this work without bothering you and I think I’m close but can’t get it right.

I have been able to add a nice icon to the left as a default and am using just one page to test adding an image instead. For some reason if I remove the ‘conent’ settings the image also disappears. It seems that perhaps the background image needs something in content ot work. I have moved the psecific page icons over otherwise they all appear in the same place as the default for all pages. My code –

#avia-menu  > li {
	padding:0 10px 0 10px;
}

/* all main menu items */
#avia-menu  > li > a .avia-menu-text:before {
	/* right arrow */
	content:'\E897';
	font-family: 'entypo-fontello';
	font-size: 20px;
	position: absolute;
	left: 0px;
}

/* building page */
#menu-item-305 > a::before {
	content:'\E824';
	font-family: 'entypo-fontello';
	font-size: 20px;
	position: absolute;
	left: -50px;
	opacity: #fff;
    background-image: url(/images/arrowRightGold.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%; 		
}

What I’m trying to do is have the just the gold image of the right arrow show up to the left of the text, and without the lock icon for the building page as a test it just disappears. I’ve tried a min-width and a few other options but as soon as I remove the ‘content’ element the background image also disappears. Please advise and thank you in advance :)