Icone fantastiche dei font non rendono tramite il bootstrapcdn

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

Domanda

Sto cercando di usare caratteri icona fantastici di font tramite il link BootstrapCDN che sono abbastanza sicuro di avere l'ultima versione di: 

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
.

Ho inserito questo link nella parte <head> del mio file HTML e sto cercando di farlo funzionare con questo semplice codice HTML di: 

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
.

Tuttavia non è rendering. Ho provato questo codice nelle ultime versioni di Firefox (27), Safari (7) e Chrome (33). Ho controllato che la classe fa è su ciascuna delle icone che sto cercando di richiamare e anche che il prefisso fa- viene utilizzato al contrario del vecchio prefisso icon-. Ho controllato la mia implementazione del codice con questo video http://headwaythemes.com / usando-font-extraesome-with-weadway / (sebbene destinato a un tema WordPress, in Principal il codice dovrebbe funzionare lo stesso) e si guardò attorno a uno stack overflow ma domande precedenti come Fontawesome non caricamento non mi ha dato alcun aiuto per risolvere il mio problema.

Non ho il fontawesome.otf installato ma sicuramente non è che se riesco a vedere i glifi quando visiti http://fortawesome.github.io .
Dovrei solo scaricare e ospitare i file fantastici dei font insieme al mio intero sito futuro, quindi non devo preoccuparmi di aggiornare anche il collegamento BoostrapCDN? - Anche se ho pensato solo di usare alcune icone?

È stato utile?

Soluzione

Il motivo per cui non è caricato è perché l'URI sta iniziando con "//".Ciò significa che è un percorso relativo del protocollo, il che significa che utilizzerà qualsiasi protocollo che utilizza la pagina.Se si apre il tuo html localmente, il tuo browser utilizzerà file come protocollo, cercando così di accedere al Font-Awesome CSS con "File: //".Se si accede al tuo HTML utilizzando un server Web HTTP locale o remoto, si accede alla pagina utilizzando il protocollo HTTP , accedendo quindi a CSS con "http:///".

Soluzione:

    .
  1. Cambia il percorso del CSS o imitarlo sulla macchina locale.
  2. Esegui un server HTTP locale o remoto e accedi alla pagina.

    3. Per maggiori informazioni: Uri a partire da due tagli ... come si comportano?

Altri suggerimenti

Un modo così semplice per affrontare questo - basta aggiungere 'http:' davanti per la linea CDN, e funzionerà sulla tua macchina locale, I.e. Come questo: 

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
.

TA-DAA!

Quale risposta Pulkit è assolutamente corretta.Solo per aggiungere, se si desidera creare un server locale veloce, vai alla directory delle pagine HTML e CSS, quindi andare al terminale e digita -

$ python -m simplehttsserver

Quindi, vai al tuo browser e vai al 127.0.0.1:8000 Se non si presenta, prova a cambiare la homepage del tuo sito web su indice.html

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top