Html 在站点前添加图像/图标'；导航栏中的s标题/徽标，带有Zurb'；S基金会4 我正在为一个项目使用基金会，我试图在左上角的“StInNeNe”之前添加一个小图标。 我试过这个css： .top-bar .name h1 a:before { background-image: url('images/logo.png'); background-size:18px 18px; background-repeat: no-repeat; }

但它似乎不起作用。图像路径是正确的

以下是html：

<nav class="top-bar" id="mainmenu">
    <ul class="title-area">
        <li class="name">
            <h1><a href="/site">SITENAME</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>
    <section class="top-bar-section">
    </section>
</nav>

---

我如何添加一个简单的图标/图像而不需要入侵到基础？CSS？

< P>如果你要使用伪元素来显示一个图像，你需要设置<代码>内容<代码> > <代码> >代码>（空字符串），手动设置<代码>宽度和<代码>高度< /代码>，并将

显示

设置为

内联

或

内联块

像这样：

.top-bar .name h1 a:before {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    position: relative;
    width: 18px;
}

请在此处观看现场演示：