jquery - 如何在导航栏右侧正确显示图像？

Question

我正在附上我的 fiddle 。当您查看它时，在右上角您会看到“帐户”和“注销”。我希望在 CSS 部分中有一个“关闭”图像，而不是“注销”文本。我该怎么做？

网址: https://jsfiddle.net/mikoo1991/pk6baz1z/1/embedded/result/

Answer 1

此处的其他答案解决了您忘记在 html 中添加 id 的问题。但是，我想指出，添加这样的背景图片并不是实现预期结果的最佳方式。

老实说，您最好使用 FontAwesome 这样的图标为此，这正是它们的用途:

只需将其添加到您的 head 标签中:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

或将其添加到您的 css 文件中:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

然后更新后的 html 将如下所示: <li><a href="#">Logout<i class="fa fa-power-off mar-l-10"></i>

---

这是你会得到的:

这是一个更新的 jsFiddle

我对您的 CSS 进行了一些调整，使其与图标一起看起来不错。另外，我改变了你的height:7%在标题上到 55px。恕我直言，为标题使用百分比是个坏主意，因为它会在移动设备上缩小太多，而且大多数标题都是固定高度，因此明确设置它通常是安全的。

如果您只想要图标，只需删除文本并根据需要调整填充/字体大小。