Hinzufügen von Bild/Symbol vor dem Titel/Logo der Website in der Navigationsleiste mit Zurbs Stiftung 4

Question

Ich benutze Foundation für ein Projekt und ich versuche, ein kleines Symbol direkt vor "SITENAME" in der oberen linken Ecke hinzuzufügen. Ich habe diese CSS versucht:

.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 Bildpfad ist korrekt.

Hier ist der 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> 

Wie kann ich ein einfaches Symbol/Bild hinzufügen, ohne foundation.css Hacking in?

Answer 1

Wenn Sie die Pseudo-Elemente verwenden werden, ein Bild zu zeigen, Sie content-'' (leere Zeichenkette) festlegen müssen, stellen Sie manuell die width und height, und stellen Sie die display entweder inline oder inline-block.

So:

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

Hier finden Sie eine Live-Demo hier: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview