將家庭圖像添加到breadcrumb nav

我正試圖在我的麪包屑導航欄上獲取一個小房子圖標。類似於： enter image description here 將家庭圖像添加到breadcrumb nav

任何人都可以指出我在正確的方向來實現這一目標嗎？

這裏是我的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>

這裏是我的樣子： enter image description here

HERE IS MY JSFIDDLE

來源

2014-03-04 MattCamp

@Jatin感謝。我已經更新了我的問題。 – MattCamp

將其添加到http://jsfiddle.net/，我們會爲你做！ – SamotnyPocitac

@SamotnyPocitac真棒。我將它添加到我的問題。 – MattCamp

您可以真正簡化，像這樣：

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

來源

2014-03-04 21:44:11 LOTUSMS

非常感謝。有沒有辦法改變家庭影像的大小？或者我可以找到更多免費使用的網站？ – MattCamp

我會建議通過Illustrator作爲矢量來做到這一點，除非你不介意它是模糊的。在這種情況下，使用background-size：0px 0px;這些參數是寬度和高度。 – LOTUSMS

你需要將圖像添加到元素 - 哪個y你幾乎在做以上！

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

更多，它看起來像你的home鍵是35px廣場和背景圖像設置爲顯示沿X軸-35px，所以你不會看到它反正（假設它不是一個精靈）。你可以在Mozilla Developer Network docs中閱讀更多關於它的內容。

來源

2014-03-04 21:24:39 technopeasant

將家庭圖像添加到breadcrumb nav

回答

相關問題