Answer 1

If you want preserve the semantic signification of your page structure, you need to use semantic tags corresponding / describing the content.
There is an <img> tag designed for display image elements, so you must prefer use it than other container ( ie: browsers for blind people can then say to user there's an image and describe it with the 'alt' attribute content ). And this tag has a special attribute designed to receive the url of the content to display, so you should prefer use it than set the image as a background via css rules ;)

Answer 2

What do you call 'icons'?
If this is the file format 'ico', this is not possible ( inside the page, cross-browser, but as favicon the 'ico' format is recognized );
If this is a picture jpg, gif, png or svg, basically with background-image property ( and 'url()' format ), but 'ico' probably not supported: you should try ^^

Answer 3

So, you just need the <img> tag, and set the url of the image in the 'src' ( source ) attribute, like that:

<img src=''url/image.ext" alt="">

( see documentation for more explains )
You can use css to display an image background on an element, but this is not the correct way to do for images elements ( while not particular case )...

Answer 4

There are multiple ways. For example:

(HTML)

<div class="awesome">CSS is awesome</div>

(CSS)

.awesome::after {content:url(http://someurl.com/someicon.png) }