Twitter bootstrap glyph Symbole werden nicht geladen

Question

Das ist so ein dummes Problem, aber hier gehen wir sowieso. Hier ist meine Grundstruktur

/Content/twitter/bootstrap.css 
/img/glyphicons-halflings.png 

So Inhalt und img sind beide in meinem Root-Verzeichnis, so die Glyphe Bild von meiner bootstrap.css Datei referent Ich habe es wie folgt aus:

background-image: url("../../img/glyphicons-halflings.png"); 

YU NO SHOW?

Gibt es eine .js-Datei, die ich überprüfen muss, um sicherzustellen, dass es im richtigen Verzeichnis sucht? oh

und hier ist ein Ausschnitt aus dem ich versuche, das Bild zu bekommen zu machen:

<td> 
       @if (item.Something == true) 
       { 
        <i class="icon-ok"></i> 
       } 
       else 
       { 
        <i class="icon-remove"></i> 
       } 
      </td> 

UPDATE

Es gab eine Menge Blick auf diese Frage, so dass ich dachte, ich würde meine zwei Cent teilen. Ein Hinweis, da das Stellen der Frage BS 3.0 nun aus ist, so ist es möglich, dass die Struktur anders und/oder irrelevant ist, habe sie noch nicht angeschaut. Aber wenn Sie hier sind, denken Sie daran, das ist vor 3.0 Bootstrap.

Eine Sache, die ich getan habe, macht es so, dass ich nicht wirklich mit irgendetwas zu tun haben muss, bringen Sie den gesamten Bootstrap-Ordner in das Projekt, anstatt nur die css/js/img-Ordner. Ich es in der Regel mit einer Struktur, wie diese in meinem Stamm Skripte Ordner setzen:

/scripts 
    /libs 
      /boostrap <-- the unzipped folder you get when downloading 
       /js 
       /css 
       /img 

Dies kann einige Konventionen brechen, da ein ‚Skripte‘ Ordner sollte wirklich nur Skripte halten. Ich begründe es, da ich den Skriptordner für Skripte (Überraschung!) Und Bibliotheken von Drittanbietern (also den Ordner libs) verwende. Die meisten Drittanbieter-Komponenten, die Sie bekommen, haben mindestens js und css-Dateien mit ihnen, und ich bin einfach zu faul, sie manuell trennen zu können, da einige Bibliotheken (wie Bootstrap) darauf angewiesen sind, wo die anderen Dateien sind.

Wie auch immer, meine zwei Cent, werfen Sie einen Blick auf die Antworten unten, wenn Sie die Dateipositionen ändern möchten. Alle guten Tipps, vielen Dank SO Leute!

Answer 1

Ihr aktueller Code sollte technisch funktionieren und es besteht keine Notwendigkeit einer js Datei ..

background-image: url("../../img/glyphicons-halflings.png"); ist völlig in Ordnung für eine Verzeichnisstruktur wie

/Content/twitter/bootstrap.css 
/img/glyphicons-halflings.png 

Sie können diesen Code versuchen unten an stellen Sie sicher, dass die Dinge in Ordnung sind.

<td><i class="icon-ok"></i></td> 

Wenn dies auch fehlschlägt, dann überprüfen Sie, dass Glyphicons-Halblings.png existiert auf Ihrem besagten Weg mit ausreichenden Privilegien.

Answer 2

versuchen diese

background-image: url("/img/glyphicons-halflings.png");

ich den Weg von einem relativen Pfad in einen absoluten Pfad geändert. Wenn Sie den Schrägstrich am Anfang des Pfads hinzufügen, beginnt er mit dem Stamm Ihrer Site.

Lassen Sie mich wissen, ob das für Sie funktioniert.

Answer 3

Ich traf das gleiche Problem und es ist nicht an der Quelle oder Speicherort Ihrer glyphicons bezogen. Dies ist ein Wettlauf. Ich kann leider nicht den Grund nennen, warum es sich so in Tabellen verhält ... aber ich weiß, dass dies in meinen Datentabellen der Fall war und mein Weg dahin war, die Glyphicons nach dem Laden der Seite und der Tabellen durch Anhängen von HTML hinzuzufügen. Es ist nicht perfekt, aber es funktioniert.

Answer 4

Dies kann eine alte Post, aber ich hoffe, dass es jemand anderes für eine Antwort auf dieses Problem der Suche hilft.

Die Datei, die ich heruntergeladen enthält eine unterstreichen aber die CSS sucht nach einer Datei mit einem Strich zwischen glyphicons und Hobbits. Ändern Sie das eine oder andere und stellen Sie sicher, dass es in den richtigen Ordner auf Ihrem Server hochgeladen wird.

Answer 5

1. Kopieren Sie die Glyphicons-Halblings.png & glyphicons-Halblings-white.png Von img-Ordner.
2. erstellen Sie einen Unterordner mit dem Namen "img" im CSS-Ordner.
3. Fügen Sie die beiden glyphicons-halflings.png & in CSS- glyphicons-Hobbits-white.png> img Ordner.
4. Öffnen Sie Ihr Bootstrap-Stylesheet, z. Lassen Sie uns bootstrap.css im Texteditor sagen.

5. Suchen (Strg + F) "Symbol". 6.Sie finden die Klasse.

   [class^="icon-"], 
   [class*=" icon-"] { 
   display: inline-block; 
   width: 14px; 
   height: 14px; 
   margin-top: 1px; 
   *margin-right: .3em; 
   line-height: 14px; 
   vertical-align: text-top; 
   background-image: url("../img/glyphicons-halflings.png"); 
   background-position: 14px 14px; 
   background-repeat: no-repeat; 
   } 
   

6. Änderung der Hintergrundbild URL

   background-image: url("img/glyphicons-halflings.png"); 
   

7. find "glyphicons-Hobbits-white.png"
8. ändern es Weg ist auch. Und Bingo! Du bist dran.

Answer 6

traf ich das gleiche Problem heute und es hatte mich verwirrt. Wie Rishi oben sagt, sollte es funktionieren, aber es hat einfach nicht funktioniert. Ich habe meine Verzeichnisstruktur dreifach überprüft. Dann wurde mir schließlich klar, dass es meine Glyphicons-Datei überhaupt nicht traf. Ich entfernte diese beleidigende Linie von css:

<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me --> 

Und alles war gut!

Denken Sie daran, dass, wenn du gehst font-awesome schließen, dann wird es statt der glyphicons-Datei für die Schriftart-Dateien zu suchen. Fügen Sie also entweder die entsprechenden Schriftarten hinzu oder verwenden Sie einfach nur den alten Bootstrap.

Answer 7

Die Glyphsymbole werden nur geladen, wenn Sie die folgenden Dateien im Schriftartenordner haben. glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf und glyphicons-halflings-regular.woff.

Laden Sie die theme template oder die carousel template Bootstrap, und Sie finden diese Dateien dort.

Um zu wissen, wo diese Dateien in Ihrem Web-Ordner zu platzieren, führen Sie einfach Link Checker oder Xenu's link sleuth und es wird Ihnen zeigen, wo diese Dateien zu platzieren.