Font Awesome no funciona, los iconos se muestran como cuadrados

224

Así que estoy tratando de crear un prototipo de una página de marketing y estoy usando Bootstrap y el nuevo archivo Font Awesome. El problema es que cuando trato de usar un icono, todo lo que se muestra en la página es un gran cuadrado.

Así es como incluyo los archivos en la cabeza:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

Y aquí hay un ejemplo de mí tratando de usar un ícono:

<i class="icon-camera-retro"></i>

Pero todo eso se representa en un gran cuadrado. ¿Alguien sabe lo que podría estar pasando?

css html twitter-bootstrap font-awesome Connor Black
fuente
1
¿Estás importando la fuente?
mayhewr
1
Probablemente no. Pensé que solo tenías que incluir el .cssarchivo.
Connor Black
2
El título implica que el problema es específico de Chrome. ¿Se está cargando en otros navegadores o el archivo de fuente referenciado está apareciendo en un 404?
cimmanon
1
No puedo encontrar el paso 3 en el enlace anterior a partir de agosto de 2016 ... ¿Alguna redirección?
Saurabh Tiwari
1
¿Probablemente olvidó copiar la carpeta webfont?
derecho el

Respuestas:

149

De acuerdo con la documentación (paso 3), debe modificar el archivo CSS suministrado para que apunte a la ubicación de la fuente en su sitio.

mayhewr
fuente
55
Gran respuesta, solo para dar información adicional, también puede colocar las fuentes en la ruta predeterminada proporcionada por el CSS, simplemente abra Font-awesome.css y encontrará la siguiente entrada: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
Solo para futuros lectores ASP.NET MVC con el mismo problema: si tiene todas las carpetas en el lugar correcto, verifique si agregó el tipo MIME en su archivo web.config como se señala aquí: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Si usa el Esquema de URI de datos con una versión base64 de la fuente (puede convertir fácilmente en línea), entonces no tiene que preocuparse por la ruta de archivo adecuada y el alojamiento de recursos.
— RenaissanceProgrammer
Nota : si no desea modificar el CSS, simplemente coloque CSS y las fuentes en la misma carpeta, verifique esto
— shaijut
77
@tutuca: No todos pueden usar un CDN.
— Carreras ligeras en órbita el
188

Debe tener 2 clases, la faclase y la clase que identifica el icono deseado fa-twitter, fa-searchetc ...

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

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
fuente
44
Esta debería ser la respuesta principal, el CSS proporcionó puntos a la ubicación correcta para los archivos de fuente siempre que no los mueva, esto me estaba volviendo
— loco,
55
Nota: "El prefijo fa ha quedado en desuso en la versión 5. El nuevo valor predeterminado es el estilo fas sólido y el estilo fab para las marcas".
— Terje Solem
1
¡Esto me lo arregló! Estoy usando Angular (5 creo) junto con primeng y parece que la fuente impresionante ya funcionó, por ejemplo, para las definiciones de MenuItem dentro de xx.component.ts (los iconos se muestran correctamente). Sin embargo: al agregar algo a xx.component.html (por ejemplo, el botón p con un ícono), ¡uno tiene que agregar la clase fa y fa- <cualquier ícono>!
— Igor
1
@TerjeSolem, la información que proporcionó es muy importante. Resolvió mi problema. como estaba usando una versión anterior pero estaba usando "fas" gracias
— MindRoasterMir
🤦‍♂️ Muchas gracias! Obtuve lo mismo con los iconos abiertos oi oi -... Perdí el primer oi.
— Alexandr
54

Utilizar este 

<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 que comencé a cargarlo desde maxcdn

— Kumar Deepam
fuente
66
esto supone que desea utilizar el CDN de font-awesome. Para un entorno de producción comercial no haría esto.
— Jay Edwards
48

Esto puede ayudar, verifique para asegurarse de que no haya cambiado accidentalmente la familia de fuentes en el icono. Si ha cambiado la familia de fuentes del elemento .fa de: FontAwesome, el icono no se mostrará. Siempre es algo tonto y pequeño.

Espero que ayude a alguien.

— Bren1818
fuente
11
¡BINGO! Muchas gracias. Metro-UI estaba anulando la familia de fuentes font-awesome. Tuve que agregar esto: .fa {font-family: 'FontAwesome'! Important; } entonces funcionó.
Debbie A
1
Sí. Tonto y pequeño. Esto, cambiar la fuente por otra cosa y afectar los iconos de fontawesome, me sucedió tantas veces que se está volviendo estúpido.
Edd
2
Sí, esta línea era la culpable (para ser más específico, la regla importante): * {font-family: 'Source Sans Pro'! Important}
Svet
1
Este es el consejo más importante y útil sobre el uso de Font Awesome para evitar perder tiempo encontrando problemas.
Dez
22

Si está utilizando LESS o SASS, abra el archivo font-awesome.less / sass y edite 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;
}
jonschlinkert
fuente
¿Hay alguna manera de importar solo ciertos íconos en lugar de todos? Solo me gustaría compilar mi archivo css con algunos iconos.
user805981
@fa-font-path: "../fonts";trabajó para mi. (Observe la falta sagregada)
prograhammer
18

Abra su código font-awesome.css hay 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;
}

debes 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">
Erga Kandly
fuente
13

Traté de resolver el mismo problema con algunas soluciones anteriores, pero no funcionaron en mi situación. Finalmente, agregué estas 2 líneas en HEAD 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">
Vojkan Cvijanovic
fuente
12

Estoy usando Font Awesome 4.3.0solo enlaces de maxcdn works como se menciona aquí ,

pero para alojar en su servidor poner fuentes y CSS en la misma carpeta funcionó para mí, así

ingrese la descripción de la imagen aquí

entonces solo vincula el css:

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

La esperanza ayuda a alguien.

shaijut
fuente
8

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>
Israel
fuente
3
No me di cuenta de esto: desde v5 ahora requieren una fabo fasclase en lugar de la faclase.
Echilon
7

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

Jonny White
fuente
Tuve el mismo problema con * {font-family: Helvetica, sans-serif! Important; }
Dubbo
6

En caso de que esté trabajando con Maven y Apache Wicket, también verifique lo siguiente para intentar resolver el problema con Font-Awesome y los íconos 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

Comprobación 1) ¿Está utilizando correctamente un paquete de recursos de protección para permitir cargar los archivos de fuente correctamente?

Ejemplo de su clase que extiende WebApplication:

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

}

Comprobación 2) Después de asegurarse de que todas las fuentes se transfieren correctamente al navegador web, compruebe qué se ha transferido realmente 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 utilizando, por ejemplo, la barra de herramientas de desarrollador web de Firefox y DiffDog (para la comparación de archivos).

En particular, si está utilizando Maven, tenga en cuenta el filtrado de recursos. 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 filtre archivos con contenido binario como imágenes! Esto probablemente dará como resultado una salida corrupta. Si tiene archivos de texto y archivos binarios como recursos, debe declarar dos conjuntos de recursos mutuamente excluyentes. El primer conjunto de recursos define los archivos que se filtrarán y el otro conjunto de recursos define los archivos para copiar sin alterar ... "

Philipp
fuente
6

Tuve este problema y seguí cada paso con cuidado ... aunque 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!

J Doe
fuente
4

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

tronic
fuente
2
¡Exactamente! El uso de proveedores de terceros para servir sus impresionantes archivos de fuentes no resuelve su problema, simplemente lo pasa a otros para que lo resuelvan.
Simanas
4

A partir de diciembre de 2018, me resulta más fácil usar la versión estable 4.7.0 alojada en bootstrapcdn en lugar de la fuente impresionante 5.xx cdn en su sitio web , ya que cada vez que actualizan versiones menores, la versión anterior se romperá.

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

Los íconos son iguales:

<i class="fa fa-facebook"></i>
ehacinom
fuente
3

font-weight: 900;

Tuve un problema diferente con Font Awesome 5. El peso predeterminado de la fuente debería ser 900 para los iconos FontAwesome, pero lo sobrescribí a 400 para las etiquetas span e i. Simplemente funcionó, cuando lo corregí.

Aquí está la referencia del problema en su página de Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

Espero que ayude a alguien.

maníaco
fuente
1
gracias, ese fue mi problema también. Configuré Font-Family en "Font Awesome 5 Free", ¡pero también necesitaba el peso de fuente establecido en 900!
Hans Vonn
3

Si está utilizando la versión 5. * o superior, debe usar el

all.css o all.min.css

Incluir fontawesome.css no funciona ya que no tiene referencia a la carpeta webfonts y no hay referencia a @ font-face o font-family

Puede inspeccionar esto buscando en el código la propiedad font-family en fontawesome.css o fontawesome.min.css

the_haystacker
fuente
esta fue la solución perfecta para mí: lástima que la respuesta esté muy por debajo, no lo vi y tuve que resolverlo yo mismo
Cold_Class
2

Es posible que la ruta de la fuente no sea correcta, de modo que css no pueda cargar la fuente y representar los iconos, por lo que debe proporcionar la ruta varada de las fuentes adjuntas.

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

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

jitendra varshney
fuente
2

A partir de la versión 5, si descargó el paquete desde este sitio:

https://fontawesome.com/download

Las fuentes están en el archivo all.css y all.min.css.

Así es como se vería su referencia utilizando la última versión ahora (reemplace con su carpeta):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
vive el amor
fuente
2

Después de luchar por encontrar una solución y NO encontrar útil la documentación oficial, esto resolvió el problema para mí:

  1. Descargue el Fontawesome.zip. Estoy usando la versión 5.10.2 y la obtuve desde aquí https://fontawesome.com/download

  2. Dentro del archivo zip hay varias carpetas. Solo necesita carpetas css y webfonts ingrese la descripción de la imagen aquí

    1. Cree 2 carpetas en sus proyectos web y asígneles el nombre css y webfonts. ingrese la descripción de la imagen aquí

Estos nombres son obligatorios. Ahora copie el contenido de css y webfonts del zip en las carpetas correspondientes de su proyecto. ¡Y eso es todo!

¡Cuidado con fontawesome! ¡Awesomeness está haciendo las cosas simples para el usuario!

BabaNuevo
fuente
1

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');

Espero que ayude a alguien.

André Duarte
fuente
1

Uso la fuente oficial Awesome SASS Ruby Gem y solucioné el error agregando la siguiente línea a mi application.css.scss

@import "font-awesome-sprockets";

Explicación:

El archivo font-awesome-sprockets incluye las funciones Sass helper assist que se utilizan para encontrar la ruta adecuada al archivo de fuente.

Marklar
fuente
1

si estás usando sass y has importado en tu main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

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

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

así no hay necesidad de agregar el cdn en su index.html

vilsbole
fuente
1

Vuelva a verificar el archivo fontawesome-all.css: en la parte inferior habrá una ruta a la carpeta webfonts. El mío tenía el formato "../webfonts", lo que significaba que el archivo CSS se vería 1 nivel más arriba de 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

Ross
fuente
Esta debería ser la respuesta preferida ya que responde la pregunta directamente sin vincularla con documentación obsoleta. Felicitaciones
Kyle Champion
1

Yo estaba teniendo el mismo problema con la fuente increíble 5 descargado con hilo, hice un nuevo archivo de min.css A LO LARGO con el archivo all.js.

Espero que esto ayude a alguien

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
Enrique Martinez
fuente
1

El archivo /css/all.css contiene el estilo central más todos los estilos de íconos que necesitará cuando use Font Awesome. La carpeta / webfonts contiene todos los archivos de tipo de letra a los que hace referencia el CSS anterior y de los que depende.

Copie toda la carpeta / webfonts y /css/all.css en el directorio de activos estáticos de su proyecto (o donde prefiera mantener activos de front-end o cosas de proveedores).

Agregue una referencia al archivo /css/all.css copiado en cada plantilla o página en la que desee usar Font Awesome.

Solo visite: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Obtendrá la respuesta.

Dipesh Chauhan
fuente
0

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

La ruta relativa causó un 404: 

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

La ruta absoluta se resolvió en el navegador cruzado:

@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 sea necesario, pero funciona para mí. Por supuesto, debe repetir esto para todos los formatos de fuente en el archivo font-awesome.css.

Tim
fuente
0

No me funcionaba porque tenía una Allow from nonedirectiva para el directorio raíz en mi configuración de apache. Así es como lo hice funcionar ...

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 index.html tiene:

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

Elegí continuar impidiendo el acceso a mi raíz 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>
usuario3325776
fuente