Hinzufügen von Bild/icon vor Ort Titel/logo in der nav-bar mit Zurb foundation 4

Ich bin mit der Foundation für ein Projekt und ich werde versuchen, fügen Sie eine kleine Symbol direkt vor "SITENAME" in der oberen linken Ecke.
Ich habe versucht das css:

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

}

aber es scheint nicht zu funktionieren. der image-Pfad korrekt ist.

Hier die html-Ausgabe:

<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>

Wie kann ich ein icon/Bild ohne hacken in die Stiftung.css?

InformationsquelleAutor karlingen | 2013-08-01

  1. 5

    Wenn Sie gehen, um die pseudo-Elemente zu zeigen, ein Bild, müssen Sie content zu '' (leerer string), legen Sie manuell den width und height, und legen Sie die display entweder inline oder inline-block.

    Wie diese: 

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

    Siehe eine live-demo hier: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview

    Das war der trick. Danke chris!

    InformationsquelleAutor chris-l

Schreibe einen Kommentar