Bootstrap Font Awesome analog with images

Question

Where I can find icons for Twitter Bootstrap 3 with images, not content in CSS?

For example:

We have:

.icon-ok:before {
  content: "\f00c";
}

I need:

.icon-ok:before {
  there image
}

Answer 1

I don't think anyone is distributing this work on github. So I think you will have to do it yourself. I Can suggest two approaches:

1: outlining the font awesome font in a software tool such as Photoshop, saving the icon as separate gifs then loading the gif in your css. This approach is fine as font awesome is distributed under apache licensing. You could use an free ware icon set, such as Brankic1979's 350 pixel icon set. Insert using the :before pseudo element:

h1:before 
{
  content:url(h1-icon.gif);
}

2: replacing the icons with pure css (using the ::before and ::after pseudo elements). The example below draws the common 'hamburger' menu item:

.icon_hamburger::before,
 .icon_hamburger::after {
   width: 1.625em;
   height: .313em;
   background: black;
}

.icon_hamburger::before {
  top: -.625em;
}

.icon_hamburger::after {
  bottom: -.625em;
}