Using Twitter Bootstrap glyphicons in CSS

css image twitter-bootstrap glyphicons
user1746582 picture user1746582 · Jan 9, 2013 · Viewed 61.9k times · Source

I would like to add a Twitter bootstrap glyphicon to replace the image reference in the CSS file below though not sure how.

.edit-button {
  background: url('../img/edit.png') no-repeat;
  width: 16px;
  height: 16px;
}

In HTML I would add it as follows:

<i class="icon-search icon-white"></i>

Any ideas?

update - tried the following though it only shows width and height in Firefox's firebug:

.edit-button
{
  /* background: url('../img/edit.png') no-repeat; */
  background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;
  width: 16px;
  height: 16px;
}

not sure why it's not being picked up ?

Answer

Nick picture Nick · Feb 26, 2014

I like using the :after or :before method...

HTML

<a href="http://glyphicons.com/" class="arrow">Click Here</a></div>

CSS

.arrow:after {
  font-family: "Glyphicons Halflings";
  content: "\e080";
}

This should work assuming you have the glyphicon fonts (they come free with Bootstrap)

Related questions

Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More
make images the same size in bootstrap grid

I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size. I …

Read More
Twitter Bootstrap: Carousel: Vertically Center Image in Definded height Viewport

I am attempting to find a way to verticially center an image inside of my viewport for the carousel. Currently the images are working fine and it is resizing the image to the size of the viewport on the width. …

Read More