Dodawanie obrazu/ikony przed nazwą/logo witryny w nav-bar z fundacją Zurb 4

Question

Używam Fundacji do projektu i próbuję dodać małą ikonę tuż przed "SITENAME" w lewym górnym rogu. Próbowałem to CSS:

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

} 

ale nie wydają się działać. ścieżka obrazu jest prawidłowa.

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

Jak mogę dodać ikonę proste/obraz bez włamania do foundation.css?

Answer 1

Jeśli masz zamiar użyć elementów pseudo aby wyświetlić obrazek, trzeba ustawić content do '' (pusty ciąg znaków), należy ręcznie ustawić width i height i ustaw display albo inline lub inline-block.

Jak to:

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

Zobacz na żywo demo tutaj: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview