Cómo utilizar Font Awesome en su sitio web de WordPress

Cuando se le da la opción de usar un icono de vector o una imagen estática, es una buena idea ir con el vector. Son pequeños y rápidos de cargar, y pueden escalar a cualquier tamaño sin pérdida de resolución. Font Awesome es una excelente biblioteca de íconos vectoriales que puede usar en sus sitios web, y probablemente tengan casi cualquier forma o marca que necesite. ¿Y lo mejor de todo? Es gratis. En segundo lugar, lo mejor de todo es que es fácil.

Suscríbete a nuestro canal de Youtube

Font Awesome Iconos de WordPress

Usar la biblioteca Font Awesome en su sitio de WordPress es relativamente sencillo. Una vez que siga estos sencillos pasos, podrá reducir el tiempo de carga de la página y crear algunos diseños realmente limpios y nítidos utilizando estos iconos como parte de su trabajo.

Una cosa para recordar es que (la mayoría de las veces) los íconos de Font Awesome se enviarán a su sitio como fuentes reales. De ahí el nombre de Font Awesome. Podrá diseñarlos y manipularlos de todas las formas que normalmente haría con un carácter de fuente, utilizando CSS a través de @ font-face y la familia de fuentes Font Awesome.

Por eso, no tendrá que preocuparse por el tamaño o el espaciado de cada navegador o ventana gráfica individual. Si suena genial, es porque lo es. Y así es como lo haces:

Instalación de Font Awesome

Si bien existe una forma manual de instalar y usar Font Awesome, existe una mejor manera para los usuarios de WordPress. La buena gente de FA ha lanzado un complemento oficial de WordPress Font Awesome, y funciona a la perfección.

Con el complemento instalado y activado, ahora tiene acceso al código corto [[nombre del icono]], así como a los fragmentos de código HTML. Siempre que tenga a mano la lista de íconos FA útiles para saber exactamente qué ícono necesita. Verá en la página de configuración del complemento (que se encuentra en Configuración - Font Awesome ) cómo se configuran las cosas de forma predeterminada. En general, estos están bien para guardar y usar. La mayoría de la gente no necesitará nada más.

La opción Método es probablemente la más importante para la mayoría de la gente. Puede alternar entre Webfont o SVG . Si bien SVG le brinda más potencia y funciones (como transformaciones de energía y enmascaramiento), Font Awesome CDN entregará los íconos como archivos SVG y no como una fuente. Si bien eso es mejor de alguna manera, el SVG no es reconocido por tantos navegadores, ni WordPress siempre funciona bien con imágenes SVG. Por lo tanto, sugerimos ir a lo seguro con la versión de fuente web.

También lo hace Font Awesome, para el caso: si no está seguro de la diferencia, o no sabe por qué necesitaría usar SVG, entonces seguir con el método de fuente web predeterminado es probablemente lo más fácil.

Para usar los íconos de Font Awesome en su sitio de WordPress, es simple. Simplemente agregue <i class = ”fab fa-wordpress”> </i> en cualquier lugar donde desee que aparezca un ícono. Asegúrese de consultar la biblioteca de iconos para saber qué nombre poner.

Nota: los códigos cortos en el complemento son impredecibles. Algunos iconos se representan perfectamente, mientras que otros se muestran en blanco. Le recomendamos que se ciña a la inserción HTML a menos que vea que el código abreviado funciona para usted. Vea a continuación un ejemplo del ejemplo de WordPress anterior que no se renderiza, mientras que el icono de la cámara sí lo hace.

Y tu estas listo. El complemento Font Awesome de WordPress es ideal para las personas que no se sienten cómodas al ingresar a su tema o archivos para insertar el código que de otro modo sería necesario. Sin embargo, si se siente cómodo haciéndolo, puede seguir estas instrucciones para obtener los iconos de Font Awesome en su sitio.

Instalación manual de iconos de Font Awesome

Lo primero que debe hacer es ir al sitio web de Font Awesome. Desde allí, haga clic en el botón Comenzar a usar gratis . Ofrecen planes pagos para personas que tienen sitios de alto tráfico y necesitan una solución empresarial, pero el público en general puede salirse con la suya con la versión gratuita. Obtienes 1500 iconos gratis y más de 5000 variantes en el plan Pro.

El siguiente paso es simplemente copiar / pegar. Pero querrá asegurarse de haber resaltado la opción de fuente web, tal como lo discutimos antes.

La mayoría de los temas tienen un lugar para que inserte código en el <head> del sitio automáticamente. En el caso de Divi, por ejemplo, iría a Opciones de tema - Integraciones y pegaría este código en el campo etiquetado Agregar código al encabezado de su blog .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Cuando presiona guardar, puede comenzar a incluir cualquiera de los íconos que desee, tal como lo hicimos anteriormente. Solo que no tiene acceso al shortcode al hacer esto.

Si su tema no admite la integración de código

Si no puede encontrar un lugar como este en su tema, también es tan fácil de hacer manualmente. Sin embargo, tendrá que profundizar en los archivos principales de su tema para hacerlo, pero es una copia / pegado muy rápido y (generalmente) bastante seguro de hacerlo. Vaya a Apariencia - Editor en su panel de WP y busque el archivo header.php .

Busque la línea donde está escrito </head> y, antes, debe pegar el mismo código de Font Awesome. Presione Actualizar archivo y podrá comenzar a usar los íconos FA inmediatamente. Nuevamente, no obtienes un código corto al instalar Font Awesome de esta manera.

Además, tenga en cuenta que cada vez que edita un archivo de tema, desea utilizar un tema hijo. Al hacerlo, evita que los cambios que ha realizado se sobrescriban cuando se actualiza el tema.

Más opciones de instalación

Y si tiene otras necesidades más específicas para Font Awesome, ofrecen una gran cantidad de formas de acceder a la biblioteca. Desde las instalaciones de NPM y Yarn, hasta la integración de Sketch y React, tienen un montón de opciones si las necesita para algo más que WordPress.

Estilo de fuente Awesome Icons

Ahora que los tiene instalados, es hora de que aparezcan los iconos. Puede hacer esto usando CSS porque cada uno de los íconos se rige por una clase CSS. Los dos estilos más utilizados son el color y el tamaño. Puede incluir el estilo CSS en sus hojas de estilo o puede hacerlo en línea. En general, es posible que desee usar estilos en línea porque los íconos como estos no tienden a ser universales en todo el sitio.

El sitio web de Font Awesome tiene ejemplos de cómo hacer esto. Muestran el tamaño usando su ícono de iglú y la clase adicional como fa-xs o fa-xl o fa-2x para un tamaño específico.

Además, si necesita que el icono sea relativo a un tamaño específico y los valores absolutos no funcionan, puede colocarlo en su propio <div> para que funcione dentro de sus limitaciones.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Terminando

¡Y eso es! Impresionante, ¿verdad? Ya sea que esté utilizando el complemento de WordPress Font Awesome o insertando el código manualmente, no se necesitan más que unos pocos pasos para que su sitio esté en funcionamiento. Font Awesome es popular por una razón, y parte de eso proviene de su facilidad de uso. ¡Así que sal y sé increíble!

¿Cuál es tu forma favorita de usar los iconos de Font Awesome?

Imagen destacada del artículo cortesía de Font Awesome