CODEWITHSUNDEEP
csstwitter-bootstrap
onTheInternet
onTheInternet

Reputation: 7263

bootstrap icons not displaying

I downloaded the image for bootstraps icons and I would like to use them in a web page

I have the image, and the correct CSS

But they arent displaying anything at all.

CSS

.icon-home {
  background-image:url(../img/glyphicons-halflings.png);
  background-position: 0 -24px;
}

HTML

                        <div class="col">
                            <span class="icon-home"></span>
                            <p>Pittsburgh, PA 15276</p>
                        </div>

Fiddle

https://jsfiddle.net/jwct6rmk/

I uploaded the image to an imgur account.

Upvotes: 1

Views: 726

Answers (1)

Pierre
Pierre

Reputation: 19081

You'r missing some styling.. Mainly the display:block on the span element.

Try this:

.icon-home {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  background-position: 0 -24px;
  width: 12px;
  height: 12px;
  display:block;
}

or better:

.icon {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  width: 12px;
  height: 12px;
  display:block;
}

.icon-home {
  background-position: 0 -24px;
}

.icon-car {
  background-position: 0 -36px;
}

...

Upvotes: 2

Related Questions