添加圖像CSS麪包屑

-1

我想用這些漂亮的麪包屑jsfiddle.net/orihadar/bugvgbf5/但我需要添加的每個上面的文字圖像，所以每個李將包括該圖像下的圖像和文字（包括水平居中）。任何試圖這樣做都會破壞這些麪包屑的美麗外觀。任何想法我該怎麼做？添加圖像CSS麪包屑

以下是CSS：

ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#breadcrumbs-two{ 
    overflow: hidden; 
    width: 100%; 
} 

#breadcrumbs-two li{ 
    float: left; 
    margin: 0 .5em 0 1em; 
} 

#breadcrumbs-two a{ 
    background: #ddd; 
    padding: .5em 1em; 
    float: left; 
    text-decoration: none; 
    color: #444; 
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    position: relative; 
} 

#breadcrumbs-two a:hover{ 
    background: #99db76; 
} 

#breadcrumbs-two a::before{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-width: 1.5em 0 1.5em 1em; 
    border-style: solid; 
    border-color: #ddd #ddd #ddd transparent; 
    left: -1em; 
} 

#breadcrumbs-two a:hover::before{ 
    border-color: #99db76 #99db76 #99db76 transparent; 
} 

#breadcrumbs-two a::after{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-top: 1.5em solid transparent; 
    border-bottom: 1.5em solid transparent; 
    border-left: 1em solid #ddd; 
    right: -1em; 
} 

#breadcrumbs-two a:hover::after{ 
    border-left-color: #99db76; 
} 

#breadcrumbs-two .current, 
#breadcrumbs-two .current:hover{ 
    font-weight: bold; 
    background: none; 
} 

#breadcrumbs-two .current::after, 
#breadcrumbs-two .current::before{ 
    content: normal; 
}

來源

2015-01-15 user2299401

？ http://jsfiddle.net/bugvgbf5/3/ – innovation

它會幫助，如果你可以添加你想要實現的圖片或至少在你的麪包屑痕跡圖像的寬度/高度 – crazymatt

我沒有足夠的信譽來上傳圖片。創新你明白我的意思只是圖標應該在文本上方，而不是在左側。圖像應該是35X35像。謝謝。 – user2299401

像這樣的事情？

你需要更清楚你想要在這裏實現什麼。

http://jsfiddle.net/bugvgbf5/4/

<ul id="breadcrumbs-two"> 


<li> 
    <a> 
    <img src="https://www.gravatar.com/avatar/0dadd597898bbd33e37fe684fa07aa2d?s=24&d=identicon&r=PG"/> 

     <br/> 
    bkbgbhighb 
    </a> 
</li>

你想要做這樣

來源

2015-01-15 23:01:01 blairmeister

添加圖像CSS麪包屑

回答

相關問題