0

I am trying to use the default Bootstrap icons called Glyphicons to style one span with three overlapping icons, which will open many new possibilities in the sparse library of Bootstrap icons.

This jsfiddle is where I am at the moment, but I would love to use three icons in one html element, instead of just two, and I would rather not use images or sprites but utilize the already existing glyphicons.

Oh, and I am also trying to make the code CSS 2.1 for browser compatibility.

It seems to me that the following CSS part doesn't work, the content icon is only set when I use :before and :after 

.glyphicon-picture {
    content: "\e060";
}

What am I doing wrong? How would you modify this code to get three overlapping icons(trying to make a typical carousel icon, with one big in the middle, and two small partly behind on each side)?

lukasgeiter
  • 147,337
  • 26
  • 332
  • 270
turbopipp
  • 1,245
  • 2
  • 14
  • 27
  • 4
    The `content` property only works on :before and :after , not the element itself. – Jon Snow Nov 25 '14 at 11:39
  • @JonSnow: Thanks, I did not know this. @Paulie_D: Thanks for the link, I have been thinking about FA, and stacking icons might be easier there, instead of with Bootstrap. But as far as I could gather, I would still have to use 2 html elements (2x`span` or 2x`i`) for what I am currently only using 1 html element for. So I wouldn't exactly call it a duplicate. – turbopipp Nov 25 '14 at 12:44

0 Answers0