web-dev-qa-db-fra.com

Utilisation de Twitter Bootstrap glyphicons en CSS

Je voudrais ajouter un glyphicon Twitter bootstrap pour remplacer la référence de l'image dans le fichier CSS ci-dessous, mais je ne sais pas comment.

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

En HTML, je l'ajouterais comme suit:

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

Des idées?

mise à jour - a essayé ce qui suit, mais il n'affiche que la largeur et la hauteur dans le firebug de Firefox:

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

vous ne savez pas pourquoi il n'est pas récupéré?

cssimagetwitter-bootstrapglyphicons
21
user1746582

Alors pourquoi n'utilisez-vous pas <i> tag pour votre modification bouton? Essaye ça:

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

J'aime utiliser la méthode: après ou: avant ...

HTML 

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

CSS 

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

Cela devrait fonctionner en supposant que vous disposez des polices glyphicon (elles sont fournies gratuitement avec Bootstrap)

109
Nick