---
title: "Zerif Lite: ¿Cómo cambiar los iconos de los miembros del equipo?"
url: https://caribdis.net/2016/06/19/zerif-lite-cambiar-iconos-miembros-del-equipo/
date: 2016-06-19
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Ya tenemos un tutorial para cambiar o agregar iconos en el pie de página de Zerif Lite, que nos enseña a editar uno de los archivos del tema hijo (footer.php)...."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 320
---

# Zerif Lite: ¿Cómo cambiar los iconos de los miembros del equipo?

Ya tenemos un [tutorial para cambiar o agregar iconos en el pie de página](https://caribdis.net/2015/12/06/zerif-lite-como-anadir-iconos-de-redes-sociales-en-el-pie-de-pagina/) de **Zerif Lite**, que nos enseña a editar uno de los archivos del tema hijo (`footer.php`). Como el mismo método no aplica para los iconos de los miembros de equipo, [**ThemeIsle**](https://caribdis.link/ThemeIsle) nos ofrece esta alternativa sencilla y rápida para lograr esta modificación, inclusive sin necesidad de usar un tema hijo.

Para este capítulo número diecinueve, en el primer ejemplo aprenderemos a reemplazar el icono de *Behance* con el de *Instagram*. Para eso, en primer lugar tendremos que instalar un plugin que nos permita añadir código JS, como por ejemplo [Header and Footer Scripts](https://wordpress.org/plugins/header-and-footer-scripts/) o [Header and Footer Scripts Inserter](https://wordpress.org/plugins/header-and-footer-scripts-inserter/). Una vez instalado, buscaremos en las opciones del plugin (generalmente en el menú *Ajustes)* el campo para añadir un script al pie de página y pegaremos lo siguiente:
<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
});
</script>
![Zerif Lite - Iconos de miembro de equipo](https://caribdis.net/wp-content/uploads/2016/06/zerif-iconos-equipo.jpg)

Si necesitamos cambiar otros iconos, seguiremos la misma lógica y usaremos las clases de *Font Awesome* que correspondan. Por ejemplo, para mostrar también el icono de *WordPress* (en lugar del de *Dribbble),* el código será el siguiente:
<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
   $('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>
![Zerif Lite - Otros iconos de miembro de equipo](https://caribdis.net/wp-content/uploads/2016/06/zerif-iconos-equipo2.jpg)

¡Eso es todo! Y a no confundir las clases de los iconos. Siempre es bueno tener a mano la página de **[Font Awesome](http://fontawesome.io/icons/)** como referencia.

Recordemos que tendremos que introducir la URL correspondiente a la nueva red social, en el campo de la red social que reemplazamos, dentro del widget *Zerif - Miembro de equipo*.

¿Y qué pasa si ya estamos usando un tema hijo y no queremos instalar el plugin? Simple: agregamos una función en el archivo `functions.php` para aprovechar el *hook* `zerif_bottom_body`:
function zerif_child_team_icons() {
    if ( is_front_page() ) {
    ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
   $('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>
    <?php }
}
add_action( 'zerif_bottom_body', 'zerif_child_team_icons');
**Tutorial original en inglés: [How to change Our Team icons in Zerif](http://docs.themeisle.com/article/136-how-to-change-our-team-icons-in-zerif)**