css - 导航图标图像

Question

所以我想为我的站点导航使用一些图标图像。目前我正在使用 HTML5 Nav 标签执行以下操作

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

为了最佳实践，我不希望在 html 中包含图像，所以我想知道解决这个问题的正确方法是否是为每个链接提供一个伪类，例如；

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

然后给每个链接一个背景图片，比如；

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

Answer 1

你可以这样做:

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

像这样的CSS:

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
}