Saltar al contenido

Iconos de Font-Awesome que se muestran como cuadros cuadrados

Solución:

Después de leer las respuestas en esta página, obtuve mi propio código funcionando al vincularlo al CDN según otras sugerencias. Sin embargo, lo que realmente quería era agregar la carpeta Font Awesome a mi proyecto y vincularlo al archivo del proyecto. Cuando estudié el enlace a la CDN, noté que usaba una ruta que terminaba en css / all.css. Me di cuenta de que la carpeta que había descargado y descomprimido incluía un archivo all.css junto con el archivo fontawesome.css, que parece ser un cambio a partir de -v 5.0. Cambié mi enlace de:

<link rel="stylesheet" href="https://foroayuda.es/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css"> 

para:

<link rel="stylesheet" href="https://foroayuda.es/fonts/fontawesome-free-5.3.1-web/css/all.css">

Y funcionó.

También aprendí por las malas que el enlace Font Awesome debe colocarse encima del enlace al archivo main.css del proyecto.

Tuve el mismo problema, donde algunos de los íconos aparecían como cuadros cuadrados.

solo sucedió con una referencia local de fuente impresionante para mi aplicación web.

cuando investigué la URL, vi que también había fuentes web que debían cargarse (no solo el archivo css en sí):

y luego guarde las fuentes web con un clic derecho – abra una nueva pestaña:

y mueva esos archivos a su carpeta de fuentes web. (en mi caso, tuve que sobrescribir las fuentes web existentes, es por eso que muestra los cuadros cuadrados en primer lugar).

y el problema resuelto!

Para los usuarios Pro, verifique que tenga un enlace CDN actualizado para fontawesome, al momento de escribir esto, la versión más reciente es 5.11.2. La actualización del enlace cdn de https://fontawesome.com/account/cdn resolvió mi problema. Publicando un ejemplo aquí con un atributo de integridad ficticio, no use este enlace, debe tener su propio enlace con una integridad de subrecursos única.

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous">
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *