FF 31.0 – FontAwesome CSS issue

WP version 3.9.2

Can’t provide url because the site is closed for development.

style.css – line 2919

#site-navigation ul li ul.sub-menu li a:before {
	font-family: 'FontAwesome';
	content: "\f054";
	font-size: 0.7em;
	position: absolute;
	left: 0;
	visibility: hidden;
	line-height: 2;
}

“content” is causing an issue where it’s not displaying the icon, instead a rectangle with the hex value of css “content” characters in it.

An identical issue is presented in font-awesome.css where that too references “content”.

.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}

Everything that’s referencing the FontAwesome “content” in FF 31.0 is displaying these strange characters and only the rectangle. IE and Chrome – no strange characters, only thr rectangles.

Still, those are not correct either. These icons are not being display like they are here: https://vpthemes.com/preview/Firmness/

Any idea what’s up with this and how to fix it?

Thanks