html - bootstrap - cloudflare

¿Cómo incluir el archivo local de fuente impresionante 4.1 sin usar CDN?

Question

Este es el efecto con fuente impresionante, solo puedo obtenerlo cuando uso la fuente impresionante CDN 4.1)

Usando los archivos descargados, incluí la carpeta de fuentes y font-awesome.css, pero aún no aparece ningún icono.

Mi enlace que es correcto.

La ruta del archivo font-awesome.css, no cambié nada.

Directorio de carpetas y archivos.

dentro de la carpeta de fuentes.

dentro de la carpeta css.

*************************************************** *************************************************** *****************************
Ya tengo el problema resuelto Esto se debe a un error al escribir el código. Escribo en estilo fontawesome v3.1

 <i class="icon-twitter-sign icon-x3"></i>

y ahora estoy usando v4.1, por eso no funcionó. Debería ser

 <i class="fa fa-twitter icon-x3"></i>

para que funcione.

Answer 1

1. Descarga el paquete fontawesome desde su sitio web.
2. Extraiga el paquete donde encontrará el archivo fontawesome.css.
3. Copia este archivo a tu directorio css
4. copie todos los archivos de fuentes del paquete extraído de fuentes a su carpeta de fuentes.
5. Finalmente agregue el fontawesome.css a su página html dando la ubicación respectiva del archivo css.

Y voilá !

Answer 2

1. Descarga fontawesome (font-awesome-4.7.0): http://fontawesome.io/get-started/
2. Descomprima y copie en su proyecto como está.
3. En la referencia HTML font-awesome.min.css, por ejemplo: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">

Answer 3

Puede encontrar que las opciones de desarrollador en su navegador favorito le darán una idea de por qué el archivo no funciona.

Fuente impresionante requiere los archivos de fuente que vienen con ella. El archivo CSS hará referencia a estos e intentará incluirlos, pero actualmente no podrá encontrarlos.

Descargar font-awesome-4.1.0.zip desde FontAwesome

Luego extraiga esto y ponga las carpetas css y fuentes en su proyecto. A continuación, puede hacer referencia al archivo como:

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

Answer 4

Solo descargar Css y enlazar con el archivo no tendrá sentido, deberías mirar en el archivo css ...

No ha descargado la carpeta de fuentes en la que están almacenados todos los estilos de fuentes ... Entonces, descárguela y proporcione una ruta a los archivos de fuentes ubicados en su sistema. He mostrado los enlaces en los cuadros que necesita para agregar enlaces en los archivos css de fuentes impresionantes. ..

Descargue fuentes desde los enlaces de cdn y guárdelos en la carpeta de fuentes.

Espero que esto funcione para usted..

Answer 5

Ya que estoy usando FontAwesome V5.3.1, me gustaría actualizar esta respuesta ya que la estructura de la carpeta se modificó un poco en esta versión.

1. En primer lugar, descargue FontAwesome v5.3.1 y extraiga la carpeta.
2. Copie el archivo all.min.css de la carpeta CSS y agréguelo a sus hojas de estilo.
3. Ahora, copie la carpeta webfonts del extracto de FontAwesome y colóquela en el directorio de su proyecto, uno arriba, en su archivo all.min.css . (Consulte la imagen de abajo)

Como el archivo all.min.css hace referencia a la carpeta webfonts ahora, debemos agregar este archivo junto con la carpeta webfonts .

src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.

Gracias.