TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo arreglar los iconos de Font Awesome que se muestran como caja?

15

En el desarrollo web, es común usar iconos de fuentes en formato SVG en lugar de escribir símbolos usando entidades de escape. Por ejemplo, los iconos de Font Awesome son los más populares debido a la escalabilidad de los iconos sin perder calidad. Sin embargo, si no implementa correctamente la fuente, los iconos impresionantes se mostrarán como un cuadro. Si tiene problemas con los iconos de fuentes, consulte cómo solucionarlos.

Uso de iconos de Font Awesome en el sitio web

Hay dos formas de utilizar iconos de fuentes en su sitio web. Una es usar en etiquetas HTML y otra es usar pseudoclases CSS. En ambos métodos, debe vincular la fuente de origen con un CSS impresionante y alojar los archivos de fuentes en su servidor para que se puedan aplicar los estilos adecuados a los íconos. A continuación se muestra un ejemplo del uso de fuentes impresionantes en HTML:

¿Cómo arreglar los iconos de Font Awesome que se muestran como caja?

Usando Font Awesome

Consulte este artículo del sitio oficial sobre cómo usar iconos de fuentes en su sitio web. Cuando falta algo al cargar, verá el cuadro como el siguiente en lugar del icono.

¿Cómo arreglar los iconos de Font Awesome que se muestran como caja?

Caja de siembra de icono de fuente

¿Por qué Font Awesome Icons se muestra como un cuadro?

Para insertar un icono de fuente en su sitio, debe tener lo siguiente:

  • Aloja fuentes en tu servidor
  • Enlace fuente correcta impresionante versión CSS
  • No hay conflicto con versiones antiguas y nuevas en el mismo sitio.
  • Compruebe la familia de fuentes correcta
  • Use la clase CSS adecuada
  • Verifique el peso de la fuente
  • Verifique el código de contenido CSS

Echemos un vistazo al punto de facilidad en detalle.

1 fuentes de host en su servidor

Para utilizar Font awesome en su sitio web, es necesario alojar los archivos de fuentes también en el mismo directorio. Todos los tipos de letra de fuente web deben estar disponibles en la carpeta “/ webfonts" y referenciarse en el CSS ubicado en la carpeta “/ css”.

En la mayoría de los casos, el tema o complemento que utilice instalará todos los archivos CSS y de fuentes necesarios en su servidor. Este es el caso, especialmente cuando usa WordPress para su sitio web.

2 Enlace la versión CSS correcta

Font awesome estuvo disponible de forma gratuita hasta la versión 4.70. Sin embargo, hay versiones gratuitas y profesionales disponibles a partir de la versión 5.0. Aunque la versión 4.70 estaba desactualizada, la mayoría de los complementos y temas gratuitos todavía usan 4.70 debido a la clase CSS uniforme y la facilidad de uso. Sin embargo, la versión 5.0 tiene marcas y estilos sólidos para usuarios gratuitos y puede usar all.css para incluir ambos estilos.

Puede registrarse en el sitio de Font awesome para obtener un kit CDN o usar los archivos CDN disponibles en Cloudflare.

¿Cómo arreglar los iconos de Font Awesome que se muestran como caja?

Obtenga Font Awesome CDN Kit

3 versiones de CSS en conflicto

Uno de los problemas que enfrentamos con un sitio de WordPress es que un complemento usaba la versión 4.70 y el tema usaba la 5.0. Esto estaba causando el conflicto debido a códigos de contenido y clases de CSS incompatibles. Por lo tanto, asegúrese de utilizar la última versión 5.0 con el archivo fuente CSS adecuado en su sitio.

¿Cómo arreglar los iconos de Font Awesome que se muestran como caja?

Iconos de fuentes que se muestran como cuadro

4 Utilice la familia de fuentes correcta

Para usar una fuente impresionante con CSS, debe usar la familia de fuentes adecuada. A continuación se muestra el tipo de código CSS utilizado en la versión 4.70.

.li: antes de {
contenido: “00A3 ″; familia de fuentes: "FontAwesome"; font-weight: normal; }

Sin embargo, esto mostrará un cuadro en lugar de un icono con la versión 5.0. debe utilizar el siguiente CSS con la versión gratuita de la versión 5.0.

.li: antes de {
contenido: “00A3 ″; familia de fuentes: ” Font Awesome 5 Free “; peso de fuente: 900 ; }

Por lo tanto, asegúrese de utilizar la familia de fuentes "Font Awesome 5 Free" correcta en el CSS. Además, si está utilizando íconos sociales, la familia de fuentes debería ser "Font Awesome 5 Brands". Estas son las dos familias de fuentes disponibles para usuarios gratuitos.

5 Utilice el prefijo de estilo CSS adecuado

Otra confusión es que la versión 5.0 tiene diferentes clases de CSS que las versiones anteriores. En la versión 4.7, puede usar el prefijo de estilo fa como se muestra a continuación:

<i class = “fa fa-camera”>

Sin embargo, esto no funcionará con la versión 5.0 en adelante. El prefijo de estilo fa quedó obsoleto y debes usar fas para íconos sólidos y fab para íconos de marca social como Facebook.

6 Compruebe el peso de la fuente

Font awesome versión 5.0 no es compatible con la declaración general "font-weight: normal" en CSS. Debe declarar un peso de fuente específico para que aparezca el icono.

7 Compruebe el código de contenido CSS

El último punto es asegurarse de que el código de contenido utilizado en CSS sea correcto. Tienes que usar uno de los códigos disponibles en el sitio impresionante de fuentes en el pseudo elemento CSS. Además, asegúrese de utilizar el código en el formato "f00d"; para mostrar el icono correctamente.

Resumen

A continuación se muestra el resumen de la familia de fuentes, el peso de la fuente, el prefijo de estilo y los estilos disponibles para usuarios profesionales y gratuitos. Debe asegurarse de que todos estos sean correctos para que aparezca el icono en lugar de un cuadro.

Estilo Disponibilidad Peso de fuente Prefijo de estilo Familia de fuentes
Sólido Gratis 900 haces Font Awesome 5 Gratis o Font Awesome 5 Pro
Regular Pro 400 lejos Font Awesome 5 Pro
Luz Pro 300 fal Font Awesome 5 Pro
Duotono Pro 900 moda Font Awesome 5 Duotone
Marcas Gratis 400 fabuloso Font Awesome 5 marcas

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More