Como cambiar los Iconos de Moodle para las Actividades y Recursos

Reconozcámoslo: Los iconos de Moodle para las actividades y recursos de los cursos son aburridos y están desactualizados 😅.

Cuando salieron hace algunos años atrás eran sensacionales, pero le hace falta un refrescamiento para adaptarlo a los nuevos tiempos.

Y si no lo hacen los creadores de Moodle, pues lo haremos nosotros.

En este artículo te enseñaré cómo cambiar los iconos de Moodle para las actividades y recursos en los cursos, y tengas tu tema personalizado al máximo. ¡Síganme los buenos!

Importante

Para cambiar los iconos de Moodle es necesario acceder al servidor donde se aloja tu plataforma, para poder subir los nuevos archivos.

Puedes hacerlo mediante FTP. Si tienes cPanel, puedes hacer uso del Administrador de archivos.

Si no quieres andar dando vueltas por la estructura de Moodle de tu servidor en funcionamiento, recomiendo descargarlo a tu computadora y ubicar los archivos que necesites cambiar. Esto hará más sencillo el trabajo.

Ubicando el icono de Moodle que deseamos cambiar

Antes de comenzar, y si todavía no estás ubicado: estos son los iconos de los cursos de Moodle que vamos a remplazar, te mostraré como hacerlo:iconos de moodle predeterminados para recursos y actividades

Lo primero que debemos hacer es ubicar dentro del directorio de carpetas de Moodle el icono(s) que deseamos cambiar.

Los iconos de Moodle representan actividades y recursos, por lo que cada uno de ellos tienen su imagen.

Estas imágenes están ubicadas en los módulos respectivos. Por ejemplo: Cuestionario = quiz, Foro = forum, etc.

Cada módulo tiene una carpeta en Moodle, estos se encuentran agrupados en el directorio principal en la carpeta mod. Dentro de cada una de ellas se encuentra una carpeta pix.

Es importante recordar el nombre exacto de la carpeta de cada módulo donde queramos cambiar los iconos, ya que lo necesitaremos más adelante.

estructura del directorio de módulos de moodle

En esta carpeta pix, es donde se guarda los iconos de Moodle que queremos cambiar, bajo el nombre icon.

Una vez ubicado el icono a reemplazar, hemos hecho la mitad del trabajo (bueno no tanto, aunque casi 🤔)

Ahora, solo nos queda buscar el nuevo icono por el que lo vamos a reemplazar y subirlo a nuestro Moodle.

Tipos de archivos de imágenes que tienen los iconos de Moodle

Los iconos de Moodle para las actividades y recursos pueden ser de diversos tipos: png, gif, svg, jpg. Todos ellos son formatos de imagen válidos.

Los formatos más recomendables son png y svg (vectores).

Entre estos dos tipos, el mejor es el svg, ya que, al ser de imagen de vectores, no pierden calidad al ponerlos más grandes o más pequeños.

También por lo general, son ligeros en cuanto a peso (megabytes).

El único defecto de los archivos svg, es que si usas un navegador web muy antiguo es posible que no lo soporte.

Con respecto al tamaño de los iconos de Moodle:

  1. Para los iconos png, gif o jpg recomiendo un tamaño de 24 pixeles de alto por 24 pixeles de ancho (24×24).
  2. Los archivos svg al ser vectores podemos usarlos directamente sin necesidad de ajustarlos a un tamaño específico.

Un excelente sitio web donde encontrarás iconos tanto en formato svg o png es Flaticon.

El nombre de la imagen debe ser icon. Si le colocas otro nombre no funcionará 👈

Nota
Si vas a usar el icono en formato svg, pero todavía tienes personas que acceden a tu plataforma Moodle con navegadores muy antiguos.  Es recomendable que tengas también el icono en formato de pixeles, como png por ejemplo.

De esta forma si el navegador no puede cargar el de vectores (recomendado), cargará el de pixeles automáticamente.

Subiendo los iconos a Moodle

Ahora que ya tenemos el icono que va a reemplazar al antiguo, vamos a subirlo a nuestra plataforma Moodle.

Vamos a la carpeta del tema que estemos usando en Moodle.

Para saber el tema que estás usando en Moodle, ve logeado como administrador a: Administración del sitio > Apariencia > Temas > Selector de temas. A la derecha del cuadro que pone Default podrás ver el nombre del tema activo.

como saber que tema por defecto usa moodle

La carpeta de temas de Moodle está ubicada en el directorio principal en theme. Dentro encontrarás las subcarpetas que contiene todos los temas.

Por ejemplo, si tienes el tema Boost, la carpeta donde se ubica sería: theme > boost.

Dentro de la carpeta del tema crearemos una carpeta llamada: pix_plugins

Si ya está creada, por favor sáltate este paso.

En ella crearemos una carpeta llamada: mod

Dentro de ella crearemos una carpeta con el nombre del módulo que contendrá el icono de Moodle a sustituir.

Si la carpeta del módulo donde está la imagen que quieres reemplazar, se llama, por ejemplo, quiz, debemos crear una una estructura de directorios igual a esta: theme > boost > pix_plugins > mod > quiz.

Por esto te pedí que no olvidaras el nombre de la carpeta del módulo que contiene la imagen a reemplazar 😉

Dentro de esta última carpeta, copiaremos el icono de Moodle a cambiar, con el nombre icon .

Ahora es necesario limpiar la cache de Moodle para que puedas ver los cambios.

Para hacerlo dirígete como administrador a: Administración del sitio > Desarrollo > Purgas cachés. Haz clic al botón Purgar todas la cache.

¡Listo!, ahora dirígete a cualquier curso y podrás deleitarte con tus nuevos iconos 😍

¡Si, ya sé!, esto es un poco rebuscado y algo difícil de entender 🤯, seguro que lo comprenderás mejor con un ejemplo práctico.

Ejemplo practico de cómo reemplazar el icono de actividades y recursos

Si quieres sustituir la imagen de la actividad Foro y suponiendo tenemos activo el tema Boost.

  1. Ubicamos en la carpeta de módulos (mod/nombre_del_modulo/pix) de Moodle, el que contiene la imagen a reemplazar. Toma nota del nombre de la carpeta del módulo.
    Para nuestro ejemplo, la carpeta que contiene la imagen para foro es forum (por lo general tienen nombre parecidos en inglés 💡)
  2. Localiza en el directorio principal de Moodle, el tema activo: theme > boost
  3. Crea en el directorio del tema boost la carpeta pix_plugins.
  4. Dentro de ella, crea una carpeta llamada mod.
  5. A continuación, crea una carpeta llamada forum en el directorio creado en el paso anterior.
    La estructura de directorios resultante en Moodle sería: theme > boost > pix_plugins > mod > forum.
  6. Dentro, coloca la imagen que reemplazará a la actual, con el nombre icon.
    Si es una imagen svg, se recomienda un icono png igual para navegadores antiguos.
    Por lo que tendrías dos imágenes con nombre icon: una para svg y otra para png.
  7. Limpia la cache de Moodle.

estructura de carpetas para iconos de actividades y recursos

Este será el resultado final que obtuve cambiando los iconos del quiz (cuestionario) y foro, ¿bonito verdad? 🤗

nuevos iconos para recursos y actividades en moodle

Hasta aquí este tutorial. Espero te sirva para personalizar tu Moodle.

Recuerda dejar un comentario, sabes que me encanta leerlos. Saludos.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 9

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Photo of author

Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

18 comentarios en «Como cambiar los Iconos de Moodle para las Actividades y Recursos»

  1. Hola,

    Sabes como podría cambiar la Laptop que sale en los topicos cuando no se muestran todos en la misma pantalla? Es el icono de cada tópico

    Ya lo busqué en la carpeta pix pero no lo encuentro.

    Saludos

    Responder
  2. Hola, te hago una consulta, estoy usando moodle 3.10.3+.
    Hay alguna forma de poner una imagen o icono al costado del nombre del curso?
    Es decir tengo una lista de curosos donde se muestra un simbolo parecido al de un atomo gris, es una ruedita eliptica con 3 bolitas y a la derecha en nombre de cada curso, y debajo de estos los nombres de los profesores, queria personalizar esta parte agregandole una imagen representativa a cada curso.
    Estoy usando el tema bost
    gracias

    Responder
    • Hola Isaac.
      Este articulo es aplicable a los iconos de actividades y recursos principales, no de las ramas de esta.
      A los que te refieres se guardan en: pix > f, ubicado en el directorio raíz del Moodle; debes reemplazarlos hay, en todos los tamaños que se muestran.

      Espero sea de ayuda.
      Saludos.

      Responder
  3. Hola en el moodle 3.10 no se cambia el icono en donde están todos los iconos solo cuando se agrega si pone el icono pero donde están todas las actividad y recursos sigue apareciendo el icono viejo.

    Responder
  4. Hola excelente información y muy clara la explicación, una pregunta…
    se pueden cambiar los iconos de los titulos de los bloques? o quitarlos?
    Estoy usando la versión 3.9 y en especifico el bloque HTML me gustaría no mostrara el icono.
    Saludos!

    Responder
  5. Hola soy nuevo en esto del moodle , su ayuda tengo instalado el moodle 3.9 y al querer cambiar o agregar cualquier imagen me acepta pero no se visualiza tanto para los iconos de los cursos o contendido solo muestra el icono cuadrado en blanco sin imagen .
    Desde le agradezco su ayuda .

    Responder
  6. Hola,
    Muy completo sus post.
    Quería saber cómo cambiar el icono de «mis cursos» en el navegador principal … donde encuentro esa carpeta? tema moove … Muchas gracias.

    Responder
  7. Hola
    Genial el post, me ha funcionado, pero tengo un pequeño problema que no se si es normal y si me puedes decir, he subido el icono en formato svg, pero los veo mucho más pequeños que los originales de moodle, se ven más pequeños.
    Saludos
    Jose

    Responder
    • Hola José.

      El icono debería mostrarse correctamente si seguiste todos los pasos y es un icono SVG valido sin errores, ya que Moodle por defecto define el tamaño del icono en 24 pixeles de alto por 24 de ancho.

      De todas formas prueba con este código CSS:

      img.activityicon {
      height: 24px;
      width: 24px;
      }

      Si no sabes como agregar código CSS en Moodle este post te puede ayudar.

      Espero sea de ayuda.
      Saludos.

      Responder
  8. Hola,

    Está genial este post, me ayuda mucho.

    Me gustaría saber si el icono para abrir la barra de navegación (tres rayas horizontales sobre fondo gris) también se puede cambiar de esta forma y, si es el caso, donde podría estar el icono a sustituir, ya que creo que no lo encuentro, en la carpeta de módulos por lo menos.

    ¡Gracias!

    Saludos.

    Responder
    • Hola Nerea.

      Claro que puede cambiarse, pero eso seria tema de un post, que voy a agendar prontamente.

      Por lo pronto, si quisieras cambiarlo por ejemplo, por un símbolo de «+» en un cuadrado, seria un código así:

      .fa-navicon:before, .fa-reorder:before, .fa-bars:before {
      content: "\f0fe";
      }

      Espero te ayude,

      Saludos.

      Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.