web-dev-qa-db-de.com

Verwendung von Twitter Bootstrap Glyphicons in CSS

Ich möchte ein Twitter bootstrap glyphicon hinzufügen, um den Bildverweis in der CSS-Datei unten zu ersetzen, obwohl ich nicht sicher bin, wie.

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

In HTML würde ich es wie folgt hinzufügen:

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

Irgendwelche Ideen?

update - versucht Folgendes, obwohl es nur die Breite und Höhe in Firefox's Firebug anzeigt:

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

nicht sicher, warum es nicht abgeholt wird?

cssimagetwitter-bootstrapglyphicons
21
user1746582

Also warum benutzt du nicht <i> Tag für Ihre Bearbeitung Schaltfläche? Versuche dies:

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

Ich benutze gerne die Methode: after oder: before ...

HTML 

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

CSS 

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

Dies sollte funktionieren, vorausgesetzt, Sie haben die Glyphicon-Schriften (diese sind im Lieferumfang von Bootstrap enthalten).

109
Nick