Instalar Font Awesome en WordPress

Como dicen que la imagen es la primera impresión aqui les presento unos iconos increíbles que nos van a facilitar el diseño de nuestra web y mejorar la carga del sitio, ya que estos icono no son tratados como imágenes sino como tipografías o fuentes vectoriales, son escalables a cualquier tamaño sin que pierdan calidad, lo que significa que se los verá bien en todos los dispositivos.

Los iconos Font Awesome fueron diseñados originalmente para Bootstrap, pero actualmente los puede utilzar cualquier persona que le agrade el diseño o los necesite ya que Font Awesome es un proyecto Open Source con licencia GPL.

fontawesome

Estos iconos son personalizables es decir se pueden cambiar de tamaño, color, incluso si sabes CSS se puede insertar sombras y animaciones. Ahora vamos a ver como instalar en nuestro WordPress, que puede ser desde un plugin o manualmente, esta última solución es la que yo prefiero para no cargar al sitio de tanto código y disminuir el tiempo de carga.

Antes de realizar cualquier modificación a nuestro sitio es importante hacerle un respaldo, por cualquier eventualidad.

INSTALAR FONT AWESOME CON PLUGIN

Better Font Awesome: Este plugin en cuanto lo activas ya aparece en tu editor de texto de páginas y entradas e inclusive en el editor de widgets, pero previamente debes tener instalado el plugin Black Studio TinyMCE Widget.

better Font Awesome

 

INSTALAR FONT AWESOME MANUALMENTE

Existen dos formas de acceder a estos iconos, una es instalandolos en nuestro servidor web y la otra utilizando el CDN de Bootstrap en donde se encuentran alojados originalmente.

Para instalar en  nuestro servidor debemos realizar lo siguiente:

1.    Debes descargar desde su sitio oficial  este archivo: Iconos Font Awesome

2.    Descomprimir el archivo zip que acabamos de descargar

3.    A través de un programa FTP, en mi caso utilizo Filezillas, nos conectamos con nuestro sitio y vamos a la plantilla instalada asi: public_html/wpcontent/themes/tuplantilla aqui descargamos las carpetas CSS y FONTS del archivo que lo descomprimimos.

instalar-fontawesomeenwordpress

De pronto te puede ocurrir que ya existe en la plantilla la carpeta CSS, lo que debes hacer es abrirla y copiar aqui los archivos que se encuentran dentro de la carpeta CSS del archivo de Font Awesome, para que no se sobreescriba el código. .

4.   Vamos al escritorio de wordpress – apariencia – editor- function.php y copiamos el siguiente código:

add_action( ‘wp_enqueue_scripts’, ‘add_font_awesome’ );

function add_font_awesome() {

if ( !is_admin() ) {

wp_enqueue_style( ‘font-awesome’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/css/font-awesome.min.css’, array(), ‘4.5.0’ );

}

}

 

Utilizando el CDN de Bootstrap

Esta es una buena opción para acelerar nuestro sitio web ya los iconos se encuentra en una CDN que es una red de servidores repartidos por todo el mundo diseñados para entregar en caché(en forma estática) el contenido de sitios web a los visitantes, de esta forma los iconos se cargan rápido y no usamos nuestro servidor y como estos iconos son usados por muchos sitios, es muy probable que se encuentre en el caché de nuestros visitantes. Para esto, no es necesario descargar ningún archivo, ni realizar las subida de este por FTP, ya que utilizamos los servicios de Maxcdn que aloja de forma gratuita en su CDN los archivos de Bootstrap. Lo que debemos hacer es copiar el siguiente código en el archivo function.php de nuestra plantilla.

add_action( ‘wp_enqueue_scripts’, ‘add_font_awesome’ );

function add_font_awesome() {

 

wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );

 

}

Si lo hacemos por FTP lo encontramos en public-/wp-content/themes/tuplantilla/function.php. Si lo hacemos por el escritorio de WordPress vamos a apariencia – editor- function.php Una vez realizado uno de los dos procedimientos anteriores, ya puedes insertar Font Awesome, para esto vamos al siguiente link y escogemos el icono le damos click y nos aparece el código, este lo copiamos en nuestro editor de texto, en el proximo tutorial te indicaré la forma de darle estilo a los iconos.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.