5

我正在将 Foundation 用于一个项目,并尝试在左上角的“SITENAME”之前添加一个小图标。我试过这个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>

如何在不入侵foundation.css的情况下添加简单的图标/图像?

4

1 回答 1

5

如果要使用伪元素来显示图像,则需要设置content''(空字符串),手动设置widthand height,并将 设置displayinlineor inline-block

像这样:

.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;
}

在此处查看现场演示:http: //plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd ?p=preview

于 2013-08-08T21:30:55.257 回答