Aggiunta di immagine/icona prima del titolo/logo del sito nella barra di navigazione con la base di Zurb 4

Question

Utilizzo Foundation per un progetto e sto tentando di aggiungere una piccola icona poco prima di "SITENAME" nell'angolo in alto a sinistra. Ho provato questo css:

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

} 

ma non sembra funzionare. il percorso dell'immagine è corretto.

Ecco il codice 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> 

Come posso aggiungere una semplice icona/immagine senza hacking in foundation.css?

Answer 1

Se si intende utilizzare gli elementi pseudo visualizzare un'immagine, è necessario impostare content a '' (stringa vuota), impostare manualmente il width e height, e impostare la display a uno o inlineinline-block.

Ti piace questa:

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

vedere una demo dal vivo qui: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview