Le icone del glifo di bootstrap di Twitter non vengono caricate

Question

Questo è un problema stupido, ma eccoci qui. Qui è la mia struttura di base

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

Così Contenuto e img sono entrambi nella mia directory principale, in modo da referente l'immagine glifo dal mio file bootstrap.css ho in questo modo:

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

YU NO MOSTRARE?

C'è un file .js che devo controllare per assicurarmi che stia cercando nella directory giusta ??

oh e qui è un frammento di cui sto cercando di ottenere l'immagine di rendere:

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

UPDATE

C'è stato un sacco di punti di vista di questa domanda, così ho pensato che condividerei i miei due centesimi. Una nota, dal momento che postare la domanda BS 3.0 è ora fuori, quindi è possibile che la struttura sia diversa e/o irrilevante, non l'abbia ancora guardata. Ma se sei arrivato qui, tieni presente che questo è pre-3.0 Bootstrap.

Una cosa che ho iniziato a fare è così che non devo proprio sporcare niente è portare l'intera cartella di bootstrap nel progetto, piuttosto che solo le cartelle css/js/img. Io di solito messo nelle mie cartelle script radice con una struttura come questa:

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

Questo può rompere alcune convenzioni dal momento che la cartella di un 'script' in realtà dovrebbe solo tenere gli script. Lo giustifico poiché utilizzo la cartella scripts per gli script (sorpresa!) E le librerie di terze parti (quindi la cartella libs). La maggior parte dei componenti di terze parti contiene almeno file js e css e sono diventato troppo pigro per poterli separare manualmente poiché alcune librerie (come il bootstrap) si basano su dove si trovano gli altri file.

In ogni caso, i miei due centesimi, dai un'occhiata alle risposte qui sotto se vuoi modificare i percorsi dei file. Tutti ottimi consigli, grazie così gente!

Answer 1

Il codice corrente dovrebbe tecnicamente funziona e non c'è bisogno di nessun js di file ..

background-image: url("../../img/glyphicons-halflings.png"); è perfettamente bene per una struttura di directory come

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

Si può provare questo codice sottostante per assicurati che le cose vadano bene ..

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

Se anche questo fallisce, ricontrolla il glyphicons-halflings.png esiste al tuo percorso indicato con sufficienti privilegi ..

Answer 2

provare questo

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

ho cambiato il percorso da un percorso relativo a un percorso assoluto. Aggiungendo la barra all'inizio del percorso, inizia dalla radice del tuo sito.

Fammi sapere se questo funziona per voi.

Answer 3

Ho riscontrato questo stesso problema e non è correlato alla fonte o alla posizione dei glyphicon. Questo è un problema di razza. Purtroppo non posso dirvi il motivo per cui si comporta così in tabelle ... ma so che nei miei dataTables ciò avveniva e il mio modo di aggirarlo era aggiungere i glyphicon dopo che la pagina e le tabelle venivano caricate aggiungendo html. Non è perfetto ma funziona.

Answer 4

Questo potrebbe essere un vecchio post ma spero che aiuti qualcun altro a cercare una risposta a questo problema.

Il file che ho scaricato contiene un sottolineano ma il CSS è alla ricerca di un file con un trattino tra glyphicons e halfling. Cambia uno o l'altro e assicurati che sia caricato nella cartella corretta sul tuo server.

Answer 5

1. Copiare il glyphicons-halflings.png & glyphicons-halfling-white.png di IMG cartella.
2. creare una sottocartella con il nome "img" nella cartella css.
3. Incolla entrambi i glyphicons-halflings.png & glyphicons-halflings-white.png in css-> cartella img.
4. Apri il tuo foglio di stile bootstrap, ad es. Diciamo Bootstrap.css nell'editor di testo.

5. Trova (Ctrl + F) "icona". 6. Troverete la classe.

   [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. cambiamento l'immagine di sfondo url

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

7. find "glyphicons-halfling-white.png"
8. Change è percorso anche. E Bingo! ci sei.

Answer 6

Ho riscontrato questo stesso problema oggi e mi ha confuso. Come Rishi dice sopra, dovrebbe funzionare, ma non lo fece. Ho triplicato la mia struttura di directory. Poi alla fine ho capito che non stava affatto colpendo il mio file di glyphicons. Ho rimosso questa riga offendente di css:

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

E tutto andava bene!

Ricorda che se includi font-awesome, cercherà i file di font al posto del file glyphicons. Quindi, aggiungi i caratteri appropriati, oppure usa semplicemente il vecchio bootstrap.

Answer 7

Le icone degli glifi vengono caricate solo quando nella cartella dei caratteri sono presenti i seguenti file. glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf e glyphicons-halflings-regular.woff.

Scarica il theme template o il carousel template di bootstrap e troverai questi file lì.

Per sapere dove posizionare questi file nella cartella Web, è sufficiente eseguire Link Checker o Xenu's link sleuth e verrà mostrato dove posizionare tali file.