Is there a way to display an icon image before text without using HTML tags like <img> that may interfere with our JavaScript code if the structure of the HTML changes?
I came up with the following code which successfully displays the icon on IE8 and Firefox:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
However, when attempting to print the web page in IE8, the image disappears. Any suggestions on how to make sure the image is visible even when printing in IE8, or should I consider adding an HTML tag for the image?