it-swarm.com.de

Verwendung von Schaltflächen mit nur Glyphicons in Twitter-Bootstrap

Was ist das richtige Markup für die Verwendung eines Buttons mit nur einem Glyphicon in Twitter Bootstrap 3.0? Wenn ich folgendes benutze

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

Ich bekomme so etwas:

enter image description here

Update:

Ich habe einen Unterschied zwischen den Stilen in meinem und dem <button>-Element von @ Adrift gemacht und Folgendes erhalten:

# -- 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;
29
Sam Selikoff

Fügen Sie nach der Symbolspanne ein sicheres Leerzeichen ein.

So was:

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

Oder Sie können das Glyphicon selbst als Schaltfläche verwenden

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

und dann eine "onclick" -Methode dafür festlegen ...

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

    //do something

});
2
MattParra

Hallo, ich hatte das gleiche Problem . Ich fand heraus, dass <!DOCTYPE html> in index.html fehlte.

1
Tom Witek

Scheint etwas spät, aber die richtige Antwort ist:

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

Sie müssen sowohl Glyphicon als auch Glyphicon- {type} in der span-Klasse hinzufügen, kein Element. Viel Glück

1
Eefret

Verwenden Sie einfach <span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>

0
Mr. T

(vor Version 3.0) Sollte es nicht sein ... 

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