Como integrar iconos Material design en Moodle

Si algo me encanta en el diseño web son los iconos, dan vida a nuestras páginas 😀 , haciéndolas más vibrantes y agradables. En esta guía voy a enseñarte a insertar iconos Material design en Moodle, haciendo uso de los Material icons. Además de otros tips adicionales que siempre tengo para tí.

¿Qué es Material design?

Al referirnos a los diseños flat o aplanados, tenemos que referirnos inmediatamente al Material design, que es la apuesta de Google por el diseño. Partió de los dispositivos móviles para imponerse como tendencia en el diseño web en general.

Google material design

 

Los Material icons son parte de este lenguaje visual que hace uso de elementos sencillos y formas geométricas para representar visualmente las ideas básicas. Para nosotros los mortales :mrgreen:  significa que los elementos usados en el diseño son aplanados y sin florituras en lo posible.

Material icons

Adentrándonos en lo que nos interesa. De todo lo hablado antes, surge un pack de iconos para su uso por Google en sus plataformas y sistemas operativos. Esto fue puesto a disposición de los desarrolladores y publico en general para hacer el diseño alrededor de los servicios de Google homogéneos.

El paquete de iconos va por más de 900 y creciendo con cada actualización.

La ventaja de estos iconos con respecto a su uso en forma de imagen, es que, al ser fuentes tipográficas los iconos que contenga están disponibles en ese archivo.

Una fuente tipografica puede pesar tan poco como 100 kilobytes (1 megabyte = 1024 kilobyte), en formato de imagenes varios iconos pueden pesar varios megabytes.

Esto aporta rapidez a la carga de la página web. Y a nadie le gusta una página que tarde mucho en visualizarse, incluido Google Sin contar el ahorro en el diseño de los iconos, que no es moco de pavo 😆 .

¿Cómo agregarlos a Moodle?

Los podemos incorporar a nuestro Moodle de dos maneras:

  1. Tomándolos de los servidores de Google, con una referencia que podemos introducir en el HTML de nuestro tema.
  2. Alojándolos en nuestro servidor web, en forma de fuente tipográfica o vectorial que podemos usar en nuestro Moodle.

Esta última opción es la que usaremos en esta guía. Subiremos al servidor web los material icons que nos ofrece Google en forma de fuente y vectores, para luego usarlo en la plataforma Moodle.

Esto nos aportara más velocidad y flexibilidad, que si lo tomáramos de los repositorios de Google.

Font Awesome vs material icons

Los iconos Font Awesome son también un pack de iconos. En los últimos años se ha convertido en el estándar de la industria del diseño web en cuanto a iconos referenciados.

Material icons no llega ni de lejos a la popularidad de los font awesome en el diseño web, al menos hasta ahora, pero aporta algo de diferenciación.

Los dos son perfectamente válidos para nuestro Moodle. En mi caso uso los material icons, ya que me gusta variar con respecto a la tendencia actual, y ofrecer algo diferente a los font awesome, que aparecen hasta en la sopa 😈 .

Para instalar font awesome puedes hacerlo con esta guía de los foros de Moodle.

Descargas necesarias

Para esta guía necesitemos los material icons. Puedes descargar el paquete completo, con todo, desde aquí.

Haz clic al botón verde en la esquina derecha que marca: Clone or download, para que se despliegue un menú donde seleccionaras la opción Download ZIP.

Descargar material icons

Descomprime el .ZIP resultante del cual usaremos los archivos:

MaterialIcons-Regular.eot
MaterialIcons-Regular.svg
MaterialIcons-Regular.ttf
MaterialIcons-Regular.woff
MaterialIcons-Regular.woff2

Están en la carpeta marcada como: iconfont

Si no quieres descargar todo el pack, obtén sólo las fuentes y vectores necesarios para esta guía, desde aquí. Descarga solo los cinco archivos antes mencionados. Dale clic a cada enlace y bájalo desde el botón Download en cada caso.

Nota
Como hemos hecho hasta ahora en todas las guías de la serie: Como instalar Moodle en tu PC. Usaremos nuestro servidor local Wampserver, el cual montamos en nuestra PC en esta guia.

Para un servidor en la web, es prácticamente igual, solo cambian las rutas donde están archivos, ya que la estructura de Moodle es la misma.

En esta guía, la instalación la haremos en el tema Clean de Moodle, que es el tema predeterminado en la versión 3.x.

Lo hago sobre este tema, ya que no contiene referencia a ningún paquete de iconos, como los font awesome, que usan la mayoría de los themes personalizados de los repositorios de Moodle.

Instalando los material icons en Moodle

Vamos a la carpeta donde instalamos el Moodle en el www del Wampserver, dependiendo de donde lo instalaste. En la guía que te referencié antes están los detalles.

En mi caso la carpeta es D:\wamp64\www\moodleprueba, dentro esta la carpeta theme, contiene todos los temas de Moodle.

Copiando las fuentes

En theme, abrimos la carpeta clean. En ella crearemos una carpeta a la cual llamaremos: fonts. Copiaremos en ella los cinco archivos material icons descargados.

Tipografia material icons en theme

Agregando el css

Volveremos a la carpeta clean, esta vez nos dirigiremos a la carpeta style, dentro encontraremos un archivo llamado: custom.css. Este contiene el css del tema clean.

Tip
Para modificar archivos css, php, html, entre otros, puedes usar el bloc de notas de Windows, o el Notepad++. Te recomiendo este último, hace un estupendo trabajo, y es free, como siempre: no se puede pedir más 😎 .

Abrimos el archivo custom.css, y agregaremos este código al final del archivo, guardamos los cambios.

La primera parte del código bajo @font-face, habilita la carga de las fuentes tipográficas y vectorial de material icon en Moodle.

La otra parte debajo de .material-icons, hacen que se represente correctamente el icono en la web. Si quieres ahondar más visita la página web del proyecto.

Estilo para los iconos

El siguiente código es opcional y dependerá de cómo quieras que se visualicen los iconos en Moodle. Con este css busco agregar iconos a la barra del menú superior (menú personalizado). Este menú se agrega en el Moodle desde Administración del sitio > Apariencia > Temas > Ajustes de temas, en el cuadro de texto marcado: Ítems del menú personalizado.

Debes copiarlo en el mismo custom.css, después del código anterior. Guarda al finalizar los cambios.

Da estilo a los iconos con respecto:

  • Tamaño del icono: 16px
  • Márgenes con respecto al texto: 5px a la izquierda y derecha.
  • Baja el icono al nivel del texto: -10%

Cambiando los iconos

Una parte importante de este código opcional es la propiedad: content, esta define cual icono de los disponibles se usara. Simplemente cambiando el nombre entre comillas en la propiedad obtendrás el icono que desees entre todos los que contiene material icons.

Para ejemplificarlo, analizaremos esta porción del código anterior:

Vemos que, en la segunda línea, la propiedad content tiene la palabra offline_pin en comillas: content: ‘offline_pin’;

Cambiando offline_pin por grade, cambiaremos el icono, de un check dentro de un círculo a una estrella tan sencillo como eso 😆 .

offlinepin a grade

Para una lista completa de los nombre de los iconos a colocar aquí, entra en este link.

Para conocer el nombre que debes colocar en la propiedad content, haz clic en el icono que te interese, se desplegará una barra, dale clic a esa barra para que se amplíe, el nombre que nos interesa estara entre este código: <i class=”material-icons”>NOMBREICONO</i>

Buscar nombres material icons

Importante
Para que veas los cambio en Moodle es posible que tengas que habilitar el Modo de diseño de temas en Administración del sitio > Apariencia > Temas > Ajustes de temas. Recuerda deshabilitarlo en un servidor en la web cuando concluyas los cambios.

Resultado final

Con estos pequeños cambios a nuestro Moodle, podremos agregar los más de 900 iconos en cualquier parte que podamos introducir html o css.

Les dejo el resultado final. Saludos.

Resultado final material icons en moodle

Califica este artículo

Puntuación promedio / 5. Votos:

4 comentarios en “Como integrar iconos Material design en Moodle”

  1. Hola, muy interesante este post! La pregunta es, cómo hago para cambiar los iconos de las actividades que vienen por defecto en moodle (tareas, archivos, scorm, página, etc)
    La idea es reemplazarlos por material icons

    GRacias!

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.

Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete