Cómo agregar íconos FontAwesome en WordPress

No cabe duda de que los humanos somos seres muy visuales. Por eso, no solo nos centramos en el contenido, sino también en el diseño visual de un sitio web.

Tradicionalmente, los diseñadores y desarrolladores web de todo el mundo usaban imágenes y sprites de imágenes para agregar iconos a cualquier sitio web.

Estos íconos se usaron luego como una adición visual en todo el sitio: en el menú de navegación, la barra de búsqueda, los íconos de carga en los controles deslizantes y similares.

Tan conveniente como era este método, tenía varios inconvenientes. Estos inconvenientes se hicieron evidentes cuando entró en juego el diseño receptivo, que hizo que estas imágenes parecieran recortadas o incluso completamente borrosas.

La respuesta a este problema son los símbolos escritos. Muestran íconos totalmente sensibles y personalizables que agregarán algo extra al diseño de su sitio web. Básicamente, se trata de fuentes formadas por símbolos.

Una de esas fuentes es FontAwesome. Y hoy le mostraré cómo agregar fácilmente iconos de FontAwesome a su sitio web de WordPress.

FontAwesome

Lo que aprenderá en este tutorial

  • ¿Qué son las fuentes de símbolos y por qué debería utilizarlas?
  • Cómo agregar fuentes de iconos a WordPress usando complementos
  • Cómo agregar fuentes de iconos a WordPress manualmente WordPress

¿Qué son las fuentes de iconos y por qué debería usarlas?

Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Se pueden cambiar de tamaño fácilmente con CSS y no aumentarán los tiempos de carga de su página, a diferencia de los sprites de imágenes que se usaban en el pasado.

Puede usarlos para agregar iconos a sus menús de navegación, paneles de funciones, títulos de publicaciones y más.

Hay varias razones por las que debería utilizar una fuente de símbolo diferente a la apariencia visual:

  • Los íconos de fuentes responden completamente: son esencialmente archivos vectoriales, lo que significa que se pueden escalar a cualquier tamaño sin pérdida de calidad.
  • Los símbolos de fuente se pueden diseñar, colocar y manipular: dado que se trata de fuentes, puede editarlos como una fuente tradicional. Establezca su color, cambie su estilo al mover el mouse, controle su orientación, tamaño y más.
  • Los íconos de fuentes son altamente compatibles en todos los navegadores, y hay muchos de ellos.
  • Los diseñadores han pasado muchas horas con estos íconos y se actualizan regularmente y tienen como objetivo brindar la mejor experiencia.

Hay dos formas de agregar FontAwesome a su sitio web de WordPress y vamos a pasar por ambos métodos. El primer método implica el uso de un complemento y el segundo implica agregar la fuente manualmente.

Opción 1 – Agregar fuentes de iconos en WordPress usando complementos

El uso de un complemento es, con mucho, la forma más fácil de agregar cualquier símbolo de fuente a su sitio web. En este ejemplo, usamos Better Font Awesome para agregar la fuente al sitio web.

Paso 1: instalar y activar

Lo primero que debe hacer es instalar y activar el complemento Better Font Awesome.

Navegue a su panel de control, luego haga clic en Complementos> Agregar nuevo. Busque FontAwesome y luego haga clic en Instalar.

Finalmente activa el complemento. Una vez activado, puede visitar la página Configuración> Mejor fuente impresionante para configurar los ajustes del complemento. En la mayoría de los casos, esto no es necesario, ya que el complemento está listo para usar de inmediato, por lo que no tiene que cambiar nada allí.

Paso 2: agregar sus símbolos de fuente

Better Font Awesome le permite agregar símbolos de fuente con diferentes códigos cortos como estos:

[icon name=”binoculars”]

[icon name=”gift”]

[icon name=”map”]

Los íconos también se pueden agregar en el editor de publicaciones simplemente seleccionando el ícono deseado. Ahora, cuando cree una nueva publicación, verá un nuevo icono en su editor de publicaciones. Al hacer clic en él, aparecerá una ventana emergente donde puede encontrar y pegar un icono.

Agregar FontAwesome a una publicación

Paso 3: personaliza tus símbolos de fuente

El complemento agregará un código corto a su publicación. Si desea personalizar aún más el icono, puede hacerlo agregando su propia clase CSS y luego ingresando los estilos específicos en su hoja de estilo.

El código abreviado predeterminado se ve así:

[icon name=”coffee” class=”” unprefixed_class=””]

Una vez que haya agregado una clase para fines de estilo, se verá así:

[icon name=”coffee” class=”” unprefixed_class=””]

Una vez que haya agregado una clase para fines de estilo, se verá así:

[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]

Para darle estilo, vaya a Apariencia> Editor y abra la hoja de estilo de su tema. Agrega las siguientes líneas:

i.fa.fa-coffee.fa-mycoffeeicon {

font-size:100px;

color:#ba1157;

}

Tan simple como eso.

FontAwesome en la publicación

Ahora veamos cómo agregar FontAwesome manualmente.

Opción 2: agregar fuentes de iconos manualmente en WordPress WordPress

Las fuentes de iconos no son más que fuentes compuestas por iconos. Como tales, se pueden agregar fácilmente, tal como agregaría fuentes personalizadas. Algunas fuentes de iconos como FontAwesome están disponibles en servidores CDN en la web y se pueden vincular directamente desde su tema de WordPress.

También puede cargar todo el directorio de fuentes en una carpeta en su tema de WordPress y luego usar esas fuentes en su hoja de estilo.

Cubramos ambos métodos aquí.

Método 1: agregar código al archivo header.php de su tema

El método más simple es agregar una línea al archivo header.php de su tema, justo antes del Etiqueta.

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

Si bien este es el método más fácil, en realidad no es el método correcto de WordPress y puede entrar en conflicto con otros complementos. Un enfoque mucho mejor es organizar correctamente la hoja de estilo en WordPress a través de su archivo functions.php.

Haga clic en Ver> Editor y luego seleccione su archivo functions.php. Al final, agregue las siguientes líneas:

function ala_load_fa() {

wp_enqueue_style( 'ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Cuando haya terminado, haga clic en Actualizar archivo.

Método 2: agregue iconos de fuentes al directorio de su tema de WordPress

El segundo método le permite tener los iconos disponibles en su diseño e implica un poco de trabajo preliminar. Primero debe descargar la fuente del icono y descomprimir el paquete. Luego use un programa como FileZilla para conectarse a su sitio web a través de FTP.

Vaya al directorio de su tema de WordPress, cree una nueva carpeta y asígnele el nombre fuentes o fontawesome.

Cree una carpeta de fuentes en cPanel

Luego, cargue el contenido de las fuentes de símbolos en la carpeta que acaba de crear.

Subir desde FontAwesome

Una vez hecho esto, deberá agregar las fuentes a su tema de WordPress. Simplemente agregue este código al archivo functions.php de su tema.

function ala_load_fa() {

wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Haga clic en el archivo de actualización y habrá cargado FontAwesome con éxito en su tema de WordPress.

La parte final es agregar íconos a su tema, publicaciones o páginas de WordPress.

Puede hacer esto manualmente pegando el nombre del símbolo en cualquier lugar donde desee que aparezca.

Visite el sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haga clic en cualquier icono que desee utilizar y podrá ver el nombre del icono. Haga clic en Copiar para copiar el nombre del icono y luego péguelo en su publicación o editor de página:

<i class="fa-coffee"></i>

También puede personalizar el icono en la hoja de estilo como se describe arriba.

También puede combinar diferentes símbolos entre sí y diseñarlos todos a la vez. Esto es útil si, por ejemplo, desea hacer una lista de enlaces con iconos junto a ellos. Simplemente envuélvalo debajo de un div con una clase específica como esta:

<div class="my-icons">
<a class="icons-group-item" href="https://www.kakebo.net/fontawesome-icons-tutorial/#"><i class="fa fa-apple fa-fw"></i>Home</a>
<a class="icons-group-item" href="https://www.kakebo.net/fontawesome-icons-tutorial/#"><i class="fa fa-bars fa-fw"></i>Library</a>
<a class="icons-group-item" href="https://www.kakebo.net/fontawesome-icons-tutorial/#"><i class="fa fa-asterisk fa-fw"></i>Applications</a>
<a class="icons-group-item" href="https://www.kakebo.net/fontawesome-icons-tutorial/#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Ahora puede formatearlos en la hoja de estilo de su tema de la siguiente manera:

.icons-group-item i {

color: #333;

font-size: 50px;

}

.icons-group-item i:hover {

color: #ba1157;

}

Pensamientos finales

En un tutorial anterior, le mostramos cómo agregar y usar dashicons en WordPress. Agregar FontAwesome es bastante similar. Esta es una excelente manera de agregar interés a su sitio web, y hay muchas formas de usar fuentes de iconos.

Puede usarlos para diseñar su menú de navegación o agregarlos a los títulos de las publicaciones. Puede usarlos en sus publicaciones si desea llamar la atención sobre algo importante.

Incluso puede agregarlos a sus widgets, ya que los widgets aceptan entrada HTML. ¿Está pensando en cuánto más podría ser su widget de boletín si le agrega un ícono de sobre? O si usa un cuadro de autor, puede usar FontAwesome para mostrar sus perfiles de redes sociales.

Lo mejor de todo es que no importa qué dispositivo o navegador estén usando sus visitantes, sus visitantes siempre pueden ver íconos nítidos y atractivos.

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad