Using Twitter Bootstrap glyphicons in CSS

Question

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 ?

It works on my machine. Make sure the path is correct

Tepken Vannkorn
– Tepken Vannkorn

2013-01-09 16:49:04 +00:00
Commented Jan 9, 2013 at 16:49 — Tepken Vannkorn
– Tepken Vannkorn, Commented Jan 9, 2013 at 16:49

Nick · Accepted Answer · 2014-02-26 16:27:48Z

109

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)

answered Feb 26, 2014 at 16:27

Nick

1,0991 gold badge7 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

counterbeing Over a year ago

To get the character code you can open up the Bootstrap docs with the glyphicons in your browser and inspect it with developer tools.

aesede Over a year ago

Here's a cheatsheet with all Glyphicon entities (for the content: "" part):

aesede Over a year ago

On the above cheatsheet page you can go to the console and run this: $('span[data-unicode]').each(function(k,v){ console.log( k + ' ' + $(v).attr('class') + ' ' + $(v).data('unicode') ) }); to get a list of glyph names and its entity

Tepken Vannkorn · Accepted Answer · 2013-01-09 15:47:51Z

2

So why don't you use <i> tag for your edit button? Try this:

<button type="submit" name="edit" class="edit-button btn btn-primary">
   <i class="icon icon-edit icon-white"></i>
   Edit
</button>

answered Jan 9, 2013 at 15:47

Tepken Vannkorn

9,72514 gold badges63 silver badges86 bronze badges

7 Comments

user1746582 Over a year ago

Hi thanks for your reply. Though I'd like to know if it's possible to update the CSS I included above to show the glyphicon instead of image. If it is possible I'd like to know how :)

Tepken Vannkorn Over a year ago

use this background: url(glyphicons-halflings.png) no repeat -96px -72px !important; as it is the sprite image so that you have to specify which position the image is.

user1746582 Over a year ago

thanks for that. I made the change you suggested and in firebug it does not appear. In the browser it looks like an empty grey little box :0 ? just updated my origin post...

user1746582 Over a year ago

Hi tried again with minor update as follows: background: url('../img/glyphicons-halflings.png') no-repeat -96px -72px !important; just had to add single quotes around image name and hyphen in 'no-repeat'. +1 for your help and fast response :)

Jage Over a year ago

Good alternate suggestion, but doesn't answer the question. My clickable object is a table header and I don't want to append an icon in there and change it out when I need the image to change.

|

Collectives™ on Stack Overflow

Using Twitter Bootstrap glyphicons in CSS

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related