• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Insertar Font Awesome en Wordpress

Insertar Font Awesome en WordPress

Insertar Font Awesome en WordPress

[ 28 julio 2016 ] [ Actualizado: 8 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css librería

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Insertar iconos como fuente (tipo de letra) en lugar de hacerlo con imágenes, es una buena práctica cuando construimos un sitio Web. En este artículo veremos cómo insertar y usar una fuente de iconos Font Awesome en WordPress

 

1- Descarga e Instalación de la fuente

Usaremos Font Awesome como fuente, desde su sitio Web podemos realizar la descarga de la fuente y ver los diferentes iconos que incluye.

FontAwesome

Tras la descarga, descomprimimos el archivo, y usaremos las carpetas de css y fonts, copiamos estas carpetas en el theme WordPress que estamos usando. Si ya tenemos la carpeta CSS simplemente copiamos los archivos.

Para realizar la integración con nuestro sitio usaremos el archivo: font-awesome.min.css, usaremos el siguiente código para hacer referencia a este archivo.


add_action( 'wp_enqueue_scripts', 'fonts_style_sheet' );

function fonts_style_sheet(){
	wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/css/font-awesome.min.css');
}

Este código lo tenemos que insertar en el archivo functions.php de nuestro theme.

 

2- Usar iconos con las clases por defecto

Una vez que hemos comprobado que el archivo font-awesome.min.css está cargado en nuestro sitio, lo verificamos revisando el código fuente de la página, entonces podemos usar directamente los iconos como parte del contenido de nuestros artículos o usarlos en un Widget de texto con HTML.

Al entrar en el detalle de cada icono, desde el sitio de Font Awesome, veremos cómo se puede referenciar por HTML. Por ejemplo, para usar el icono de búsqueda usaremos el siguiente código:


<i class="fa fa-search" aria-hidden="true"></i>

 

3- Usar iconos con nuestras propias clases

Sin embargo, si queremos usar iconos en otras secciones de nuestro sitio, en donde no es posible insertar HTML, entonces usamos CSS. En el siguiente código veremos cómo colocar iconos en los títulos de los Widgets, este código debe ser insertado al final de algún archivo CSS que ya este cargando nuestro theme, por ejemplo el archivo style.css


.widgettitle:before{
 font-family: "FontAwesome";
 content:"\f005";
 margin-right: 10px;
}

En el código anterior :

  • La clase widgettitle usa el selector before el cual inserta contenido antes del HTML que tiene esta clase.
  • Se asigna el tipo de fuente o tipo de letra con font-family, el tipo de letra usado es Font Awesome
  • Luego se agrega el ícono que se desea mostrar, se usa content, el valor asignado “\f005” se encuentra en el archivo font-awesome.css descargado.
  • Finalmente se asigna un margen para que exista una separación del título con el ícono insertado.

 

4- Usar iconos desde PHP

Algunos themes cuentan con snippets, o porciones de código, que permiten realizar modificaciones a ciertas partes del theme, por ejemplo en el caso de los themes genesis, para personalizar el formulario de búsqueda, podemos seguir la documentación del siguiente enlace.

Si tomamos como ejemplo el código de cómo personalizar el texto del placeholder, nuestro código con el icono insertado sería:


//* Customize search form input box text

add_filter( 'genesis_search_text', 'sp_search_text' );

function sp_search_text( $text ) {
 return esc_attr( '&#xf002;' );
}

En el código anterior:

  • Se usa el snippet para insertar el texto de placeholder, pero en lugar de un texto será un icono.
  • La funcion sp_search_text() retorna una cadena que será el placeholder.
  • El valor retornado pasa a través de la función esc_attr().
  • El caracter usado será en formato Unicode, se agrega los caracteres &#x delante del valor del content del icono.
  • El valor del content del icono lo obtenemos del archivo font-awesome.css descargado.

 

¿Sigues con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar archivos de fuentes tipográficas en WordPressAgregar archivos de fuentes tipográficas en WordPress
  • Dashicons en WordPress¿Cómo usar Dashicons en WordPress?
  • Personalizar Página error 404 en WordPressPersonalizar la página de error 404 en WordPress
  • Clases CSS basadas en el Rol de usuario en WordPressClases CSS basadas en el Rol de usuario en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 4,50 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Eriberto

    8 junio, 2022

    Hola como podria implementar agregar iconos en menu de categorias diferentes iconos por categorias utilizo el tema impreza https://clavellina.cl/tienda/

    • Jhon Marreros Guzmán

      9 junio, 2022

      De manera general, si ya tienes la fuente de íconos cargada entonces tendrías que identificar el código CSS del icono que quieres para un ítem específico y luego usar eso en una nueva regla CSS. Algo como:

      .w-filter-item-values a label span:last-child:before{
          font-family: "fontawesome";
      }
      .w-filter-item-values a:nth-child(1) label span:last-child:before{
        content: "\f002";
        margin-right: 10px;
      }
      

      Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar login y logout en un menú de WordPress

Desactivar las notificaciones de actualización en WordPress

Centrar Logo en Menú Principal

Relación bidireccional entre diferentes tipos de contenido con ACF

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados