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

Question

I'm using Foundation for a project and I'm trying to add a small icon right before "SITENAME" in the top left corner. I've tried this css:

.top-bar .name h1 a:before {
    background-image: url('images/logo.png');
    background-size:18px 18px;
    background-repeat: no-repeat;

}

but it doesn't seem to work. the image path is correct.

Here's the 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>

How can I add a simple icon/image without hacking into foundation.css?

Answer 1

If you are going to use the pseudo elements to show an image, you need to set content to '' (empty string), manually set the width and height , and set the display to either inline or inline-block .

Like this:

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

See a live demo here: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview