javascript - installing - how to use font awesome 5

FontAwesome no puede cargar fuentes localmente y en la aplicación de electrones

Question

He descargado FontAwesome usando npm y luego copié el archivo css y las fuentes en las carpetas correctas en la raíz-directorio de mi aplicación de electrones usando la tarea de copia de grunts.

Hasta aquí todo bien. Todo está donde se supone que debe estar.

Ahora, cuando me refiero a FontAwesome en mi aplicación, los íconos no se cargan. Estos son los errores que obtengo en la consola:

Error al decodificar la fuente descargada:
file: ///path/to/fonts/fontawesome-webfont.woff2? v = 4.4.0
Error de análisis OTS: no se pudo convertir la fuente WOFF 2.0 a SFNT

Error al decodificar la fuente descargada:
file: ////path/to/fonts/fontawesome-webfont.woff? v = 4.4.0
Error de análisis OTS: tamaño de archivo incorrecto en el encabezado WOFF

Error al decodificar la fuente descargada:
file: ////path/to/fonts/fontawesome-webfont.ttf? v = 4.4.0
Error de análisis de OTS: entrySelector incorrecto para el directorio de la tabla

Ya he intentado modificar el archivo css de FontAwesome eliminando todos los parámetros de la versión, pero este no parece ser el problema. The Issues surge al iniciar la aplicación a través de un electron . y al ver el archivo html en el navegador.

ACTUALIZAR

Para responder algunos comentarios:

• Este problema ocurre tanto en el electrón como en el navegador (probado en Chrome y Firefox)
• Estoy usando las versiones más nuevas de ambos, FontAwesome (4.4.0) y Electron (0.32.1) (nueva instalación a través de npm)
• css se carga como: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >

Answer 1

Para algunas personas que se están implementando en IIS, agregar esto al archivo web.config (el principal, no el que está dentro del directorio del controlador) podría ser de ayuda.

<system.webServer>
   <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
</system.webServer>

Answer 2

intente lo siguiente, llame a font-face como el siguiente al comienzo de su archivo CSS.

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3) format(''embedded-opentype''), url(../fonts/fontawesome-webfont.woff?v=4.0.3) format(''woff''), url(../fonts/fontawesome-webfont.ttf?v=4.0.3) format(''truetype''), url(../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular) format(''svg'');
    font-weight: 400;
    font-style: normal
}

Answer 3

El problema estaba en mi grunt-file. Traté de reproducir el problema simplemente descargando todas las dependencias manualmente en los sitios web de sus proveedores y las coloqué en la carpeta de scripts correspondiente de mi proyecto; de repente funcionó.

Cambié a trago ahora y todavía funciona. Sin embargo, no tengo idea de qué estaba haciendo mal con el gruñido ...

Answer 4

Si está utilizando la bower , puede volver a escribir la font-face para:

@font-face {
  font-family: FontAwesome;
  src: url(font-awesome/fonts/fontawesome-webfont.eot);
  src: url(font-awesome/fonts/fontawesome-webfont.eot?#iefix) format(''embedded-opentype''), 
       url(font-awesome/fonts/fontawesome-webfont.woff) format(''woff''), 
       url(font-awesome/fonts/fontawesome-webfont.ttf) format(''truetype''), 
       url(font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular) format(''svg'');
  font-weight: 400;
  font-style: normal
}

Answer 5

En mi situación, Git estaba tratando el archivo como un archivo de texto, y jugando con sus "finales de línea". Esto estaba corrompiendo el archivo.

Ajuste de .gitconfig para reconocer archivos * .woff como binarios, luego quite el archivo y agregue una nueva copia de https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont. woff resolvió el problema para mí.

Answer 6

Tuve un problema similar (tal vez esta respuesta ayudará a alguien). Uso Maven para construir proyectos (Java + JS). Maven Filter Plugin corrompió los archivos de fuentes binarias. Tuve que agregar incluye y excluye:

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>

Answer 7

Estoy seguro de que esto está resuelto, pero esto funcionó para mí, así que ... Voy a dejar esto aquí:

Solo tuve el mismo problema con una fuente que había usado antes. Resultó que esto fue causado por un problema con FTP. El archivo se cargó como texto (ASCII) en lugar de binario, lo que corrompió el archivo. Simplemente recargué los archivos de fuentes, y luego todo funcionó.