CODEWITHSUNDEEP
csstwitter-bootstrap
Sam Selikoff
Sam Selikoff

Reputation: 12704

How to use buttons with only glyphicons in twitter bootstrap

What is the proper markup for using a button with only a glyphicon in it in Twitter Bootstrap 3.0? If I use the following

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>
</button>

I get something like this:

enter image description here

Update:

I did a diff between the styles on mine and @Adrift's <button> element and got the following:

# -- is mine

--webkit-perspective-origin: 12px 8px;
+-webkit-perspective-origin: 12px 11px;

--webkit-transform-origin: 12px 8px;
+-webkit-transform-origin: 12px 11px;

-height: 16px;
+height: 22px;

-text-rendering: auto;
+text-rendering: optimizelegibility;

Upvotes: 33

Views: 85412

Answers (7)

David Salamon
David Salamon

Reputation: 2451

As of Bootstrap 5, using Bootstrap Icons this is the way to go:

<button type="button" class="btn btn-success">
  <i class="bi bi-telephone-plus"></i>
</button>

Upvotes: 0

Tom Witek
Tom Witek

Reputation: 241

Hi I had the same problem. I found out that <!DOCTYPE html> was missing in index.html. After I added this the button had right away the right size. Hope this helps ;)

Upvotes: 2

Mr. T
Mr. T

Reputation: 151

Simply use <span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>

Upvotes: 0

MattParra
MattParra

Reputation: 291

Or you could just use the glyphicon itself as a button

<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>

and then set an "onclick" method for it...

$("#TrashButton").on("click", function () {

    //do something

});

Upvotes: 1

Samuel Jack
Samuel Jack

Reputation: 33280

Try adding a non-breaking space after the icon span.

Like this:

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>&nbsp;
</button>

Upvotes: 42

Eefret
Eefret

Reputation: 4774

Seems like a little late but the correct answer is:

<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>

You have to add both glyphicon and glyphicon-{type} in the span class, a not a element. Good Luck

Upvotes: 3

Greg
Greg

Reputation: 746

(prior to version 3.0) Shouldn't it be ... 

<button type="button" class="btn btn-small btn-danger">
  <i class=" icon-trash"></i>
</button>

Upvotes: 1

Related Questions