Adding image/icon before site's title/logo in nav-bar with Zurb's foundation 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