Los íconos de Font-Awesome no se procesan a través de BoostrapCDN

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

  •  20-12-2019
  •  | 
  •  

Pregunta

Estoy intentando usar fuentes de íconos Font-Awesome a través del enlace BootstrapCDN, del cual estoy bastante seguro de tener la última versión:

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

He puesto este enlace en el <head> parte de mi archivo html y estoy intentando que funcione con este código html simple de:

<!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>

Sin embargo, no se está renderizando.Probé este código en las últimas versiones de Firefox (27), Safari (7) y Chrome (33).He comprobado que el fa La clase está en cada uno de los íconos que estoy tratando de llamar y también que el fa- Se utiliza el prefijo en lugar del antiguo. icon- prefijo.Revisé mi implementación del código con este video. http://headwaythemes.com/using-font-awesome-with-headway/ (aunque está destinado a un tema de WordPress, en principio el código debería funcionar igual) y busqué en el desbordamiento de la pila, pero preguntas anteriores como Fontawesome no se carga No me han brindado ninguna ayuda para resolver mi problema.

No tengo instalado el fontawesome.otf pero seguramente no es eso si puedo ver los glifos al visitar http://fortawesome.github.io.
¿Debería simplemente descargar y alojar los archivos con fuentes increíbles junto con todo mi futuro sitio web para no tener que preocuparme por actualizar también el enlace de BoostrapCDN?- ¿Aunque sólo planeo usar algunos íconos?

¿Fue útil?

Solución

La razón por la que no se carga es porque el URI comienza con "//".Eso significa que es una ruta relativa al protocolo, lo que significa que usará cualquier protocolo que esté usando esa página.Si abre su html localmente, su navegador usará archivo como protocolo, intentando así acceder al CSS de fuentes impresionantes con "archivo://".Si accede a su html utilizando un servidor web http local o remoto, entonces accederá a la página utilizando el http protocolo, accediendo así al css con "http://".

Solución:

  1. Cambie la ruta del CSS o imítela en su máquina local.
  2. Ejecute un servidor http local o remoto y acceda a la página.

Para más información:URI que comienza con dos barras...¿cómo se comportan?

Otros consejos

Una manera más fácil de lidiar con esto: simplemente agregue 'http:' delante de la línea cdn y funcionará en su máquina local, es decir.como esto:

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

¡Ta-daa!

Lo que respondió Pulkit es absolutamente correcto.Solo para agregar, si desea crear un servidor local rápido, simplemente vaya al directorio de las páginas html y css, luego vaya a la terminal y escriba:

$python -m ServidorHTTPSimple

Luego, vaya a su navegador y vaya a 127.0.0.1:8000 si no aparece, intente cambiar la página de inicio de su sitio web a index.html

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top