adding an image to css breadcrumbs

Question

I want to use these nice breadcrumbs jsfiddle.net/orihadar/bugvgbf5/ but I need to add image above each text, so each LI will include both an image and text under this image (both horizontally centered). Any attempt to do so destroy the nice look of these breadcrumbs. Any idea how can I do it?

Following is the 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;
}

you want to do it like this ? http://jsfiddle.net/bugvgbf5/3/ — , Jan 15 '15 at 22:48
it would help if you could add a picture of what you are trying to achieve or at least the image width/height you want in your breadcrumb — crazymatt, Jan 15 '15 at 22:51
I do not have enough reputation to upload an image. innovation you understood what I meant just that the icon should be above the text, not on it's left side. The image should be something like 35X35px. Thank you. — Ori, Jan 16 '15 at 06:58
I was able to update the JSFiddle to show what I need just need help with the triangles before and after. http://jsfiddle.net/orihadar/bugvgbf5/6/ — Ori, Jan 16 '15 at 07:16

score 0 · Answer 1 · answered Jan 15 '15 at 23:01

Something like this?

You need to be more clear on what you are trying to achieve here.

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>

adding an image to css breadcrumbs

1 Answers1