Cómo 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 ti.

¿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.

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  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.

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.

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.

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.

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

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url([[font:theme|MaterialIcons-Regular.eot]]);
src: url([[font:theme|MaterialIcons-Regular.eot]]) format('embedded-opentype'),
url([[font:theme|MaterialIcons-Regular.woff]]) format('woff'),
url([[font:theme|MaterialIcons-Regular.woff2]]) format('woff2'),
url([[font:theme|MaterialIcons-Regular.ttf]]) format('truetype'),
url([[font:theme|MaterialIcons-Regular]]) format('svg');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

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.

.navbar .nav li {
font-size: 16px;
}
.navbar .nav li a[title="Moodle.com"]:before {
content: 'offline_pin';
font-family: 'Material Icons';
vertical-align: -10%;
margin: 0 5px;
font-size: 16px;
}
.navbar .nav li a[title="Comunidad Moodle"]:before {
content: 'language';
font-family: 'Material Icons';
margin: 0 5px;
vertical-align: -10%;
font-size: 16px;
}
.navbar .nav li a[title="Idioma"]:before {
content: 'record_voice_over';
font-family: 'Material Icons';
margin: 0 5px;
vertical-align: -10%;
font-size: 16px;
}

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:

.navbar .nav li a[title="Moodle.com"]:before {
content: 'offline_pin';
font-family: 'Material Icons';
vertical-align: -10%;
margin: 0 5px;
font-size: 16px;
}

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.

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>

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.