将主页图像添加到breadcrumb nav

Question

我想在我的痕迹导航栏上找到一个小房子图标。与此类似：

有人能指出我正确的方向来实现这个目标吗？

这是我的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;
}

这是我的HTML：

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

这是我的样子：

HERE IS MY JSFIDDLE

Answer 1

你需要在元素上添加一个图像 - 你几乎在上面做了！

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

更多，看起来您的主页按钮为35px方形，并且您的背景图像设置为沿X轴显示-35px，因此您无论如何都不会看到它（假设它不是精灵） ）。您可以在Mozilla Developer Network docs。

中详细了解相关信息

Answer 2

你真的可以这样简化：

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