Css 导航图标图像

所以我想用一些图标图片来导航我的网站。目前，我正在使用HTML5导航标签执行以下操作

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

---

你可以这样做：

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

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
}

---

您还可以使用精灵工作表保存文件大小和图像请求。（这在生成精灵图像时很有用）

因此，使用此代码：

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

---

其中

0 0

和

0-100

是精灵表中图像左上角的x和y坐标。

谢谢@内森，这是一个方便的精灵发生器工具。

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
}

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

nav a { 
  /* whatever positioning rules or floats you need for the links */
  height: 50px;
  width: 100px;
  text-indent: -9999px;
} 

.home { background: url(iconsprite.png) 0 0 no-repeat; }
.dash { background: url(iconsprite.png) 0 -100 no-repeat; }