Question

I am trying to get a small house icon on my breadcrumb navigation bar. Similar to this: enter image description here

Can anyone point me in right direction to achieve this?

Here is my scss:

.breadcrumbs {
  @include grid-column(12);
  border: none;
  background-color: #D7D7D7; 
  padding: 0 0 0 10px;
  margin: 0 0 5px 0;
}
.homeButton {
  position: relative;
  padding: 50px;
}
.homeButton:before {
  content: "";
  width:35px;
  height:35px;
  background: url(#) -35px 0 no-repeat;
  position: absolute;
  left: 15px;
  right: 10px;
}

Here is my html:

<ul class="breadcrumbs">
        <li><a class="homeButton" href="#">Home</a></li>
        <li><a href="#">Email Templates</a></li>
    </ul>

Here is what mine looks like: enter image description here

HERE IS MY JSFIDDLE

Was it helpful?

Solution 2

You can really simplify that like this:

HTML

<ul class="breadcrumbs">
   <li><a href="#"></a></li>
   <li><a href="#">Email Templates</a></li>
</ul>

CSS

.breadcrumbs {
   border: none;
   background-color: #D7D7D7; 
   padding: 0 0 0 10px;
   margin: 0 0 5px 0;
   display:block;
 }
 .breadcrumbs > li{
   display:inline;   
   padding: 0px 40px;
   height:40px;
   line-height:25px;
   cursor:pointer;
 }
 .breadcrumbs > li:first-child{
   background: transparent url("http://compassionunited.com/wp-content/themes/ApplicationPro/images/home_icon.png") 0 0 no-repeat;
   position: absolute;
   left: 15px;
   right: 10px;
 }

DEMO

OTHER TIPS

You'll need to add an image to the element - which you're almost doing above!

.homeButton:before {
  content: "";
  width:35px;
  height:35px;
  // you're missing the house icon in the URL below
      background: url(#) -35px 0 no-repeat;
  // it should look something like so:
      background: url(../img/nameOfImage.jpg) 0 0 no-repeat;
  position: absolute;
  left: 15px;
  right: 10px;
}

More, it looks like your home button is 35px square and your background image is set to display -35px along the X axis, so you wouldn't see it anyway (assuming it's not a sprite). You can read more about it in the Mozilla Developer Network docs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top