Question

So I’d like to use some icon images for my site navigation. Currently I’m doing the following using the HTML5 Nav tag

<nav>
    <a href="index.html"><img src="images/whatever.png"/></a>
    <a href="dash.html"><img src="images/whatever.png"/></a>
    </nav>

For best practices I’d prefer not to have images in the html so I’m wondering if the correct way around this would be to give each link a pseudo class like;

    <nav>
    <a class="home" href="index.html"></a>
    <a class ="dash" href="dash.html"></a>
    </nav>

And then give each link a background image like;

.home {
    background-image: url(../whatever.png);
}

Answer 1

You could do it like this:

<nav>
    <a class="home" href="index.html">Home</a>
    <a class="dash" href="dash.html">Dash</a>
</nav>

with the css like this:

nav a {
  display:inline-block; //so you can set width and height
  text-indent:-999em; //to hide the text
}
.home {
    background-image: url(../whatever.png);
    width: 100px; //image width
    height: 50px; /image height
}