Fuente Impresionante no funciona, iconos que muestran como cuadrados

Debe tener 2 clases, la clase fa y la clase que identifica el icono deseadofa-twitter, fa-search, etc {

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

Usa esto

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

Tuve un problema similar con Amazon Cloudfront CDN, pero se resolvió después de comenzar a cargarlo desde maxcdn

Esto puede ayudar, compruebe que no ha cambiado inadvertidamente la familia de fuentes en el icono. Si ha cambiado el .fa item's font family from: FontAwesome el icono no se mostrará. Siempre es algo tonto y pequeño.

Espero que eso ayude a alguien.

Si está utilizando LESS o SASS, abra la fuente-impresionante.less / sass y editar la variable de ruta @fa-font-path: "../font"; que apunta a las fuentes reales:

@fa-font-path: "../font";

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

Lo mismo con CSS, excepto que edita la ruta en el bloque de declaración @font-face:

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

Abra su fuente-impresionante.css hay código como:

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

Debe tener una carpeta como:

font awesome -> css
             -> fonts

O la forma más fácil :

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

Traté de resolver el mismo problema con algunas soluciones anteriores, pero no funcionaron en mi situación. Finalmente, agregué estas 2 líneas en la CABEZA y funcionó:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">   

Estoy usando Font Awesome 4.3.0 simplemente enlazando desde maxcdn funciona como se menciona aquí ,

Pero alojar en tu servidor poner fuentes y css en la misma carpeta funcionó para mí, así

Luego solo enlaza el css:

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

La esperanza ayuda a alguien.

En caso de que esté trabajando con Maven y Apache Wicket {[5] } también verifique lo siguiente para tratar de resolver el problema con Font-Awesome y los iconos no se cargan:

Si ha colocado sus archivos, por ejemplo, en la siguiente estructura de archivos

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Compruebe 1) ¿Está utilizando correctamente un Package Resource Guard para permitir cargar correctamente los archivos de fuentes?

Ejemplo de su clase que se extiende Aplicación web:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Compruebe 2) Después de asegurarse de que todas las fuentes se transfieren correctamente al Navegador Web, compruebe lo que realmente se ha transferido al Navegador Web, es decir, ¿cambió la integridad de los archivos de fuentes? Compare los archivos en su directorio de origen y los archivos transferidos al navegador web usando, por ejemplo, la barra de herramientas para desarrolladores web de Firefox y DiffDog (para comparar archivos).

En particular, si está utilizando Maven, tenga en cuenta el recurso filtrado. No filtre la carpeta donde se encuentran sus archivos / font, de lo contrario se dañarán.

Ejemplo de tu pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

En el ejemplo anterior no filtramos la carpeta src/main/java, donde se encuentran los archivos css y font.

Para obtener más información sobre el filtrado de datos binarios, consulte también la documentación:

Http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

En particular la documentación advierte: "Advertencia: No filtrar archivos con contenido binario como imágenes! Lo más probable es que esto resulte en una salida corrupta. Si tiene archivos de texto y archivos binarios como recursos, debe declare dos conjuntos de recursos mutuamente excluyentes. El primer conjunto de recursos define los archivos a filtrar y el otro conjunto de recursos define el archivos para copiar inalterados..."

Tuve este problema. El problema era que tenía un estilo CSS de la familia de fuentes con !importante sobreescribir la fuente fontawesome.

Esto debería ser mucho más sencillo en la nueva versión 3.0. Lo más fácil es apuntar a la CDN de Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Si su servidor es IIS, asegúrese de agregar el MIME correcto para servir .extensión de archivo woff. El MIME correcto es application/octet-stream

Debe devolver el encabezado Access-Control-Allow-Origin para * para sus archivos de fuentes

Podría ser posible que su ruta de fuente no sea correcta para que css no pueda cargar la fuente y renderizar los iconos, por lo que debe proporcionar la ruta trenzada de las fuentes adjuntas.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}

Use esto <i class="fa fa-camera-retro" ></i> no ha definido las clases fa

Debe tener 2 clases, la clase fas y la clase fa, tal vez esto funcione:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>

He cambiado de 3.2.1 a 4.0.1 y la carpeta era font y ahora se llama fonts.

Src: url ("../font / fontawesome-webfont.eot?v=3.2.1');

Src: url ("../ fonts / fontawesome-webfont.eot?v=4.0.1');

Utilizo la Fuente Oficial Awesome SASS Ruby Gem y arreglé el error agregando la siguiente línea a mi aplicación.css.scss

@import "font-awesome-sprockets";

Explicación:

El archivo font-awesome-sprockets incluye las funciones auxiliares Sass de sprockets assest utilizadas para encontrar la ruta adecuada al archivo de fuente.

Si está usando sass y ha importado en su principal.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

El error puede provenir de la fuente-impresionante.archivo scss que está buscando los archivos de fuente en su ruta relativa.

Así que recuerda para anular la variable fa fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

Así no hay necesidad de añadir el cdn en su índice.html

Tuve este problema y pasé por cada paso cuidadosamente...a pesar de que he estado usando FA durante años...y luego me di cuenta de que tenía esta línea en mi archivo css de correo:

* {
font-family: Arial !important;
}

Error tonto, pero esto podría alertar a alguien en el futuro!

Usar rutas absolutas en lugar de relativas lo resolvió para mí. Estaba usando rutas relativas (ver el primer ejemplo a continuación) y eso no funcionó. Comprobé a través de la consola y encontré que el servidor estaba devolviendo un 404, archivos no encontrados.

Ruta relativa causó un 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Ruta absoluta solucionada cross browser:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

No recomendaría hacer esto a menos que tenga que hacerlo, pero funciona para mí. Por supuesto, debe repetir esto para todos los formatos de fuente en el fuente-impresionante.archivo css.

No estaba funcionando para mí porque tenía la directiva Allow from none para el directorio raíz en mi configuración de apache. Así es como conseguí que funcionara...

Mi estructura de directorios:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

Donde mi índice.html tiene:

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

Elegí continuar denegando el acceso a mi root y en su lugar agregué otra entrada de directorio en mi configuración de apache para root/ font-awesome /

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

Mi problema fue con la adición de la

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

Dentro de un

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

Tag

Lo arreglé colocándolo fuera de la etiqueta.

Lo que solucionó el problema para mí (en mi máquina con Windows 7) fue descifrar el directorio de mi proyecto. Es una locura la cantidad de fallas visuales y funcionales que surgen originalmente de eso al probar su sitio web. Solo tienes que llegar a un símbolo del sistema y ejecutar:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

...donde %PROJECT_PATH% es la ruta de acceso completa al directorio donde se almacena el código.

Compruebe dos veces el fontawesome-all.archivo css-en la parte inferior habrá una ruta a la carpeta webfonts. La mía tenía"../ webfonts" en él, lo que significaba que el archivo css estaría buscando 1 nivel arriba desde donde está. Como todos mis archivos css estaban en la carpeta css y agregué las fuentes a la misma carpeta, esto no funcionaba.

Simplemente mueva su carpeta de fuentes a un nivel y todo debería estar bien:)

Probado con Font Awesome 5.0

Ahora en fontawesome 5 puede entregar una versión en caché de JS a través de Https.

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

Más información sobre https://fontawesome.com/get-started/svg-with-js

Uso con la clase alta

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

Probé varias de las sugerencias anteriores sin éxito.

Uso los paquetes NuGet. Los son ( por alguna razón) versión con nombre múltiple ( font-awesome, fontawesome, font.impresionante, etc.)

Por lo que vale: Eliminé toda la versión instalada y luego solo instalé la última versión de la fuente .awesome . fuente.awesome simplemente funcionó sin la necesidad de modificar o configurar nada.

Asumo que hay un número de cosas son falta de las otras versiones con nombre.

Hoy encontré una solución que era:

1. Descargue todo el proyecto desde su página de Github
2. Luego siga el resto de los pasos en su página bajo la sección CSS predeterminada sobre mover el directorio a su proyecto y agregar el enlace en la sección PRINCIPAL de an .archivo html

El problema con su documentación es que no especifican un enlace a donde debe obtener una copia de todo el proyecto font-awesome para ponerlo en su proyecto.