Ajout d'image/icône avant le titre du site/logo en nav-bar avec de la fondation Zurb 4

Je suis à l'aide de la Fondation pour un projet et je suis en train d'ajouter une petite icône à droite avant de "NOM_SITE" dans le coin supérieur gauche.
J'ai essayé ce css:

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

}

mais il ne semble pas fonctionner. le chemin de l'image est correcte.

Voici le code 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>

Comment puis-je ajouter une simple icône/image sans pirater de la fondation.css?

OriginalL'auteur karlingen | 2013-08-01

  1. 5

    Si vous allez utiliser le pseudo d'éléments à afficher une image, vous devez définir content à '' (chaîne vide), réglez manuellement la width et height, et de définir la display soit inline ou inline-block.

    Comme ceci: 

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

    Voir une démo en live ici: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview

    Qui a fait le tour. Merci chris!

    OriginalL'auteur chris-l