Html 将主图像添加到面包屑导航

我试图在我的面包屑导航栏上获得一个小房子图标。与此类似：

有人能给我指出实现这一目标的正确方向吗

这是我的SCS：

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

下面是我的照片：

---

您需要在元素中添加一个图像，这几乎就是您在上面所做的

.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

，因此您无论如何都看不到它（假设它不是精灵）。您可以在中阅读更多信息。

您可以这样简化：

HTML

---

@Jatin谢谢。我已更新了我的问题。将其添加到，我们将为您解决@太棒了。我把它添加到我的问题中，效果很好，谢谢。有没有办法改变家庭图像的大小？或者一个我可以找到更免费使用的网站？我建议通过Illustrator作为一个向量来做，除非你不介意它模糊。在这种情况下，使用背景大小：0px 0px；这些参数是宽度和高度。

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

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