Thêm hình ảnh/biểu tượng trước tiêu đề/logo của trang web trong thanh điều hướng với nền tảng của Zurb 4

Question

Tôi đang sử dụng Nền tảng cho dự án và tôi đang cố gắng thêm một biểu tượng nhỏ ngay trước "SITENAME" ở góc trên cùng bên trái. Tôi đã thử css này:

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

} 

nhưng dường như không hoạt động. đường dẫn hình ảnh là chính xác.

Dưới đây là 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> 

Làm thế nào tôi có thể thêm một biểu tượng đơn giản/hình ảnh mà không cần hack vào foundation.css?

Answer 1

Nếu bạn đang sử dụng các yếu tố giả để hiển thị một hình ảnh, bạn cần phải thiết lập content-'' (chuỗi rỗng), tự đặt width và height, và thiết lập các display hoặc là inline hoặc inline-block.

Như thế này:

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

Xem trình diễn live ở đây: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview