Adding image/icon before site's title/logo in nav-bar with Zurb's foundation 4
12,351
If you are going to use the pseudo elements to show an image, you need to set content
to ''
(empty string), manually set the width
and height
, and set the display
to either inline
or inline-block
.
Like this:
.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;
}
See a live demo here: http://plnkr.co/edit/ZeEBrfG2IchhqiNv5iWd?p=preview
Comments
-
karlingen almost 2 years
I'm using Foundation for a project and I'm trying to add a small icon right before "SITENAME" in the top left corner. I've tried this css:
.top-bar .name h1 a:before { background-image: url('images/logo.png'); background-size:18px 18px; background-repeat: no-repeat; }
but it doesn't seem to work. the image path is correct.
Here's the 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>
How can I add a simple icon/image without hacking into foundation.css?