Cómo agregar fácilmente fuentes de iconos en su tema de WordPress

¿Desea añadir fuentes de iconos en su sitio WordPress? Recientemente uno de nuestros usuarios nos preguntó cuál es la manera más fácil de añadir fuentes de iconos en su tema de WordPress. Iconos de fuentes que le permiten añadir iconos vectoriales sin ralentizar su sitio web. En este artículo, le mostraremos cómo añadir fácilmente fuentes de iconos en su tema de WordPress.

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

Las fuentes de los iconos contienen símbolos o pictogramas en lugar de letras y números. Estos pictogramas pueden ser fácilmente redimensionados usando CSS sin aumentar significativamente el tamaño de descarga de su página.

Las fuentes de iconos se pueden utilizar para mostrar símbolos de uso común. En un sitio web típico, puede utilizarlos para su carro de la compra, botones de descarga, cuadros de características, deslizadores, botones de medios sociales e incluso en los menús de navegación de WordPress.

Hay varias fuentes de iconos gratuitas y de código abierto disponibles con cientos de iconos. De hecho, cada instalación de WordPress viene con el conjunto de fuentes del icono de los dashicons gratuitos. Estos iconos se utilizan en la barra de herramientas de administración de WordPress dentro del área de administración.

Algunas otras fuentes de iconos populares son:

  • Font Awesome
  • Genéricos
  • IcoMoon
  • Lineares

Por el bien de este tutorial, usaremos FontAwesome. Es la fuente de iconos más popular, gratuita y de código abierto disponible, y también la usamos en nuestro generador de OptinMonster.

Vamos a cubrir dos maneras de añadir fuentes de iconos en WordPress. El primer método utilizará un plugin, y el segundo le mostrará cómo añadir una fuente de icono sin un plugin.

Agregar fuentes de iconos en WordPress usando plugins

FontAwesome y otras fuentes de iconos gratuitas son compatibles con muchos plugins de WordPress. El uso de un plugin te permite añadir fácilmente una fuente de icono a cualquier tema de WordPress sin modificar ningún código.

Lo primero que tienes que hacer es instalar y activar el plugin Better Font Awesome. Tras la activación, puede visitar la página Settings " Better Font Awesome para configurar la configuración del plugin. Sin embargo, el plugin funciona desde el primer momento, por lo que la mayoría de los usuarios no necesitan cambiar nada allí.

Better Font Awesome le permite agregar iconos de fuentes usando atajos como este:

icon name="rocket"]

icon name="cloud"]

icon name="headphones"]

También puedes añadir los iconos en el editor de mensajes simplemente seleccionando un icono. Cree un nuevo mensaje o edite uno existente, y verá el botón Insertar icono .

Al hacer clic en él se abrirá una ventana emergente en la que podrá localizar un icono e insertarlo.

Notarás que el plugin agregará un código abreviado en tu editor de post que se verá así:

icon name="university" unprefixed_]

Si desea personalizar aún más el icono, puede añadir su propia clase CSS para añadir estilos personalizados.

icon name="university" unprefixed_]

Ahora puede cambiar el estilo del icono usando CSS en la hoja de estilo de su tema o de su tema hijo.

1234.fa-universityicon { tamaño de fuente:100px;color:#FF6600;}

Es así de simple.

Ahora echemos un vistazo a cómo puede añadir fuentes de iconos en WordPress sin necesidad de un plugin.

Adición manual de fuentes de iconos en WordPress

Como mencionamos anteriormente, las fuentes de iconos son sólo fuentes y se pueden añadir a su sitio como si fueran fuentes personalizadas.

Algunas fuentes de iconos como Font Awesome, están disponibles en servidores CDN a través de la web y se pueden enlazar directamente desde el tema de WordPress.

También puedes subir todo el directorio de fuentes a una carpeta en tu tema de WordPress y luego usar esas fuentes en tu hoja de estilo.

Ya que estamos usando Font Awesome para este tutorial, le mostraremos cómo puede agregarlo usando ambos métodos.

Método 1:

Este es el más fácil. Todo lo que tienes que hacer es añadir esta única línea de código en el archivo header.php de tu tema justo antes de la etiqueta.

1

Este método es el más simple, pero puede causar conflictos con otros plugins.

Un mejor enfoque para cargar hojas de estilo o scripts en WordPress es encolarlas correctamente.

En lugar de enlazar con la hoja de estilo de la plantilla de encabezado de su tema, puede agregar el siguiente código en el archivo functions.php de su tema o en un plugin específico del sitio.

1234567functionwpb_load_fa() { wp_enqueue_style( wpb-fa, https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); } add_action( wp_enqueue_scripts, wpb_load_fa);

Método 2:

El segundo método no es el más fácil, pero le permitiría tener las fuentes dentro de su tema.

Simplemente descargue las fuentes de los iconos y descomprima el paquete. Ahora necesitarás conectarte a tu sitio web usando un cliente FTP e ir al directorio de tu tema de WordPress.

Necesita crear una nueva carpeta allí y darle un nombre a las fuentes. A continuación, debe cargar el contenido de la carpeta de fuentes de iconos en el directorio de fuentes de su servidor.

Ahora está listo para cargar fuentes de iconos en su tema de WordPress. Simplemente agregue este código al archivo functions.php de su tema o en un plugin específico del sitio.

1234567functionwpb_load_fa() { wp_enqueue_style( wpb-fa, get_stylesheet_directory_uri() . /fonts/css/font-awesome.min.css); } add_action(wp_enqueue_scripts, wpb_load_fa);

Has cargado con éxito Font Awesome en tu tema de WordPress.

Ahora viene la parte en la que agregarás iconos reales en tu tema, mensajes o páginas de WordPress.

Visualización manual de fuentes de iconos en WordPress

Vaya al 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.

Copia el nombre del icono y úsalo así en WordPress.

1

Puede cambiar el estilo de este icono en la hoja de estilo de su tema de esta manera:

1234.fa-optin-monster { tamaño de fuente:50px; color:#FF6600; }

También puedes combinar diferentes iconos y darles estilo a la vez. Por ejemplo, digamos que desea mostrar una lista de enlaces con iconos junto a ellos. Puede envolverlos bajo un elemento con una clase específica.

123456 Home Biblioteca Aplicaciones Configuracióndiv>>

Ahora puedes darle estilo en la hoja de estilo de tu tema de esta manera:

1234567.iconos-elemento-grupo i { color: #333; tamaño de fuente: 50px; } .icons-group-item i:hover { color: #FF6600}

Esperamos que este artículo le haya ayudado a aprender a añadir fácilmente fuentes de iconos en su tema de WordPress. También puede echar un vistazo a nuestro tutorial sobre cómo añadir iconos de imágenes con menús de navegación en WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

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

Subir