web-dev-qa-db-fra.com

Comment utiliser des boutons contenant uniquement des glyphiques dans le bootstrap de Twitter

Quel est le balisage approprié pour utiliser un bouton contenant uniquement un glyphicon dans Twitter Bootstrap 3.0? Si j'utilise ce qui suit

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

Je reçois quelque chose comme ça:

enter image description here

Mettre à jour:

J'ai fait un diff entre les styles de la mienne et l'élément <button> de @ Adrift et j'ai obtenu ce qui suit:

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

Essayez d'ajouter un espace insécable après l'envergure de l'icône.

Comme ça:

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

Ou vous pouvez simplement utiliser le glyphicon lui-même comme un bouton

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

puis définissez une méthode "onclick" pour cela ...

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

    //do something

});
2
MattParra

Bonjour, j’ai eu le même problème ... J'ai découvert que <!DOCTYPE html> manquait dans index.html . Après avoir ajouté ceci, le bouton avait tout de suite la bonne taille . J'espère que cela aide;)

1
Tom Witek

Cela semble un peu tard mais la bonne réponse est:

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

Vous devez ajouter à la fois glyphicon et glyphicon- {type} dans la classe span, ce n'est pas un élément. Bonne chance

1
Eefret

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

0
Mr. T

(avant la version 3.0) Ne devrait-il pas être ... 

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