La fuente impresionante no muestra el icono

99

Estoy usando Font Awesome y no deseo agregar CSS con HTTP. Descargué Font Awesome y lo incluí en mi código, pero Font Awesome muestra un cuadro cuadrado bordeado en lugar de un icono. Aquí está mi código:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Me gustaría saber cómo hacer que se muestre el icono en lugar del cuadro cuadrado bordeado.

html css font-awesome

— Ganesh H
fuente

5

Esto se ha preguntado muchas veces antes. Asegúrese de incluir también los archivos de fuentes ... no solo el CSS stackoverflow.com/questions/14366158/…

— Zim

aquí está el enlace a la guía de disparo de gira de fuentes impresionantes en git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

— Mehavel

actualice la pregunta con la estructura de su carpeta en la que tiene la carpeta font-awesome, por lo que podemos ver que "font-awesome.min.css" está obteniendo correctamente la ruta ttf o no. Solo css no funcionaría.

— Ajit Hogade

stackoverflow.com/a/42355738/397872

— rishta

84

En mi caso, cometí el siguiente error en mi código css.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Esto anulará todas las reglas de la familia de fuentes para toda la página. Mi solución fue mover el código al cuerpo así.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Siempre que use la !importantbandera en css, cualquier otra regla css declarada del mismo tipo en el mismo elemento será anulada.

— Daniel Barde
fuente

4

Esta fue la solución para mí. Tuve *{font-family: Raleway}y lo cambié a*.not(i) {font-family: Raleway}

— fungusanthrax

Yo también tuve este problema, pero no me di cuenta durante años porque en DevTools realmente parecía que se estaba usando FontAwesome. Vea mi respuesta para más detalles.

— Dagmar

59

Cuando abres font-awesome.min.css, puedes ver la siguiente ruta:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Significa que debe crear un directorio Fontsy luego copiar los archivos fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) a esta carpeta. Después de eso, todo debería funcionar bien.

— usuario2980426
fuente

Dado que al menos 0.8.1 no se hace referencia a font-awesome. Hay tres summernotearchivos en la carpeta de fuentes con extensiones eot, ttfy woffque deben ser distribuidos.

— ficuscr

2

Tenga cuidado, en 4.6.3 (si no antes) que es fontsno Fontsy en un sistema de mayúsculas y minúsculas que causa problemas ...

— Jason

1

¿Por qué font awesome no lo dice en su sitio web? realmente no es explícito.

— Matt

¡Increíble! Pensé que las fuentes tenían que estar en la misma carpeta que el CSS, tenían que estar un nivel de carpeta arriba.

— Giovani Vercauteren

Además, asegúrese de que su biblioteca esté actualizada. Tenía todos mis logotipos excepto el logo del bandcamp. Una vez que descargué el 4.7 actualizado y reemplacé los archivos, funcionó.

— Ryan Walker

45

Tenga en cuenta que la nueva versión (5) de la fuente usa "fas"o en "fab"lugar de "fa"prefijo

Citado de su sitio web:

El prefijo fa ha quedado obsoleto en la versión 5. El nuevo predeterminado es el estilo fas solid y el estilo fab para las marcas.

Es por eso que mis fuentes mostraban cuadrados en blanco. Ahora arreglado.

Código de ejemplo:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Ver: https://fontawesome.com/icons/facebook-f?style=brands

— krystonen
fuente

¡Eso lo hizo por mí! Es extraño que no se haya actualizado en los documentos

— GroomedGorilla

Esto fue lo único que funcionó. Si está usando una versión moderna, use esto.

— samurdhilbk

¡SALVAVIDAS! cambiar a "fa fa-bars" borked

— desagradable

Gracias, para mí algunos iconos funcionan con fas y otros con fab, por ejemplo fab fa-twitter está bien, pero fas fa-twitter muestra un cuadrado blanco, ¡imagínate!

— user1620090

Entonces, si la nueva versión es fas, entonces ¿por qué necesito cambiar mis clases de 'fas' a 'fa'

— Sam

22

Primero, compruebe que tiene class = "fa" así como la clase del icono. Entonces, no solo

<i class="fa-pencil" title="Edit"></i>

Pero también

<i class="fa fa-pencil" title="Edit"></i>

Entonces funciona como se esperaba. Esto resolvió mi problema.

— Una pregunta más
fuente

1

Esto funcionó para mí. Para mí, fab fa-wrap no funcionaba, pero entonces fa fa-wrap sí funcionaba. Muy extraño, pero solucionó mi problema.

— Jordan Schuetz

@JordanSchuetz "fab" es específico para los íconos de la marca, como "fab fa-facebook-f". En las versiones más nuevas, encontrará "fas" para la variación "sólida", por lo que la suya se fijaría en "fas fa-sobre" en las versiones más nuevas, o "fa fa-sobre" en una anterior.

— Tessa

20

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

— Erga Kandly
fuente

11

Verifique que la ruta a su CSSarchivo sea correcta. Prefiero los enlaces absolutos, son más fáciles de entender ya que sabemos por dónde partimos y los motores de búsqueda también los preferirán a los enlaces relativos. Y para reducir el ancho de banda, use el enlace de servidores de fuentes impresionantes:

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

Además, si lo usa, no habrá necesidad de cargar fuentes adicionales a su servidor y se asegurará de señalar el CSSarchivo correcto , y también se beneficiará de las últimas actualizaciones al instante.

— Valentin Mercier
fuente

10

Hice lo mismo y todavía tengo solo caja cuadrada

— Vipul Hadiya

5

Estaba lidiando con el mismo problema, luego me di cuenta de que tengo que usar una nueva versión (5 y más)

use este cdn, funcionará.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

— Halid
fuente

4

Para empezar, no deberías tener ambos font-awesome.css y font-awesome.min.css

Por lo general, utilícelo font-awesome.cssdurante el desarrollo y luego cámbielo font-awesome.min.csscuando esté satisfecho con el sitio.

Problemas como este a menudo son causados por rutas y ubicaciones relativas, así que verifique dónde está su archivo html en relación con el css.

Si su archivo html está en el directorio base y el css en una subcarpeta fuera de la raíz, necesitará: href="./css/font-awesome.css"(punto único)

— Pablo
fuente

4

Todo lo anterior es correcto, sin embargo, además de eso, mi problema fue que descargué la versión gratuita de FA5 que no tiene:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

No pude hacer que v5 funcionara, así que volví a 4.7.0 con la ayuda de las publicaciones anteriores y solucionó mi problema.

— Mickers
fuente

1

Tuve problemas para que la v5 + de FontAwesome funcionara también. Había cambiado su carpeta "webfonts" a "fonts" en el CSS, y la había colocado de la misma manera, y no funcionaba correctamente. Reemplazó los archivos con v4.7.0 y funciona como un encanto. Hrm.

— Lisa Cerilli

1

En la versión 5, la familia de fuentes para los iconos ya no es "FontAwesome". En la versión gratuita, ahora es "Font Awesome 5 Free" y "Font Awesome 5 Pro" en la versión pro. Tenía este problema cuando usaba manualmente los códigos de caracteres en algunos lugares y dejaron de funcionar porque la familia de fuentes no estaba configurada.

— Tessa

4

Estaba enfrentando el mismo problema ... así que en lugar de descargar una fuente impresionante, agregué un enlace en mi código html y funcionó.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Expandir fragmento

— Hrithik verma
fuente

Muchas gracias, dedico 24 horas a arreglar este tipo de letra

— Mathew Magante

2

Instalé con éxito Font Awesome usando su CDN y javascript include (como se describe en esta página ). Luego intenté copiar el HTML y CSS a algunas páginas heredadas y de repente vi cuadros cuadrados vacíos en lugar de los iconos.

Vi la respuesta de Daniel (arriba) y debido a que mi archivo CSS heredado era enorme (y tenía años) sospeché que ese era el problema. Sin embargo, cuando miré en Chrome DevTools, realmente parecía que Font Awesome estaba cargado:

Esperaba ver la fuente tachada si había un problema ... Sin embargo, realmente había agotado todas mis opciones, así que verifiqué los Estilos Computados y vi claramente que la fuente Font Awesome definitivamente no se estaba utilizando. (Vea la fuente renderizada en la parte inferior)

Mi archivo CSS heredado era un desastre y preferí no tocarlo, así que hice trampa al hacer esto, no se lo digas a nadie :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

También tenga en cuenta que cuando actualicé Font Awesome versión 4.7.0 a la versión 5.4.1, ¡este problema desapareció! Usé esta guía de configuración y este HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

— Dagmar
fuente

2

Para aquellos de ustedes que usan SCSS y el paquete NPM, aquí está mi solución:

npm i --save @fortawesome/fontawesome-free

Luego, en la parte superior de un archivo SCSS (idealmente un archivo SCSS importado en la raíz de su aplicación):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

— Jeff Diederiks
fuente

Interesante agregar lo @fortawesome/fontawesome-free/css/all.csssolucionó

— Andy Braham

1

En mi caso: debe copiar toda la carpeta font-awesome en la carpeta css de su proyecto y no solo en el archivo font-awesome.min.css .

— sst
fuente

1

Por lo tanto, parece que agregar style='font-weight:normal;'o cambiar la fuente directamente en el elemento anula la .fas{font-weight:900}definición en el archivo CSS de Font Awesome. Supongo que la fuente tiene definiciones específicas dentro del archivo de fuente con el que funciona. Parece que font-weightdebe establecerse entre 501 y 1000, o la fuente puede parecer un bloque cuadrado.

— James Wilkins
fuente

1

mi problema era el que tenía la mayoría de los votos

*{
font-family: xxxxx
}

cambiarlo a esto resolvió el problema

body{
font-family: xxxx
}

— Jamsheer
fuente

0

Es posible que haya utilizado un VCS (git o algo así) para transferir archivos de iconos al servidor. git dice:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Probablemente tengas que arreglar tus fuentes.

— rishta
fuente

0

Creo que no tiene la carpeta de fuentes en su carpeta raíz, como dónde se encuentra la carpeta css.

Manifestación

Y la carpeta css es como

Y carpeta de fuentes como

Espero que funcione para ti.

Gracias.

— Obaidul Haque
fuente

0

En MacOS Mojave, tuve este problema en Safari. Las imágenes de fuentes impresionantes funcionaban en Chrome pero no en Safari, así que estaba seguro de que no era el sitio.

Conseguí que se renderizaran yendo a Preferencias en el menú de Safari y deshabilitando / desmarcando "Prevenir el seguimiento entre sitios" en la pestaña Privacidad.

No estoy seguro de por qué esto lo solucionó, pero lo hizo.

— Michael Shulman
fuente

0

Basado en la versión 5.10.1.

Mi solución (localmente):

Si está usando "fontawesome.css" o "fontawesome.min.css", intente usar "all.css" en su lugar (ubicado en la carpeta css).
La carpeta "css" y la carpeta "webfonts" del paquete fontawesome que descargó deben estar en el mismo nivel que la otra.

En mi caso, ya tenía una carpeta css, así que cambié el nombre de la carpeta css fontawesome a "css-fa".

Con "css-fa" y "webfonts" en mi carpeta css, simplemente vincúlelo correctamente en su editor de texto y debería funcionar.

Por ejemplo: enlace rel = "hoja de estilo" href = "css / css-fa / all.css"

— Tou Toua Yang
fuente

0

resuelto cambiando el importante selector de familia de fuentes * { ... } objetivo de a *:not(i) { ... }

(con preprocesador scss); espero que hayas resuelto

— backciro
fuente

0

El siguiente código es 4.70.0. Para ir a la fuente 5.11.2-impresionante, haga clic aquí .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

— PythonMaster202
fuente

0

Estoy usando FontAwesome Pro y la solución para mí fue incrustar en all.min.csslugar de fontawesome.min.css.

— Bruno Leveque
fuente

0

Estaba siguiendo este tutorial para alojar Font Awesome Pro 5.13 yo mismo.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Por alguna razón, no pude <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">cargar, webfontseso a su vez resultó en que solo aparecieran cuadrados. Pero cuando lo usé <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>todo empezó a funcionar. Ambos enlaces se agregaron en HTML <head>.

— Ogglas
fuente

el problema con este js es que el archivo tiene una carga

— demasiado baja

0

Estaba intentando agregar fa 5.0.13 a drupal 8 con scss. Los estilos no están incluidos por defecto en el fa.scss principal tuvo que agregarlos manualmente.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

— bonkisama
fuente

0

debe poner el archivo de fuente impresionante en la carpeta css y cambiar

href = "../ css / font-awesome.css" a href = "css / font-awesome.css"

Una cosa más: puede reemplazar este archivo css de Font-awesome y probar este

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Expandir fragmento

— sani
fuente

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Expandir fragmento

— De Zin Htang
fuente

Trabajando muy bien con esto

— De Zin Htang

-1

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

— Ronald Namwanza
fuente

-1

¡Cuidado con Bootstrap! Bootstrap anulará las clases .fa. Si trae ambos paquetes por separado pensando "Usaré Bootstrap para el manejo de bloques receptivos y Font-Awesome para los íconos", debe abordar las clases .fa dentro de Bootstrap para que no interfieran con el soporte de Font-Awesome. implementación sola.

Por ejemplo: la familia de fuentes 'FontAwesome' en Bootstrap interferirá con la familia de fuentes 'Font Awesome 5 Free' en Font-Awesome y obtendrá un cuadro blanco en lugar del icono que desea.

Puede haber formas más limpias de manejar esto, pero si ha revisado la lista de verificación tratando de solucionar el problema de la "caja blanca" y aún no puede resolverlo (como lo hice yo), esta puede ser la respuesta que está buscando. para.

— jtubre
fuente

¿Por qué el voto en contra? Es un caso extremo, pero es una causa que no se encuentra fácilmente en otros lugares.

— jtubre

-1

En mi caso, el problema se debió al uso de algunos estilos regulares ( far) que no están incluidos en el conjunto gratuito. Cambiar para fasarreglarlo.

— Yngve Høiseth
fuente