Question

我正在使用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的情况下添加简单的图标/图像？

Answer 1

如果您要使用伪元素来显示图像，则需要将content设置为''（空字符串），手动设置width和{{1} }，并将height设置为display或inline。

像这样：

inline-block

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

使用Zurb的基础4在导航栏中添加站点标题/徽标之前的图像/图标

1 个答案: