Tu Moodle tiene en la página principal esa larga lista de categorías con links sólo texto que aburre hasta las vacas: ¿quieres que sea más agradable para tu público?, pues sigue leyendo, ya que en esta guía te enseñaré como insertar iconos en las categorías de los cursos de Moodle.
Prepárate pues como siempre, lo haremos al pelo y sin plugins, tal como me gusta 😉.
Tabla de contenidos
Prerrequisitos
Para esta guía necesito que leas mi artículo (y lo apliques a tu Moodle) sobre Como integrar iconos Material design, ya que es la base que necesitas antes de continuar con esta.
Trabajaremos con los Material icons que le dará a nuestro Moodle un toque de diferenciación a los trillados Font Awesome.
Nota
Usaré el tema Clean como referencia, tal como he hecho hasta ahora en la serie Como instalar Moodle en tu PC. Trabajaré, asimismo en mi servidor local en Wampserver como te enseñé aquí.
Cree sólo cuatro categorías en el Moodle para esta guía, pero es aplicable a todas las que quieras.
Esta es la vista de nuestro Moodle antes de los cambios:

Añadiendo CSS
Ve a la carpeta donde está instalado tu Moodle. En mi caso es D:\wamp64\www\moodleprueba, dentro está la carpeta theme, contiene todos los temas de Moodle.
Vamos a theme \clean\style. Allí está el archivo custom.css, que es el fichero de estilo del tema clean de Moodle.
Tip
Usa un editor de texto, como notepad de Windows para modificar los archivos css. Yo siempre recomiendo el Notepad++, es una de mis herramientas favoritas 😀.
Abre custom.css y agrega el siguiente código al final del archivo, no guardes todavía los cambios.
#frontpage-category-names, #frontpage-category-names .course_category_tree { clear: both; padding: 0px; } .course_category_tree .category { position:relative; float:left; width:120px; height:120px; margin:5px; margin-right:10px; padding:0; } .course_category_tree .category.dimmed_category { border-color:#aaa; } .course_category_tree .category .info .name { padding:0; text-align:center; } .course_category_tree .category.with_children>.categoryname,.course_category_tree .category>.categoryname { background:none; padding-left:0px; } .course_category_tree .category .numberofcourse{ background:#777; color:#fff; padding:5px 5px; border-radius:100px; position:relative; top:-140px;left:60%; font-family:"[[setting:headingfont]]",sans-serif; font-weight:normal; font-size:1em; -moz-box-shadow:1px 1px 5px 0px #ccc; -webkit-box-shadow:1px 1px 5px 0px #ccc; box-shadow:1px 1px 5px 0px #ccc; border:2px solid #fff; } .course_category_tree .category>.course_category_tree .category>.categoryname { background:transparent; border:0px none; text-align:center; box-shadow:none; } .course_category_tree .category.with_children>.categoryname a,.course_category_tree .category>.categoryname a { color:#444; padding-top:76px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:112px; font-size: 14px; text-decoration:none; } .dir-rtl .course_category_tree .category>.info .name { background:none; } .course_category_tree .category.with_children>.info .name { background:none; } .course_category_tree .category.with_children.collapsed>.info .name { background:none; } .dir-rtl .course_category_tree .category.with_children.collapsed>.info .name { background:none; } .course_category_tree .category[data-categoryid] { background:#fff; padding:0px !important; border:1px solid #e7e7e7; margin-bottom:10px; border-radius:5px; border-bottom:3px solid #eee; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:hover { text-decoration:none; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:before { font-family:'Material Icons'; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:80px; z-index:1; color:[[setting:themecolor]]; position:absolute; top:30px; left:20px; height:55px; color: #C65F63; text-decoration:none; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:hover:before { color: #f4696f; } .course_category_tree .category[data-categoryid="NUMERO DE CATEGORIA"]>.info>.categoryname a:before { content:'NOMBREICONO'; } .course_category_tree .category .content display:none; } .jsenabled .course_category_tree .controls { display:none; }
Entendiendo el código
Para adaptar este código a tus necesidades debes modificar algunas porciones de acuerdo a las especificaciones de tu Moodle.
Developer tool
Nos apoyaremos en la Developer tool, tal como expliqué en este post. Está disponible en casi todos los navegadores apretando la tecla F12. Con ellas accederás al código de una página web, incluyendo las tuyas.
Como referencia usaré Firefox como navegador, aunque con Chrome la explicación es prácticamente la misma, sólo varían en algo la ubicación de los iconos de la Developer tool.
Haciendo los cambios
Presiona F12 en tu navegador, para que aparezca la herramienta. Haz clic en la flecha de la esquina izquierda, que marca: Elegir un elemento de la página.
Con la flecha seleccionada: haz clic al nombre de la categoría que quieras cambiar por un icono. Con esta acción el inspector de la herramienta nos mostrará el número de la categoría que debemos cambiar en el CSS que te puse arriba.

Anota el número que está después de: categoryid=. Lo mismo debes hacerlo con todas las categorías en tu Moodle que quieras sustituir con iconos.
La porción del código que debes cambiar es esta:
.course_category_tree .category[data-categoryid="NUMERO DE CATEGORIA"]>.info>.categoryname a:before { content:'NOMBREICONO'; }
Donde el NUMERO DE CATEGORÍA es el que anotaste en cada vinculo de las categorías. El NOMBREICONO es él que quieres mostrar en esa categoría, entre la variedad que tienen los Material icons, tal como te enseñé aquí.
Replica el código: uno debajo del otro dependiendo de cuantas categorías tengas en Moodle. Así quedaría el mío, con las cuatro categorías.
.course_category_tree .category[data-categoryid="1"]>.info>.categoryname a:before { content:'memory'; } .course_category_tree .category[data-categoryid="2"]>.info>.categoryname a:before { content:'local_atm'; } .course_category_tree .category[data-categoryid="3"]>.info>.categoryname a:before { content:'account_balance'; } .course_category_tree .category[data-categoryid="4"]>.info>.categoryname a:before { content:'accessibility'; }
Dato
Mi recomendación es que cambies todas las categorías, es tu elección, pero si no lo haces quedará bastante descuadrado el diseño.
Una vez hayas cambiado y añadido lo necesario al CSS, guarda los cambios al custom.css para que veas como queda tu Moodle con iconos en las categorías.
Por si todavía tienes dudas, mi código final queda así:
#frontpage-category-names, #frontpage-category-names .course_category_tree { clear: both; padding: 0px; } .course_category_tree .category { position:relative; float:left; width:120px; height:120px; margin:5px; margin-right:10px; padding:0; } .course_category_tree .category.dimmed_category { border-color:#aaa; } .course_category_tree .category .info .name { padding:0; text-align:center; } .course_category_tree .category.with_children>.info>.categoryname,.course_category_tree .category>.info>.categoryname { background:none; padding-left:0px; } .course_category_tree .category .numberofcourse{ background:#777; color:#fff; padding:5px 5px; border-radius:100px; position:relative; top:-140px;left:60%; font-family:"[[setting:headingfont]]",sans-serif; font-weight:normal; font-size:1em; -moz-box-shadow:1px 1px 5px 0px #ccc; -webkit-box-shadow:1px 1px 5px 0px #ccc; box-shadow:1px 1px 5px 0px #ccc; border:2px solid #fff; } .course_category_tree .category>.info,.course_category_tree .category>.info>.categoryname { background:transparent; border:0px none; text-align:center; box-shadow:none; } .course_category_tree .category.with_children>.info>.categoryname a,.course_category_tree .category>.info>.categoryname a { color:#444; padding-top:76px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:112px; font-size: 14px; text-decoration:none; } .dir-rtl .course_category_tree .category>.info .name { background:none; } .course_category_tree .category.with_children>.info .name { background:none; } .course_category_tree .category.with_children.collapsed>.info .name { background:none; } .dir-rtl .course_category_tree .category.with_children.collapsed>.info .name { background:none; } .course_category_tree .category[data-categoryid] { background:#fff; padding:0px !important; border:1px solid #e7e7e7; margin-bottom:10px; border-radius:5px; border-bottom:3px solid #eee; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:hover { text-decoration:none; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:before { font-family:'Material Icons'; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:80px; z-index:1; color:[[setting:themecolor]]; position:absolute; top:30px; left:20px; height:55px; color: #C65F63; text-decoration:none; } .course_category_tree .category[data-categoryid]>.info>.categoryname a:hover:before { color: #f4696f; } .course_category_tree .category[data-categoryid="1"]>.info>.categoryname a:before { content:'memory'; } .course_category_tree .category[data-categoryid="2"]>.info>.categoryname a:before { content:'local_atm'; } .course_category_tree .category[data-categoryid="3"]>.info>.categoryname a:before { content:'account_balance'; } .course_category_tree .category[data-categoryid="4"]>.info>.categoryname a:before { content:'accessibility'; } .course_category_tree .category .content display:none; } .jsenabled .course_category_tree .controls { display:none; }
El resultado final debe verse como esto:

Es importante mencionar que me basé en este post de la comunidad de Moodle.org para este artículo. Recuerda que puedes adaptar los colores, disposición de iconos, tamaño del bloque, toqueteando un poco el CSS que te mostré.
Si tienes alguna duda, ya sabes dónde dejarlas. Muéstrame como ha quedado tu Moodle después de estos cambios.
Buenas tardes, una consulta, deseo colocar íconos en las categorías e íconos en los cursos en moodle 3.8 que ya esta en el internet, cuales serían los pasos, oexiste algún plugin que facilite este trabajo.
De antemano muchas gracias
Hola Christian.
Esta guía no es aplicable a la versión 3.8 si tienes el tema Boost en Moodle.
Espero actualizarlo en un futuro cercano.
Saludos.
Quisiera que en lugar de iconos sean imágenes definidas en la categoría, como puedo hacer esto?
Hola Luis.
Donde pone NOMBREICONO pondríamos la url de la imagen, pero habría que hacer cambios varios al código css para adaptarlo.
Esta anotado en mi calendario editorial para hacer un post sobre esto.
Saludos.
Hola, gracias por contestar.
Modificando el código ya he logrado ponerle imágenes en lugar de los iconos y le agregue >span al final de .course_category_tree .category .numberofcourse por que me ponía el numero en otro lado, así que muchas gracias y estaré al pendiente de tus posts, Saludos